SeaChan

核心逻辑12345678910111213141516171819202122232425262728293031323334353637/** * createStore(reducer, preloadedState, enhancer) * getState、dispatch、subscribe */function createStore(reducer, preloadedState) { // store 对象存储的状态 let currentState = preloadedState; // 存放订阅者函数 let currentListeners = [] // 获取状态 function getState() { return currentState } // 触发 action function dispatch(action) { currentState = reducer(currentState, action) / ...

Redux 介绍JavaScript 状态容器，提供可预测化的状态管理； 基本概念StoreStore 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。 Redux 提供createStore这个函数，用来生成 Store。 StateStore对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。 当前时刻的 State，可以通过store.getState()拿到。 Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。 ActionState 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。 Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个规范可以参考。 可 ...

学习 vue 源码前，需对 虚拟Dom 有一定的了解，本文将通过 snabbdom 库，对 虚拟Dom 进行学习，原因是 Vue 的 虚拟Dom 实现就是基于 snabbdom 改造的。 什么是虚拟DomVirtual Dom（虚拟Dom），是由普通的 JS对象 来描述 Dom 对象，个人理解就是 真实Dom 抽象成 JS对象 的最小化属性集，后续可根据它的相关属性生成一个对应的 真实Dom。由于 真实Dom 的属性繁多，而实际使用时大多是不需要的，所以 虚拟Dom 的从基础就决定了它有所占内存较小的优势。 snabbdom 等库对 虚拟Dom 的实现以及相关方法（重点是 diff 算法）能将 虚拟Dom 和 真实Dom 进行映射，并将更改后的状态同步到 真实Dom，避免了开发者手动操作 Dom。虚拟Dom 中存在多次操作，只会最终和 真实Dom 做对比，把修改的节点更新到 真实Dom，节省了操作次数，提高性能。 虚拟Dom的作用 维护视图和状态的关系 复杂视图情况下提升渲染性能 最大的好处是跨平台 浏览器平台渲染Dom服务端渲染SSR（Nuxt.js/Next.js）原生应 ...

在上一篇中讲了 Webpack 的基础学习使用，但实际开发过程中我们需要一个更灵活的开发环境，或某些问题可以通过 Webpack 来解决，本文将列举一些常见的问题或示例去介绍怎样增强 Webpack 的开发体验。 自动编译使用 webpack-cli 的 watch 模式，该模式能监听文件变化，完成自动重新打包，使用比较简单，只需要在启动时添加 watch 参数即可，yarn webpack --watch，此时会启动监听模式，并且不会立即退出命令窗口，会等待文件变化，并再次完成打包工作，直到我们手动结束该模式； 自动刷新浏览器我们在开发时已经完成了自动编译，如果能自动刷新浏览器，我们的工作将更加顺滑，不用每次修改代码后手动刷新浏览器，webpack dev server 集成了自动编译和自动刷新浏览器的功能，使用它可以方便解决自动编译和自定刷新的问题，yarn add webpack-dev-server --dev；安装完成执行 yarn webpack serve（webpack4+ 使用 yarn webpack-dev-server，也可定义到 npm scripts 中 ...

随着 ES6 新特性模块化在语言层面的实现，模块化的一些问题需要被解决： ES Modules 存在环境兼容问题； 模块文件过多，网络请求频繁； 所有的前端资源都需要模块化； 所以为了解决以上问题，就需要有一个能编译、打包的工具，处理相关兼容性，能将多文件打包到一起，减少文件请求，还要支持其他一些静态资源处理，是针对整个前端项目来讲的工具。所以市面上应运而生了几个主流的打包工具，Webpack，Rollup，Parcel，本文重点学习记录最受欢迎的 Webpack。 Webpack 快速上手初始化项目 package.json，yarn init --yes； 安装 **Webpack **以及它的 **cli **模块，yarn add webpack webpack-cli --dev； 执行 yarn webpack 后，会自动根据 src 下的 index.js 作为入口文件进行打包，并生成打包文件夹dist，其中打包文件为 main.js； 也可以将命令定义为 npm scripts 命令中，减少命令输入操作，执行 yarn build 即可； 以上是 web ...

之前咱们通过实际案例深入 gulp 的学习使用，但是 gulpfile.js 的复用只能当做一个模板在需要时拷贝到项目中，或者作为代码段统一在相应的项目中使用，但是如果涉及到相应gulp插件升级或者有问题需要修复时，所以的项目都要统一处理一遍，不利于后限整体维护，接下来就需要我们提取一个可复用的自动化构建工作流。 gulpfile + gulp = 自动化工作流； 我们需要去创建一个模块，然后将它发布到 npm，最后在我们的项目中去使用这个模块即可； 我这在 git 上创建了一空项目用于这次学习，最后将会成为打包模块去使用，clone 到本地初始化项目目录大体如下； 提取 gulpfile 到模块先将 gulpfile.js 文件的内容全部移入模块的 index.js 中； 将原项目（cs-gulp-demo）开发依赖移入模块（cs-pages）依赖，因为最后我们的模块是需要工作的，工作的时候是需要 dependencies 下的依赖，所以这里不是拷贝到 devDependencies ，拷贝完成后执行 yarn 安装依赖； 1234567891011121314151617 ...

上一篇，我们学习了 Gulp 的一些基本原理和操作，本文通过小案例，去学习构建一个网页应用的自动化构建工作流。 首先准备一个用于构建网页应用的项目，项目目录大致如下，大家可以使用自己的； 接下来安装gulp到开发依赖，在根目录下新建 gulpfile.js 文件； 样式编译任务样式文件读取拷贝到目标文件夹，src 第二个参数，base 之后的路径会按照原路径保存在 dist 下，否则所有文件都会直接放在 dist下； 12345678910const {src, dest} = require('gulp')const style = () => { return src('src/assets/styles/*.scss', {base: 'src'}) // base之后的路径会按照原路径(assets/styles/*)保存在dist下，否则所有文件都在dist下 .pipe(dest('dist'))}mod ...

Vue3 响应式原理回顾 Proxy 对象实现属性监听 多层属性嵌套时，在访问属性过程中处理下一级属性 默认监听动态添加的属性 默认监听属性的删除操作 默认监听数组索引和 length 属性 可以作为单独的模块使用 Proxy 对象Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。 严格模式set 和 deleteProperty 中需要返回布尔类型的值，在严格模式下，如果返回 false 的话会出现 Type Error 的异常； 1234567891011121314151617181920212223const target = { foo: 'foo', bar: 'bar'}// Reflect.getPrototypeOf()// Object.getPrototypeOf()const proxy = new Proxy(target, { get (target, key, receiver) { ...

Composition APIComposition APIComposition API 是 vue3 中新增的 API，使用传统的option配置方法写组件的时候问题，随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，同时代码可复用性不高，而composition-api就是为了解决这个问题而生的。 Composition API 提供了几个函数： reactive 相当于当前的 Vue.observable () API，经过reactive处理后的函数能变成响应式的数据，类似于option api里面的data属性的值 watchEffect watch 函数的简化版本，也用来监视数据的变化 接收一个函数作为参数，监听函数内响应式数据的变化 computed 计算属性 API ref 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value，可以把基本类型的数据包装成响应式对象 toRefs 把对象的每个属性都转化为响应式 ...

Vue.js 3.0 源码组织方式1.源码采用 TypeScript 重写，语言类型化提升代码的可维护性； 2.使用 Monorepo 管理项目结构，把不同功能的代码放在不同的 package 中管理，功能模块划分明确，依赖关系明确，功能模块也可单独使用； Vue.js 3.0 不同构建版本cjs完整版的 vue ，包含运行时和编译器； vue.cjs.js开发版本，代码没有被压缩； vue.cjs.prod.js生产版本，代码被压缩； global以下都可以在浏览器中使用 script 标签进行导入，导入后会有一个全局的 Vue 对象； vue.global.js完整版的 vue，包含编译器和运行时，开发版本，代码没有压缩； vue.global.prod.js完整版的 vue，包含编译器和运行时，生产版本，代码被压缩； vue.runtime.global.js只包含运行时的构建版本，开发版本，代码没有压缩； vue.runtime.global.prod.js只包含运行时的构建版本，生产版本，代码被压缩； browserESModule，浏览器原生模块化方式，在浏览器中使用 s ...