前端框架设计的核心要素

这个系列的文章是从Vue.JS原理与设计这本书读后总结关键点,挺推荐看这本书.

前言

设计前端框架必须从下面几点出发

• 提升用户的的开发体验
• 控制框架代码的体积
• 框架要做到良好的Tree-Shaking
• 框架应该输出怎么样的产物
• 特性开关
• 错误处理
• 良好的Typescript类型支持

以上七点我们就挑比较重要的点来看

减少代码体积

简单举个例子: 在Vue源码中像一些重复的代码,警告

if(__DEV__ && res) {
	warn(`Fail ....`)
}

这里的__DEV__ 一般是rollupjs预设的, 在开发环境下为__DEV__为true, 在生产环境下为false, 这样, 这样算代码复用了减少代码体积.

这里提一嘴在工作中一般是用三个阶段: test,uat,prod, 分别代表: 测试, 提测, 生产 . 一般到了leader你才有后面两个权限.

Tree-Shaking

它是一种代码清除机制, 既然是前端框架, 它必须借助浏览器的ESM(ES Moudle)能力.

那么浏览器怎么清除代码的呢?

那就涉及到第二重点:副作用. 不产生副作用的函数就清除.下面看段代码

import {foo} './utils'
foo() // 顶级调用
fuction bar() {
	foo() // 函数内调用
}

上面可以看到顶级调用可能产生副作用,而函数内调用只要bar函数不调用就不会产生调用, 所以在Vue3源码中,我们告诉wenpack或者rollup.js哪些要顶级调用会产生副作用,哪些不会.就知道它怎么清除的.
一般注释:

exprot const isHTMLTag = /*#__PURE*/ makeMap(HTML_TAGS)

用isHTMLTag属性就不会产生副作用,可以放心清除

良好的TypeScript类型支持

我们常见有个误区TS编写框架就能友好, 其实要让一个框架的TS类型引导友好甚至开发一个框架的功能用的时间还更多.

最后想说下, 文章可能写的一般,作者读书所记算笔记. 如果有兴趣一起交流技术的话加入qq群一起讨论讨论: 748541687