毛小星-优快云博客

原创浅析React Hooks原理

React Hooks 简介React Hooks 是 React 16.8 以及之后版本的产物，React Hooks 就是一堆钩子函数，不同的钩子函数提供了不同的功能，React 通过这些钩子函数对函数型组件进行增强。Hooks 允许你在不编写 class 的情况下使用状态(state)和其他 React 特性。你还可以构建自己的 Hooks, 跨组件共享可重用的有状态逻辑。践行代数效应React 核心成员 Sebastian Markbåge (Hooks 的发明者)曾说：我们在 React

2021-08-22 20:59:50 2858

原创 React Fiber 架构原理

Fiber 原理在 Fiber 出现之前 React 存在什么问题在 React 16 之前的版本对比更新 VirtualDOM 的过程是采用 Stack 架构实现的，也就是循环加递归。这种对比方式有一个问题，就是一旦任务开始进行就无法中断，如果应用中的组件数量庞大，Virtual DOM 的层级比较深，主线程被长期占用，直到整棵 VirtualDOM 树比对更新完成之后主线程才能被释放，主线程才能执行其他任务。这就会导致一些用户交互，动画等任务无法立即得到执行，页面就会产生卡顿, 非常的影响用户体验。

2021-08-08 16:28:14 452 1

原创 ts封装localStorage和sessionStorage

ts封装localStorage和sessionStorage我们经常需要在 localStorage 或者 sessionStorage 去持久化存储值，但是 localStorage 和 sessionStorage 提供的 api 在处理对象的时候，往往需要 stringify 去转成字符串去存储，再通过 parse 去转换回来，这样是比较麻烦的，我们就可以将这些操作封装成函数去调用const useStorage = ($storage) => { /** * 根据 key 值获

2021-07-03 11:30:03 1525 1

原创 vue 封装 wangEditor

wangEditor 是一款比较流行的富文本编辑器，它比较轻量级，并且很容易通过css来定制化样式下面的代码是用ts写的，如果是js的话，转换一下就行了，只是语法不一样<template> <div class="editor"> <div ref="toolbar" class="editor_toolbar" :class="toolbarClass" ></div> <

2021-07-02 10:57:14 364

原创 Vue 项目优化

v-if 和 v-show 区分使用场景v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。true：渲染元素false：不渲染，移除元素v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。true：display: blockfalse：display: none

2021-06-30 20:19:01 144

原创 Vue3的简单介绍

Vue3和Vue2的区别源码的组织方式使用 TypeScript 重写首先为了提升代码的可维护性，Vue3.0 抛弃了 Flow 类型注释，而是全部采用了更加严格的 TypeScript 重写，大型项目的开发都推荐使用类型化的语言，这样可以在编码的过程中帮助我们检查类型化的问题，比如给函数传参，如果类型不匹配，会有相应的类型提示。当然了，你可以不在你的项目中使用 TypeScript，而是使用 JavaScript，Vue3.0 也是完全支持的使用了 monorepo 管理项目结构mono

2021-06-29 19:32:20 986

原创 github自动部署nuxt项目

部署前的准备最近在学习 nuxt 框架，花了几天做了一个 realWorld 博客 demo，正好遇到了一些部署的问题，在这里做一个简单的教程。在部署前我们需要准备一些东西：首先你需要一个本地能够跑通的项目然后需要一个能够使用的云服务器，可以到阿里云或者腾讯云买一个 linux 服务器在 linux 服务器上安装 node，安装过 node 可以直接略过，如果没安装过看我之前写的在linux服务器上安装node教程在 linux 服务器上安装 pm2，我们需要使用 pm2 来在服务器上后台开启

2021-06-29 19:28:39 499

原创 JavaScript 处理树列表转树遍历树查找树

树的操作在前端的工作中占据了比较重要的位置，我总结了一些我平时处理树数据的方法情况一将列表转换成 tree有的时候后端比较懒，不愿意处理树数据，给的是一个列表数据，这时候就需要前端将列表转换成 tree 数据// 列表数据const list = [ { id: 01, pid: null }, { id: 02, pid: null }, { id: 03, pid: 01 }, { id: 04, pid: 03 }, { id: 05, pid: 01 }, { id

2021-06-15 15:43:03 697 1

原创 linux 给用户添加权限

linux 给用户添加权限首先用 xshell 或者 MobaXterm 这样连接服务器的软件然后使用管理员权限进入 root 目录cd / // 进入服务器目录sudo su // 进入管理员权限cd root/ // 进入 root 目录然后进入 join_domain_linux 目录，记不住命令的话，用 ls 命令列一下当前目录下的文件cd join_domain_linux/ls然后就会看见两个 shell 脚本文件然后输入下面的命令为用户添加权限./ssh_All

2021-05-24 21:34:44 3882

原创 Vuex的使用并实现一个简易版Vuex

Vuex 回顾什么是 VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 是专门为 Vue.js 设计的状态管理库它采用集中式的方式存储需要共享的数据从使用角度，它就是一个 JavaScript 库它的作用是进行状态管理，解决复杂组件通信，数据共享什么情况下使用 Vuex官方文档：Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期

2021-05-24 21:31:03 154

原创 Vue之watch源码解读

回顾 watch 的用法watch 是 Vue 中的一个监听数据变化的一个方法，我们在阅读源码之前先来回顾一下 watch 的用法监听基本数据类型<div> {{ name }} <button @click="changeName">改变name</button></div>export default { data() { return { name: 'maoxiaoxing', } }, wa

2021-05-16 22:59:16 595

原创 Vue中的$attrs和$listeners

Vue中的 $attrs 和 $listeners最近在研究 Vue 的组件库，之前也用过 $attrs 和 $listeners，官方文档描述的不太详细，也没有太好的例子，就没有深入的研究过这两个属性。最近生病在家，正好有时间好好研究一下 Vue 的高阶用法，写了几个 demo，下面我们来看看这两个属性到底有什么奥秘。$attrs我们先来看看官方文档的 api 描述是怎样描述 $attrs 的乍一看可能有点懵，下面我们结合下面的例子来看看 $attrs 的作用普通的 props 传值先来看看

2021-05-05 21:41:11 496 1

原创 Vue Router原理实现

Vue Router原理实现Vue 中的 History 和 Hash 模式的区别在实现 Vue Router 之前，我们来看看 Vue Router 的两种模式，前端路由的表现形式有两种，一种是 Hash 模式，一种是 History 模式。无论是哪一种都是客户端路由实现的方式，也就是说当路径发生变化时，不会向服务器发送请求，是由 JavaScript 监听路由的变化，根据不同的路由地址渲染不同的内容，如果需要服务器的内容，会发送 ajax 请求来获取。表现形式的区别Hash 模式http

2021-04-18 21:14:44 313

原创从源码看vue响应式原理

前言众所周知，Vue 是一个 MVVM 框架，它最基本的特征就是数据的双向绑定，在改变数据模型的时候更新视图，视图改变更新数据模型。Vue 上手快速、简单好用，再加上文档丰富全面，Vue 现在已经成为了市面上最流行前端框架之一。但是我们对 Vue 的了解不能仅仅只停留在应用层面上，我们还要了解它的内部原理，为什么这样设计，这样设计的优缺点是什么。我们去了解 Vue 源码，一方面是为了在我们遇到一些比较复杂的问题的时候，我们可以从源码的角度去思考问题；另一方面，了解了很多技术原理之后，或许某一天，你也能创造

2021-04-05 23:53:36 195 1

原创 Vue异步更新Dom和$nextTick原理

$nextTick 的使用场景虽然 Vue 是数据驱动的，但是有时候我们不得不去操作 DOM 去处理一些特殊的场景，而 Vue 更新 DOM 是异步执行的，所以我们不得不去使用 $nextTick 去异步获取 DOM。<template> <div> <span ref="msg">{{ msg }}</span> </div></template><script>export default {

2021-04-04 23:07:37 614

原创手写Vue2.0响应式原理

今天来实现一个简易版的Vue2.0响应式class Vue { constructor(options) { this.$options = options this.$data = options.data // 重写数组方法 let arrayPrototype = Array.prototype const methods = ['pop', 'push', 'shift', 'unshift']

2021-03-30 23:29:30 229

原创在v-html中使用filters以及在filters中使用this

vue2.0中去除了在v-html中使用filters方法，但是这是否意味着不可以这么使用了呢html部分<span v-html="$options.filters.contentFilters(item.data.description, this)"></span>js部分filters: { contentFilters(val: string, vm: Vue) { if (val && val.length > 1

2021-03-30 23:27:07 258

原创 Webpack的简单使用

1. Webpack 的简单介绍Webpack 是一个模块化的打包工具，它可以将我们的模块化代码都打包到一个 js 文件中。而对于我们在不同环境中有兼容性问题的代码，我们就可以通过模块加载器（loader）去解决。而且 Webpack 具备代码拆分的能力（Code Splitting），它可以将应用中的代码根据我们的要求去打包，我们可以将应用初次加载的代码打包到一起，其他模块的代码打包到一起，实现渐进式加载。这样我们就可以避免将所有代码都打包到一起，而引起打包文件过大，导致页面加载速度过慢的问题。Web

2021-03-28 21:29:47 179

原创 Webpack打包优化

Webpack打包优化Webapck 4 之后默认为我们做了很多配置项，内部开启了很多优化功能。对于开发人员，这种开箱即用的体验显然是很好的，但是同时也会导致我们忽略了很多需要学习的东西，一旦出现什么问题的时候，我们就无从下手了，下面我们就来看一下主要的优化配置项。DefinePluginDefinePlugin 是用来为我们的代码来注入全局成员的，在 production 模式下，这个插件就会默认开启。它会在我们的环境中注入了一个 process.env.NODE_ENV 这样一个环境变量，我们可

2021-03-27 23:11:26 190

原创 Webpack 不同环境下的配置

Webpack 不同环境下的配置我们在使用 Webpack 去构建我们的项目的时候，我们肯定要区分本地开发环境和线上环境的一些配置，因为它们两者有很多不同的地方，例如线上环境我们就不需要开启 source map 这样的选项来防止别人暴露我们的源代码。所以我们可以通过使用不同配置文件去在不同环境下打包我们的代码。我们至少需要三个文件去配置我们的项目webpack.common.js 公共配置webpack.dev.js 开发环境配置webpack.prod.js 生产环境配置这样我们就能使

2021-03-27 23:08:13 352

原创 Rollup的简单使用

1. Rollup 概述Rollup 是一款优秀的模块化打包器，它的作用与 Webpack 类似，但是相对于 Webpack，Rollup 更加小巧，它仅仅是一款模块化打包器，它并没有其他功能。例如 Webpack 有模块热替换功能，而 Rollup 对这样的功能就没有很好的支持。Rollup 的诞生并不是为了和 Webpack 去竞争，而只是为了提供一个充分利用 ESM 各项特性的高效打包器。如果你同时看过 Rollup 和 Webpack 打包后的文件后，你就会发现 Rollup 的打包文件简洁的

2021-03-21 23:42:50 1543

原创 Gulp的简单使用

1. Gulp 的简单介绍Gulp 是一款比较主流的前端构建工具，它相比于 Grunt 的构建速度会更快一些，因为 Gulp 是基于内存去实现的，相对于磁盘读写，它的速度肯定会更快。而且它默认支持同时执行多个任务，所以效率会大大提高，而且它的使用方式相对于 Grunt 会更加简单一些，配置文件的结构也比较简单易懂，所以现在也是比较受欢迎的前端构建工具，很多大型项目会将 Gulp 和 Webpack 混合使用，去处理一些比较复杂的情况。2. Gulp 的基本使用我们创建一个文件，然后初始化 packa

2021-03-21 23:37:36 101

原创 Grunt 的简单使用

1. Grunt 的简单介绍grunt 可以说是前端构建工具的鼻祖了，它的插件生态非常完善，用官方的话来说：grunt 的插件几乎可以自动化帮助你做任何你想做的事情。虽然 grunt 虽然强大，但是现在 grunt 基本已经退出历史舞台了。因为 grunt 的工作过程是基于临时文件实现的，所以它的构建速度相对较慢，例如你去使用 grunt 对 sass 文件的构建，我们一般先会对 sass 文件进行编译操作，再去添加一些私有属性的前缀，最后再去压缩代码。在这样的过程当中，grunt 的每一步都会有磁盘读

2021-03-14 23:01:06 506

原创 Eslint 简单使用

Eslint 简单使用前端规范化随着前端开发需求的日益膨胀，前端的规范化在一个开发团队中扮演着越来越重要的角色。那么我们为什么要有前端规范化呢？在我们日常实际的开发过程中，很多中型或者大型的软件开发都需要多人去协同开发，即使是在一个前端团队中，不同的开发人员也有不同的编码习惯和喜好。而这些不同的开发习惯必然会对项目进度造成一定的阻碍，会提高我们的项目维护成本，甚至在开发过程中就会对项目进度造成阻塞性的障碍，所以每个项目或者团队都需要有统一的标准。那么我们在开发的过程中，哪些内容需要进行规范化呢？个人

2021-03-14 22:51:58 406

原创前端模块化开发

模块化开发1. 模块化开发概述模块化开发目前是当下最重要的前端开发范式之一，模块化并不是一种技术，而是一种开发思想。模块化将我们的复杂的代码根据功能划分为不同的模块单独去维护，通过这种方式提升开发效率和降低维护成本。2. 模块化的演变过程早期的前端技术标准根本没有意识到前端应用能有今天这样的规模，所以很多设计上的遗留问题就导致今天去实现前端模块化会遇到很多问题。当然了，如今都被一些标准或者工具帮助我们解决了这些问题，但是它的演进过程是值得我们去思考的。stage1-文件划分最早期的前端模

2021-03-07 18:13:27 751 2

原创彻底搞清楚 Iterator（遍历器）接口

彻底搞清楚 Iterator（遍历器）接口1. 什么是Iterator(遍历器)我们都知道 JavaScript 中对数组有很多种遍历方式，但是如果我们想像数组那样去遍历其他数据，我们该怎么办呢？Iterator遍历器就为我们提供了这种机制。Iterator 是一个接口，它为 JavaScript 中的各种数据结构提供了一种规范。任何数据结构只要部署了 Iterator 接口，那么我们就可以使用 for…of 遍历这个数据结构在 JavaScript 中部署了 Iterator 接口的有Array

2021-02-24 20:53:57 214

原创函数式编程学习心得及教程

函数式编程前言如果你已经从事开发有一段时间了，肯定多少对’函数式编程’有一定的了解，很多人包括我自己在还没有深入了解函数式编程的时候，基本都会有一个误解，函数式编程就是用很多function函数去编程你的代码。最近正好我在学函数式编程，于是就想着写一篇文章去向一些像我一样的初学者去解释一下函数式编程。什么是函数式编程我们来看一下百度百科对函数式编程的定义：简单说，"函数式编程"是一种"编程范式"（programming paradigm），也就是如何编写程序的方法论。它属于"结构化编程"的一种

2021-02-22 22:09:00 519

原创浅拷贝和深拷贝

浅拷贝和深拷贝一、数据类型我们都知道JavaScript数据类型分为基本数据类型（String、Number、Boolean、Null、Undefined、Symbol，未来还会有BigInt）和引用数据类型（Object），当然Object还包括Date、function、Array、RegExp。基本数据类型和引用数据类型在存储方式上是有很大差别的。基本数据类型：变量名和值都存在栈内存中，是一对一的关系引用数据类型：变量名和一个指向值的地址存储在栈地址中，而值存储在堆内存中，是一对多的关系

2021-02-21 19:54:02 4976

原创实现一个完整的发布订阅模式

实现一个完整的发布订阅模式前言发布-订阅模式是我们经常会接触的到的设计模式，它定义一个对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript 开发中，我们一般用事件模型来替代传统的发布-订阅模式现实生活中的发布订阅模式毛小星是一个球鞋爱好者，他最近在逛淘宝的时候，看上了一双芝加哥配色的 AJ One 篮球鞋，但是问过客服美眉被告知，这个配色的鞋已经售罄了。好在客服美眉告诉毛小星，不久后耐克公司还会复刻一批芝加哥配色的球鞋，但是具体什么时候

2021-02-17 21:54:14 1726

weixin_50964668的博客