《Vue.js设计与实现》学习笔记_第二章 框架吗设计的核心要素

目录

1.提升用户的开发体验

2. 控制框架代码的体积

3. 框架要做到良好的Tree-Shaking

4. 框架应该输出怎样的构建产物

5. 特性开关

6. 错误处理

7. 良好的TypeScript类型支持

1.提升用户的开发体验

提供友好的警告信息有助于开发者快速定位问题。

提供必要的警告信息：warn函数，最终就是调用了console.warn函数。

其他方面：可以通过在浏览器编写自定义的formatter，从而自定义输出形式。以 Chrome为例，我们可以打开DevTools 的设置，然后勾选 “Console” 一> “Enable custom formatters"选项，如图1所示。

图1 勾选 “Console” 一> “Enable custom formatters"选项

结果对比：当我们在控制台打印一个ref数据时，结果如图2所示。

const count = ref(0)
console. log (count)

图2 控制台输出结果

当通过勾选 “Console” 一> “Enable custom formatters"选项后，输出结果会变的非常直观，如图3所示。

图3 直观的输出内容

2. 控制框架代码的体积

Tree-Shaking 机制，配合构建工具预定义常量的能力。例如预定义_DEV_常量，从而实现仅在开发环境中打印警告信息，而生产环境中则不包含这些用于提升开发体验的代码，从而实现线上代码体积的可控性。

if (_DEV_ && !res)
    warn(
        'Failed to mount app: mount target selector "${container)" returned null.'s
    )
}

原理是：当Vue.js构建用于开发环境的资源时，会把_DEV_常量设置为 true，而当用于构建生产环境的资源时，会把_DEV_常量设置为false（实际上是通过rollup.js的插件配置来预定义的）。这样就做到了在开发环境中为用户提供友好的警告信息的同时，不会增加生产环境代码的体积。

3. 框架要做到良好的Tree-Shaking

Tree-Shaking是一种排除 dead code 的机制，框架中会内建多种能力，例如 Vue.js 内建的组件等。对于用户可能用不到的能力，我们可以利用Tree-Shaking 机制使最终打包的代码体积最小化。另外，Tree-Shaking 本身基于ESM，并且 JavaScript 是一门动态语言，通过纯静态分析的手段进行 Tree-Shaking 难度较大，因此大部分工具能够识别/*#_PURE_*/注释，在编写框架代码时，我们可以利用/*#_PURE_*/ 来辅助构建工具进行 Tree-Shaking。

import ｛foo｝ from'./utils'
/*#__PURE_*/ foo()

4. 框架应该输出怎样的构建产物

为了让用户能够通过<script>标签直接引用并使用，我们需要输出 IIFE 格式的资源，即立即调用的函数表达式。
为了让用户能够通过<script type="moduLe">引用并使用，我们需要输出ESM 格式的资源。这里需要注意的是，ESM 格式的资源有两种：用于浏览器的 esm-browser.js 和用于打包工具的esm-bundlerjs。它们的区别在于对预定义常量_DEV_的处理，前者直接将_DEV_常量替换为字面量 true 或 false，后者则将_DEV_常量替换为 process.env.NODE_ENV ！== 'production'语句。

5. 特性开关

实现原理与_DEV_常量一致，本质上是利用rollup.js的预定义常量插件来实现的。对于用户关闭的特性，可以利用 Tre-Shaking 机制让其不包含在最终的资源中。该机制为框架设计带来了灵活性，可以通过特性开关任意为框架添加新的特性，而不用担心资源体积变大。

如果明确使用组合式AP1，而不会使用选项对象式 API，这时用户可以通过特性开关关闭对应的特性，这样在打包的时候，用于实现关闭功能的代码将会被 Tree-Shaking 机制排除。

//Vue.js2 选项式API
export default {
    data(){},//data 选项
    computed:{},//computed 选项
    // 其他选项
}
//Vue.js3中，推荐使用组合式API
export default {
    setup(){
        const count = ref(0)
        const doubleCount = computed(()=> count.value*2) //=Vue.js2中的computed 选项
    ｝
｝

6. 错误处理

框架的错误处理做得好坏直接决定了用户应用程序的健壮性，同时还决定了用户开发应用时处理错误的心智负担。框架需要为用户提供统一的错误处理接口，这样用户可以通过注册自定义的错误处理函数来处理全部的框架异常。

import App from 'App. vue'
const app = createApp(App)
app.Config.errorHandler =()=>｛
    // 错误处理程序
}

7. 良好的TypeScript类型支持

Typescript 是由微软开源的编程语言，简称TS，能够为 JavaScript 提供类型支持。例如：获得函数返回值的数据类型。