NotionNext BLOG https://zxs-1024.cn/ 这是一个由NotionNext生成的站点 Tue, 27 Feb 2024 08:55:52 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed zh-CN All rights reserved 2024, 张小手 <![CDATA[vue mixins 让组件显得不再臃肿]]> https://zxs-1024.cn/article/vue-mixins https://zxs-1024.cn/article/vue-mixins Fri, 02 Jul 2021 00:00:00 GMT

vue mixins 让组件显得不再臃肿

vue 提供了 mixins 这个 API，可以让我们将组件中的可复用功能抽取出来，放入 mixin 中，然后在组件中引入 mixin，可以让组件显得不再臃肿，提高了代码的可复用性。
如何理解 mixins 呢 ？我们可以将 mixins 理解成一个数组，数组中有单或多个 mixin，mixin 的本质就是一个 JS 对象，它可以有 data、created、methods 等等 vue 实例中拥有的所有属性，甚至可以在 mixins 中再次嵌套 mixins，It’s amazing !
举个简单的栗子:
mixins 与 Vue Instance 合并时，会将 created 等钩子函数合并成数组，mixins 的钩子优先调用，当 data、methods 对象键值冲突时，以组件优先。
PS: 如果对 mixins 的概念还不太清的小伙伴，可以去 vue 官方文档 看一下 vue mixins 的基本概念和用法。

mixins 实现

那 mixins 是如何实现的呢 ？当 vue 在实例化的时候，会调用 mergeOptions 函数进行 options 的合并，函数申明在 vue/src/core/util/options.js 文件。
为了保持代码简洁，已经将 mergeOptions 函数不重要的代码删除，剩余部分我们慢慢来看。
首先申明 extendsFrom 变量保存 child.extends，如果 extendsFrom 为真，递归调用 mergeOptions 进行属性拷贝，并且将 merge 结果保存到 parent 变量。
如果 child.mixins 为真，循环 mixins 数组，递归调用 mergeOptions 实现属性拷贝，仍旧将 merge 结果保存到 parent 变量。
接下来是关于 parent、child 的属性赋值：
申明 options 空对象，用来保存属性拷贝的结果，也作为递归调用 mergeOptions 的返回值。
这里首先会调用 for…in 对 parent 进行循环，在循环中不断调用 mergeField 函数。
接着调用 for…in 对 child 进行循环，这里有点不太一样，会调用 hasOwn 判断 parent 上是否有这个 key，如果没有再调用 mergeField 函数，这样避免了重复调用。
那么这个 mergeField 函数到底是用来做什么的呢？
mergeField 函数接收一个 key，首先会申明 strat 变量，如果 strats[key] 为真，就将 strats[key] 赋值给 strat。
strats 其实就是 Object.create(null)，Object.create 用来创建一个新对象，strats 默认是调用 Object.create(null) 生成的空对象。
顺便说一句，vue 也向外暴露了 Vue.config.optionMergeStrategies，可以实现自定义选项合并策略。
如果 strats[key] 为假，这里会用 || 做穿透赋值，将 defaultStrat 默认函数赋值给 strat。
defaultStrat 函数返回一个三元表达式，如果 childVal 为 undefined，返回 parentVal，否则返回 childVal，这里主要以 childVal 优先，这也是为什么有 component > mixins > extends 这样的优先级。
mergeField 函数最后会将调用 strat 的结果赋值给 options[key]。
mergeOptions 函数最后会 merge 所有 options、 mixins、 extends，并将 options 对象返回，然后再去实例化 vue。

钩子函数的合并

我们来看看钩子函数是怎么进行合并的。
循环 LIFECYCLE_HOOKS 数组，不断调用 mergeHook 函数，将返回值赋值给 strats[hook]。
LIFECYCLE_HOOKS 就是申明的 vue 所有的钩子函数字符串。
mergeHook 函数会返回 3 层嵌套的三元表达式。
第一层，如果 childVal 为真，返回第二层三元表达式，如果为假，返回 parentVal。
第二层，如果 parentVal 为真，返回 parentVal 和 childVal 合并后的数组，如果 parentVal 为假，返回第三层三元表达式。
第三层，如果 childVal 是数组，返回 childVal，否则将 childVal 包装成数组返回。

项目实践

使用 vue 的小伙伴们，当然也少不了在项目中使用 element-ui。比如使用 Table 表格的时候，免不了申明 tableData、total、pageSize 一些 Table 表格、Pagination 分页需要的参数。
我们可以将重复的 data、methods 写在一个 tableMixin 中。
当我们需要使用时直接引入即可：
我们在组件内会重新申明 searchData 方法。类似这种 methods 对象形式的 key，如果 key 相同，组件内的 key 会覆盖 tableMixin 中的 key。
当然我们也可以在 mixins 中嵌套 mixins，申明 axiosMixin:
引入 axiosMixin：
在 axios 中，我们可以预先处理 axios 的 success、error 的后续调用，是不是少写了很多代码。

extend

顺便讲一下 extend，与 mixins 相似，只能传入一个 options 对象，并且 mixins 的优先级比较高，会覆盖 extend 同名 key 值。
在 mergeOptions 函数中，会先对 extends 进行属性拷贝，然后再对 mixin 进行拷贝，在调用 mergeField 函数的时候会优先取 child 的 key。
虽然 extends 的同名 key 会被 mixins 的覆盖，但是 extends 是优先执行的。

总结

注意一下 vue 中 mixins 的优先级，component > mixins > extends。
我们暂且将 mixins 称作是组件模块化，灵活运用组件模块化，可以将组件内的重复代码提取出来，实现代码复用，也使我们的代码更加清晰，效率也大大提高。
当然，mixins 还有更加神奇的操作等你去探索。
]]> <![CDATA[vue nextTick 源码浅析]]> https://zxs-1024.cn/article/vue-next-tick https://zxs-1024.cn/article/vue-next-tick Fri, 02 Jul 2021 00:00:00 GMT

vue nextTick 源码浅析

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

$nextTick 函数的注册

在 renderMixin 函数中我们会为 Vue.prototype 添加 $nextTick 方法，在 core/instance/render.js 文件中：
在 $nextTick 方法中会返回 nextTick 函数的调用，并且在调用时传入了 fn 回调函数和 this，也就是 vue 实例。

nextTick 函数

nextTick 函数申明在 src/core/util/next-tick.js 文件：
nextTick 函数接收两个参数，cb 回调函数、ctx 上下文环境，在 $nextTick 中传入的是 vue 实例。
nextTick 函数首先会申明 _resolve 变量，如果当前环境支持 Promise，会将 resolve 赋值给 _resolve 变量。
每一次调用 nextTick 函数，都会往 callbacks 中 push 函数，在函数中会判断 cb 是否为真，如果为真也就是传入了回调函数，会尝试将调用 call 将 cb 的 this 指向传入的 ctx 上下文环境，如果报错，就调用 handleError 函数抛出异常。
如果 _resolve 为真，调用 _resolve 函数，并且将 ctx 传入。
我们接着往下看：
如果 !pending 为真，也就是当前并没有在进行 nextTick 更新，将 pending 赋值为 true，说明正在进行 nextTick 更新。这里会判断 useMacroTask 是否为真，这个 useMacroTask 是什么呢？
useMacroTask 是在 next-tick.js 开头申明的变量，默认为 false，这里作者给出了详细的注释。
在 Vue 2.4 之前都是使用的 microtasks，但是 microtasks 的优先级过高，在某些情况下可能会出现比事件冒泡更快的情况，但如果都使用 macrotasks 又可能会出现渲染的性能问题。所以在新版本中，会默认使用 microtasks，但在特殊情况下会使用 macrotasks，比如 v-on。
useMacroTask 默认为 false，这里会走 else 循环，优先调用 microTimerFunc 函数。
我们来看看 microTimerFunc 函数：
microTimerFunc 变量会在 next-tick.js 开头申明，默认为 undefined。
这里会判断调用 typeof 判断 Promise 的类型是否是 undefined，并且调用 isNative 判断 Promise 是否是原生的函数。
判断原型的话会判断函数 toString 后是否有 native code 字符串。
如果都为真，判断当前环境支持 Promise 函数，申明 p 变量保存 Promise.resolve()，p 就成了一个 立即 resolve 的 Promise 对象。
接着将 microTimerFunc 赋值成一个函数，在函数中会调用 then 方法，并将 flushCallbacks 函数传入，flushCallbacks 会在下一次 microtask 的时候执行。
如果 isIOS 为真，也就是当前设备是 IOS，为了兼容 UIWebViews 中出现的一些问题，回调被推到 microtask，但 microtask 没有刷新，我们可以添加空 setTimeout 来强制刷新 microtask。
如果当前环境不支持 Promise，采取降级处理，将 microTimerFunc 赋值成 macroTimerFunc，macroTimerFunc 会在 microTimerFunc 之前进行赋值。
首先会判断如果当前环境支持 setImmediate，采用 macroTimerFunc 处理 flushCallbacks 函数，如果当前环境支持 MessageChannel 采用 MessageChannel 处理 flushCallbacks 函数，如果都不支持采用 setTimeout 处理 flushCallbacks 函数，这样实现了优雅的降级处理。
在 macroTimerFunc 和 microTimerFunc 的回调函数中，都会调用 flushCallbacks 函数，我们来看一下具体实现：
flushCallbacks 函数首先会将 pending 置为 false，代表上一次的 nextTick 更新完毕。
这里会申明 copies 变量，采用 slice 赋值一份 callbacks 数组，然后将 callbacks 清空，这里采用了 slice 为了清空 callbacks 而不影响 copies 数组，callbacks.slice(0) 返回一个新的数组，是一个新的引用地址。
然后采用 for 循环，循环调用 copies 中的函数。

withMacroTask

在 next-tick.js 中，除了暴露了 nextTick 函数， 还暴露了 withMacroTask 函数：
withMacroTask 返回传入的 fn 的 _withTask 函数，这里用了传统赋值，如果 fn._withTask 为真，返回 fn._withTask，否则将 fn._withTask 赋值成一个函数，这个函数会将 useMacroTask 置为 true，使用 apply 将 this 指向 null，并用 res 变量保存返回，接着讲 useMacroTask 恢复成 false，最后返回 res。 我们知道当 useMacroTask 为 true 的时候会使用 macroTimerFunc 作为事件循环，调用 withMacroTask 函数传入的 fn 会插入到 microTask 任务队列。
withMacroTask 在 src/platforms/web/runtime/modules/events.js 中的 add 函数被调用:
add 函数主要用来添加事件监听。
而 add 函数在 updateDOMListeners 函数中调用 updateListeners 函数时作为参数传入。
updateListeners 会被 updateComponentListeners、updateDOMListeners 函数调用。
updateComponentListeners
updateDOMListeners
initEvents updateChildComponent
create update
———- componentVNodeHooks.prepatch
createPatchFunction
ㅤ
Vue.prototype.patch = patch
ㅤ
beforeMount lifecycleMixin {$destroy, $destroy}
向上查看调用链。

nextTick 调用

html
js
 
]]> <![CDATA[我的 2018]]> https://zxs-1024.cn/article/2018 https://zxs-1024.cn/article/2018 Mon, 31 Dec 2018 00:00:00 GMT

我的 2018

兜兜转转又是一年，2018 收获颇多，在这里稍微做一下总结。
2018 年初，本打算往杭州发展，年前就前往杭州面试，也拿了几份 offer，但是计划终究赶不上变化，年后还是留在了上海，入职了一家比较满意的公司，也开始沉淀一些东西。

回顾 2018

深入学习 vue、vuex、vue-router 源码

有些粗糙的过了一遍 vue 源码，也研究了 vuex、vue-router 的源码，对 vue 有了更加深入的了解。

vuex 源码阅读笔记

vuex 思维导图 原图
notion image
vuex 思维导图

阅读 vue-router 源码的一些注释

vue-router 思维导图
notion image
vue-router 思维导图 原图

关于 React 的学习

React todo list

使用了 todolist 作为练手项目，期间重构了多个版本，主要有 redux 、dva 、rematch 版本，熟悉 react 、 jsx 语法，熟悉 redux 、dva 、rematch，以及项目构建。
notion image
React todo list

bing-app

收集 Bing 每日精彩图片的网站，前端采用 React、后端采用 koa2 构建。
notion image
Bing Image Collect

其他的

📏 使用 ESLint 来管理你的 git commit 代码规范

逐渐认识到代码质量的重要性，开始使用 ESLint 来管理你的代码规范。
提交前强制校验，使用 husky，将约束命令放置在提交代码前检查。

📜 帮助你创建你的项目模板文件

一个 npm 包，用来帮助我建立项目模板文件。

Lodash 源码解析

阅读 Lodash 源码， Get 到很多新技能。

Learn Advanced Vue.js Features with the Creator of Vue.js, Evan You!

在 Frontend Masters 中有很大师级别的课程，这个是尤大大的课程，学习高级 Vue.js 功能。

2018 看过的书

2018 文章收集

你好，2019 ！

2019 计划：
  • 要增加个人技术输出。
  • 向全栈触发，学习关于服务器端的知识。
  • 深入学习 JS 底层，扎实基础。
  • 增强英语阅读能力。

2019 想要了解的

  • RxJS 使用 Observables 的响应式编程

2019 要看的书

  • 期待 深入浅出 Node.js 第二版
]]> <![CDATA[Vuex 是什么？]]> https://zxs-1024.cn/article/vuex-init https://zxs-1024.cn/article/vuex-init Fri, 02 Jul 2021 00:00:00 GMT

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
阅读 vuex 源码的思维导图:
notion image
阅读 vuex 源码的思维导图
vuex 的文档 对辅助看源码有不小的帮助，不妨在看源码之前仔细地撸一遍文档。

带着问题去看源码

  • global event bus 有何缺陷
  • $store 如何注入到所有子组件
  • mapState 实现
  • mapGetter 如何映射
  • Mutation 同步 && Action 异步
  • dispatch 方法实现
  • module 分割实现 && 局部状态 namespaced
  • 如何调用 vue-devtools
  • 内置 logger 插件实现
  • hotUpdate
  • 时间穿梭功能实现

目录

入口文件

vuex 的入口文件在 src/index.js
引入了 Store 、install 和一些辅助工具函数，将引入的变量组装成一个对象向外暴露。当我们在项目中引入 import Vuex from 'vuex' 的之后， Vuex 就是这个组装后默认导出的对象了。
当然我们也可以通过解构的方式。

install 方法

来看一下 install 方法，在 src/store.js 。
install 函数首先判断变量 Vue (store.js 顶部申明的变量) 是否与传入 _Vue 全等，如果全等并且在非生产环境，抛出异常。
随后将传入的 _Vue 赋值给 Vue，这里主要是为了避免重复安装。
然后调用引入的 applyMixin 方法，并将 Vue 作为参数传入。
applyMixin 在 src/mixin.js 作为默认方法导出：
取出传入 Vue 的 静态属性 version 做不同处理。
2.0 采用 mixin 将 vuexInit 合并到 beforeCreate 生命周期钩子。
1.0 重写 _init 方法 将 vuexInit 合并到 _init 方法中。
在 vuexInit 方法中，首先判断如果有 options.store 说明是 root 节点，并且判断 store 是 function 就执行将函数返回值赋值给 this.$store ，否则 options.store 直接赋值。 然后判断有父节点，并且父节点有 $store, 就将父节点的 $store 赋值给 this.$store ，这样就保证只有一个全局的 $store 变量。
]]> <![CDATA[ webpack HMR]]> https://zxs-1024.cn/article/webpack-hmr https://zxs-1024.cn/article/webpack-hmr Mon, 06 Sep 2021 00:00:00 GMT
和组内同学做过的一个关于 webpack 热更新实现的分享。
具体 PPT 可到 slides 观看
Webpack HMR
A presentation created with Slides.
Webpack HMR
https://slides.com/hao-zhang/deck-57dcb4/fullscreen
Webpack HMR

什么是 HMR ?

  • hot module replacement(更换)
  • 无需刷新浏览器
  • 运行时更新模块
  • 保留更新前的应用程序状态

热更新的应用

初始化

  • 服务是怎么启动？
  • bundle.js 注入了很多代码
  • websocket 如何建立连接？
  • 接受四个消息做了什么？

HMR 的实现

官方文档

参考文章

]]> <![CDATA[小程序拾遗]]> https://zxs-1024.cn/article/56ea452f-468f-41e7-9a1a-544e8c7ef420 https://zxs-1024.cn/article/56ea452f-468f-41e7-9a1a-544e8c7ef420 Fri, 02 Jul 2021 00:00:00 GMT

跳转微信公众号

登陆微信公众平台，F12 打开浏览器控制台 console 输入
https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=上方步骤输出的内容#wechat_redirect
该链接可直接在微信内进入公众号关注页（非公众号客户端不支持）。

动态加载网络字体

动态插入

React 18 之前的版本

React 18

https://reactjs.org/link/switch-to-createroot
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

海报绘制

]]>