前端框架设计时需要考虑的点

#前端 #前端框架  #vue

对于开发一个前端框架来说，有哪些核心要素呢？ 如下：

目录

1、开发体验

  • 报错警告提示，是否能够让开发者立马定位到问题
    • 比如 如何提示 App.mount('#app') 中 #app 节点 不存在
  • 开发调试是否直观？
    • 比如const obj = ref() ，每次都是打印 obj的值都需要 obj.value ?  
      • 框架层面肯定需要提供好的 log 方式。
    • DevTools 提供 custom formmaters ，框架层面会提供 initCustomFormatter 的定义

2、控制框架代码体积

如何做到开发环境下更多提示，而不增加代码体积呢？

  • 需要使用 roolup 插件 或者 webpack 插件 的 __DEV__常量  来做到这一点，生成环境下形成  dead code , 在使用打包工具 tree-shaking 的能力，进行移除

[!info] dead code 即 永远不会执行的代码，如 if(true) 或者 import 后没使用的模块等

3、良好的 tree-shaking 机制

  • 上面说的dead code 很容易被 tree-shaking掉，但是副作用 呢，因为 proxy 能力只读每个属性也可能引起副作用。
    • 答案是：/*#__PURE__*/  
      • rollup 和 webpack 、terser 都可以识别它 ，它告诉打包工具，放心 tree-shaking 掉吧

4、多种环境下的构建产物不一样

比如：

  • rollup 下，设置 format 为 iife 给 script 标签直接使用
  • rollup 下，设置 format 为 esm 给 <script type="module"> 直接使用
  • rollup 下，设置 format 为 cjs 给 nodejs 环境使用 ，为了 SSR

另外，如何打包给 rollup 或者 webpack 工具使用呢？

  • 答案是 esm , 但又如何 与   <script type="module"> 区别呢？
  • 看 package.json  , 如下 代码 和 图片
{
	"main":"index.js",
	"module":"dist/vue.runtime.esm-bundler.js",
}

5、支持特性开关

比如 vue3 的 组合式 API 和 选项式 API， 如果用户确定只需要使用 组合式 API ，那么可以通过设置 __VUE_OPTIONS_API__ 预定于常量来开启或者关闭.

6、错误处理机制

比如一个工具库提供一个 fetch 方法 ，但使用的方式必须传入回调 fetch(callback)，怎么容错呢？三种

  1. 用户自己 try catch，但是如果有很多方法，需要每个都 try catch 吗
  2. 用户自己实现一个 handleError 方法
  3. 工具库提一个 utils.registerErrorHandler 静态方法, 用户使用它注册错误处理程序。
    • 第 3 种，就是 Vue 的处理方式，app.config.errorHandler  , 为用户提供更好的框架层面的健壮性。

7、Typescript 支持

完善 Typescript 支持，可能比框架本身还要花精力和时间

参考

  • 《Vue.js 设计与实现》