Vue.js设计与实现阅读2

Vue.js设计与实现阅读-2

    • 1、前言
    • 2、框架设计的核心要素
        • 2、1 提升用户体验
        • 2、2 控制代码体积
        • 2、3 Tree-Shaking
        • 2、4 特性开关
        • 2、5 错误处理

1、前言

上一篇我们了解到了

  • 命令式和声明式的区别，前者关注过程，后者关注结果
  • 了解了虚拟dom存在的意义，使找出差异这个过程消耗的性能最小化
  • 学习了进行时、编译时、编译时+进行时的特点，初步知道了vue3是采用编译时+进行时的框架

2、框架设计的核心要素

2、1 提升用户体验
好的用户开发体验，是衡量框架是否优秀的指标之一。

提供友好的警告信息

在这里插入图片描述
当我们创建一个Vue.js应用，并把他挂载在一个不存在的dom节点，就会发现控制台有 warning 信息。
在这里插入图片描述
从警告信息中，能够快速知道失败原因，我们提供的选择器没有找到对应的 DOM 元素。如果Vue 内部不做处理，可能得到的是 Uncaught TypeError: Cannot read property ‘xxx’ of
null 就不能很快定位到问题。
那 Vue 中是如何实现的，可以看 Vue 源码中有 warn 函数的调用

看代码可以看到，在创建Vue应用的时候，app.mount中调用了一个 normalizeContainer 函数，对于传入的参数进行处理，确保是一个有效的 DOM 元素。
在这里插入图片描述
在 normalizeContainer 函数中，可以看到图中圈出的 if 判断，当 处于开发者模式并且 通过 document.querySelector 方法没有找到匹配的 DOM 元素时，会输出警告信息。
在这里插入图片描述

再往里面看 warn 函数，发现最终都是调用了 console.warn 函数，进行输出警告在这里插入图片描述

2、2 控制代码体积
框架的大小也是衡量框架的标准。同样情况下，使用的代码越少，体积就越小，浏览器加载资源的时间越少。
但是 Vue 中有大量的提示信息，越完善的提示信息就意味着越多的代码。
那 Vue3 中是如何处理的

看代码 会发现 每一个调用 warn 函数的地方 都会配合 __DEV __ 的常量检查
在这里插入图片描述
只有当 __DEV __ 为 true 的 前提下，才有可能会打印警告信息。这里的 DEV 常量就是达到目的的关键。

Vue.js 在输出资源的时候，会输出两个版本，开发环境和生产环境。当 Vue.js 构建用于开发环境的时候，会把 __DEV __ 设置为 true ，当处于生产环境的时候会设置为 false。那么那段警告代码就永远不会执行。
就能实现在开发环境为用户提供友好的警告信息，在生产环境中却不会增加代码体积。

2、3 Tree-Shaking

上面说到通过设置预定义常量 __DEV __ ，能够在生产环境中不包含用于打印警告信息的代码。但是这还不够，比如Vue内有很多组件，比如< transition > 组件，我们可能项目中都没用到这个组件，那他应该不需要包含在我们项目最终的构建资源中。Vue是如何实现的呢？

先揭晓答案吧，是通过 Tree-Shaking 实现的。 Tree-Shaking 用来消除那些永远不会被执行的代码（排除 dead code）。rollup.js和webpack 都支持 Tree-Shaking 。来看下 webpack 中， Tree-Shaking 如何工作。参考文档Tree-Shaking

创建一个 webpack 项目， 目录结构如下：
在这里插入图片描述
配置 webpack.config.js 如下

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  optimization: {
   usedExports: true,
 },
};

其中在 math 中导出了两个方法：

export function square(x) {
    return x * x;
}

export function cube(x) {
    return x * x * x;
}

index.js 中调用 了 cube 方法

import { cube } from './math.js';

function component() {
    const element = document.createElement('pre');
    element.innerHTML = [
        '你好 webpack！',
        '5 的立方等于 ' + cube(5)
      ].join('\n\n');

    return element;
}

document.body.appendChild(component());

注意这里我们并没有导出 square 函数，按理说，最终的编译打包产物中应该是没有 square 函数的相关内容的。我们继续往下查看结果

使用 npm run build 查看 bundle.js中打包编译后的结果。
在这里插入图片描述

/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */  cube: () => (/* binding */ cube)\n/* harmony export */ });\n/* unused harmony export square */\nfunction square(x) {\n    return x * x;\n  }\n  \n  function cube(x) {\n    return x * x * x;\n  }\n\n//# sourceURL=webpack://webpack-demo/./src/math.js?");

/***/ })

/******/ 	});

看上方的 unused harmony export square 注释。仔细观察下面的代码会发现尽管没有引用 square，但它仍然被包含在 bundle 中。
在纯 ES 模块中，很容易识别出哪些文件有副作用，但是我们的项目没有办法达到这种纯度，因此我们需要提示 webpack 编译器哪些代码是纯粹的。

我们可以通过 /#PURE/ 注释来帮助 webpack，告诉他某个函数调用无副作用，她会被标记为 dead code，不会被执行且会被清除掉。
我们尝试在 square 函数前面加上这样一个标记，然后再来看 bundle.js 中的输出，可以看到已经没有 square函数的引入了。

(()=>{"use strict";document.body.appendChild(function(){const n=document.createElement("pre");return n.innerHTML=["你好 webpack！","5 的立方等于 "+(5,125)].join("\n\n"),n}())})();

基于以上 我们可以看到，在编写框架的时候可以合理的使用 /#PURE/ 注释。查看 Vue3 的源码，可以发现大量的 /#PURE/ 使用。
在这里插入图片描述

2、4 特性开关

设计框架的时候，会给用户提供多种功能，例如提供 A、B、C三个特性给用户，同时提供了a、b、c三个对应的开关，用户可以通过设置 a、b、c 为true 或者 false，代表开启或者关闭特性。
对于设置关闭的特性，可以利用 Tree-Shaking 机制让其不包含在最终资源中，带来了极大灵活性。

如何实现特性开关。其实类似于上面的 DEV 常量一样，本质上是利用 rollup.js 来预定义常量插件来实现。
比如 VUE_OPTIONS_API

      __FEATURE_OPTIONS_API__: isBundlerESMBuild
        ? `__VUE_OPTIONS_API__`
        : `true`,

其中 VUE_OPTIONS_API 是一个特性开关，用户可以通过设置 VUE_OPTIONS_API 预定义常量的值来控制是否要包含这段代码,这个标志是用来对 Vue2 做适配.
比如 Vue2中的 template、data 等选项其实都属于 Options API，但在 Vue3 中，这种 Options API 写得相对来说就比较少了，
现在一般在 Vue3 中编写 Composition API，默认情况下，这个 VUE_OPTIONS_API 标志默认值是 true，这就意味着默认情况下 Vue3 项目中会包含支持 Options API 的这部分代码。
那么，如果在项目中编写的都是 Composition API 代码，其实就不再需要这部分解析 Options API 的代码了，那么可以通过 设置 VUE_OPTIONS_API 为true，来剔除掉一些无用大代码，减少代码体积。

2、5 错误处理

错误处理是框架开发的重要环节。
假设我们提供了一个方法，

export default {
	foo(fn) {
		fn && fn()
	}
}

用户侧使用

import utils from 'utils.js'
utils.foo(() => {
	...
})

如果函数执行出错，有两个方法，1用户自己执行 try…catch处理

import utils from 'utils.js'
utils.foo(() => {
	try {
		//...
	} catch(e) {
		//...
	}
})

这样的话，用户每使用一个函数，都需要加一个错误处理程序。很烦。
第二个就是我们内部统一处理，封装一个错误处理函数， callWithErrorHandling。

export default {
	foo(fn) {
		callWithErrorHandling(fn)
	},
	bar(fn) {
		callWithErrorHandling(fn)
	}
}
function callWithErrorHandling(fn) {
	try {
		fn && fn()
	} catch(e) {
		console.log(e)
	}
}

这样代码看起来简洁，再升级下可以为用户提供统一的错误处理接口。

let handleError = null
export default {
	foo(fn) {
		callWithErrorHandling(fn)
	},
	// 暴露给用户，用户可以调用该函数注册统一的处理函数
	registerErrorHandler(fn) {
		handleError = fn
	}
}
function callWithErrorHandling(fn) {
	try {
		fn && fn()
	} catch(e) {
	// 将错误传递给用户的错误处理程序
		handleError(e)
	}
}

用户侧

import utils from 'utils.js' 02 // 注册错误处理程序
utils.registerErrorHandler((e) => {
	// 做统一的处理，可以选择忽略，可以上报。
   console.log(e)
 })
 utils.foo(() => {/*...*/})
 utils.bar(() => {/*...*/})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/303836.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

AI ppt生成器 Tome

AI ppt生成器 Tome

介绍 一款 AI 驱动的 PPT/幻灯片内容辅助生成工具。只需要输入一个标题或者一段特定的描述&#xff0c;AI 便会自动生成一套包括标题、大纲、内容、配图的完整 PPT。 Tome平台只需要用户输入一句话&#xff0c;就可以自动生成完整的PPT&#xff0c;包括文字和图片。功能非常强…
阅读更多...
1688商品详情数据API接口（item_get-获得1688商品详情）搜索商品列表接口

1688商品详情数据API接口（item_get-获得1688商品详情）搜索商品列表接口

1688是一个大型的B2B&#xff08;Business-to-Business&#xff09;批发平台&#xff0c;提供各种商品和服务的采购。如果你想要通过API接口从1688获取商品详情&#xff0c;通常你需要查看1688的开发者文档或联系他们的API支持团队了解具体的API接口信息和调用方法。 一般来说…
阅读更多...
基于jsp的在线求职招聘信息系统 设计与实现

基于jsp的在线求职招聘信息系统 设计与实现

当前企业求职招聘的方式更多是通过传统的线下招聘会或职业介绍所来实现的&#xff0c;其不但受众具有很大的局限性&#xff0c;而且往往不可能在短时间内招聘的需要的人才。而互联网的普及为企业求职招聘的方式带来了翻天覆地的改变。通过互联网将招聘信息进行发布可以在短时间…
阅读更多...
详解Oracle数据库的启动

详解Oracle数据库的启动

Oracle数据库的启动&#xff0c;其概念可参考Overview of Instance and Database Startup。 其过程可参见下图&#xff1a; 当数据库从关闭状态进入打开数据库状态时&#xff0c;它会经历以下阶段。 阶段Mount状态描述1实例在没有挂载数据库的情况下启动实例已启动&#xff…
阅读更多...
锂电池低温充电效率低、容量低的原因

锂电池低温充电效率低、容量低的原因

前言&#xff1a;锂离子电池在充电时&#xff0c;Li从正极脱嵌并嵌入负极&#xff1b;但是当一些异常情况&#xff1a;如负极嵌锂空间不足、Li嵌入负极阻力太大、Li过快的从正极脱嵌但无法等量的嵌入负极等异常发生时&#xff0c;无法嵌入负极的Li只能在负极表面得电子&#xf…
阅读更多...
仿宋-GB2312字体

仿宋-GB2312字体

一、下载仿宋_GB2312.zip压缩包并解压缩 二、双击打开字体文件&#xff0c;点击左上角安装按钮 三、安装完成 安装完成后&#xff0c;重新打开Word正常情况下字体就有了。如果此时在Word文档内还没出现这个字体的话&#xff0c;大家可以重启电脑再查看一下
阅读更多...
Hyperledger Fabric 架构概览

Hyperledger Fabric 架构概览

fabric 版本 v2.4.1 超级账本 Fabric 自诞生以来已经发布了两个主要版本&#xff1a;1.0 系列版本&#xff08;2017 年 7 月&#xff09;和 2.0 系列版本&#xff08;2020 年 1 月&#xff09;。2016 年 9 月&#xff0c;Fabric 发布了 v0.6.0 预览版本&#xff0c;通过这一版本…
阅读更多...
【uniapp】调用阿里云OCR图片识别文字：

【uniapp】调用阿里云OCR图片识别文字：

文章目录 一、效果&#xff1a;二、实现&#xff1a; 一、效果&#xff1a; 二、实现&#xff1a; 【阿里官方】高精版OCR文字识别【最新版】-云市场-阿里云 <template><view class"container"><!-- 选择图片 --><button click"imageO…
阅读更多...
JQuery异步加载表格选择记录

JQuery异步加载表格选择记录

JQuery异步加载表格选择记录 JQuery操作表格 首先在页面中定义一个表格对象 <table id"insts" class"table"><thead><tr><th>列1</th><th>列2</th><th>例3</th><th></th></tr>…
阅读更多...
Linux文件系统与日志分析

Linux文件系统与日志分析

一、inode和block概述 文件数据包括元信息与实际数据 文件存储在硬盘上&#xff0c;硬盘最小存储单位是“扇区”&#xff0c;每个扇区存储512字节 元信息&#xff1a;每个文件的属性信息&#xff0c;比如&#xff1a;文件的大小&#xff0c;时间&#xff0c;类型&#xff0c…
阅读更多...
Vue使用printJS导出网页为pdf、printJS导出pdf

Vue使用printJS导出网页为pdf、printJS导出pdf

先放几个参考链接 感谢&#xff01; Vue使用PrintJS实现页面打印功能_vue print.js 设置打印pdf的大小-CSDN博客 前台导出pdf经验汇总 &#xff08;html2canvas.js和浏览器自带的打印功能-print.js&#xff09;以及后台一些导出pdf的方法_iqc后台管理系统怎么做到导出pdf-CSD…
阅读更多...
java导出word套打

java导出word套打

这篇文档手把手教你完成导出word套打&#xff0c;有这个demo&#xff0c;其他word套打导出都通用。 1、主要依赖 <!--hutool--><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.3.0</ve…
阅读更多...
ES-极客学习第二部分ES 入门

ES-极客学习第二部分ES 入门

基本概念 索引、文档、节点、分片和API json 文档 文档的元数据 需要通过Kibana导入Sample Data的电商数据。具体参考“2.2节-Kibana的安装与界面快速浏览” 索引 kibana 管理ES索引 在系统中找到kibana配置文件&#xff08;我这里是etc/kibana/kibana.yml&#xff09; vim /…
阅读更多...
YOLOv8改进 | 损失函数篇 | SlideLoss、FocalLoss分类损失函数助力细节涨点(全网最全)

YOLOv8改进 | 损失函数篇 | SlideLoss、FocalLoss分类损失函数助力细节涨点(全网最全)

一、本文介绍 本文给大家带来的是分类损失 SlideLoss、VFLoss、FocalLoss损失函数，我们之前看那的那些IoU都是边界框回归损失，和本文的修改内容并不冲突，所以大家可以知道损失函数分为两种一种是分类损失另一种是边界框回归损失，上一篇文章里面我们总结了过去百分之九十的…
阅读更多...
ORACLE体系结构逻辑结构-表空间、段、区和数据块

ORACLE体系结构逻辑结构-表空间、段、区和数据块

实例 实例是指在内存中分配的一块共享内存区域&#xff08;SGA&#xff09;和一组后台进程&#xff08;或线程&#xff09;&#xff0c;它们用于访问和控制数据库。3实例是Oracle数据库的运行时环境&#xff0c;它是数据库的动态部分&#xff0c;它可以启动和关闭&#xff0c;…
阅读更多...
树莓派3B+ /+ CSI摄像头 + FFmpeg + SRS 实现直播推流

树莓派3B+ /+ CSI摄像头 + FFmpeg + SRS 实现直播推流

简介&#xff1a; 手头有一个树莓派3B 和一块CSI摄像头&#xff0c;想要实现一个推拉流直播的效果。 所需材料&#xff1a;开发板&#xff08;我用的是树莓派3B&#xff09;、CIS摄像头、云服务器&#xff08;用来搭建SRS服务器&#xff09; 具体实现思路&#xff1a; 使用…
阅读更多...
MyBatis-07

MyBatis-07

MyBatis高级拓展 将Mapper接口和Mapper.xml文件打包到同一地址下 &#xff08;在resources下创建相同的文件夹结构&#xff09; com/dc/mapper创建 多层结构 com.dc.mapper创建 一层结构 分页插件 //导入依赖 <dependency><groupId>com.github.pagehelper</gr…
阅读更多...
Redis 过期删除策略

Redis 过期删除策略

常见的三种过期删除策略&#xff1a; 定期删除&#xff1b;惰性删除&#xff1b;定时删除&#xff1b; 定期删除策略 每隔一段时间「随机」从数据库中取出一定数量的 key 进行检查&#xff0c;并删除其中的过期key。 定期删除的实现在 expire.c 文件下的 activeExpireCycle …
阅读更多...
Unity 编辑器篇|（一）MenuItem菜单栏

Unity 编辑器篇|（一）MenuItem菜单栏

目录 1.MenuItem 属性2.创建多级菜单3.创建带快捷键的菜单4.创建带快捷键的菜单5.检查菜单是否使用6.菜单排序7.扩展右键菜单7.1 Hierarchy 右键菜单7.2 Project 右键菜单7.3 Inspector 组件右键菜单 8. AddComponentMenu 特性9. ContextMenu 特性 添加组件右键菜单 1.MenuItem…
阅读更多...
网页内容任君采撷-右键无法复制

网页内容任君采撷-右键无法复制

CSDN一年一度的博客之星评选活动已经结束&#xff0c;刚好点击来看看学习一下大佬们的博客。 发现绝大部分的博主对于知识的公开度都是非常高的&#xff0c;当然除了收费的专栏外。 其中少部分博主对自己的博文设定了一定的操作&#xff0c;无法直接使用博文中的内容。 现在大…
阅读更多...
最新文章

Copyright @ 2022~2023