Vue.js设计与实现阅读2

news2024/9/20 0:59:50

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(() => {/*...*/})

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[C#]winform部署yolov5-onnx模型

[C#]winform部署yolov5-onnx模型

【官方框架地址】 https://github.com/ultralytics/yolov5 【算法介绍】 Yolov5&#xff0c;全称为You Only Look Once version 5&#xff0c;是计算机视觉领域目标检测算法的一个里程碑式模型。该模型由ultralytics团队开发&#xff0c;并因其简洁高效的特点而备受关注。Yol…
阅读更多...
异常处理：全面覆盖与精细化管理的平衡

异常处理：全面覆盖与精细化管理的平衡

异常处理&#xff1a;全面覆盖与精细化管理的平衡 在软件开发中&#xff0c;异常处理是保证系统稳定性和用户体验的重要环节。对于是否应当全面覆盖所有异常并设立兜底机制&#xff0c;业界存在着两种主流思路&#xff1a;全面覆盖原则和精细化处理。如何在这两者间取得平衡&a…
阅读更多...
嵌入式Qt-动手编写并运行自己的第1个ARM-Qt程序

嵌入式Qt-动手编写并运行自己的第1个ARM-Qt程序

介绍了如何搭建在Linux开发板中搭建Qt的运行环境&#xff0c;并测试了Qt自带的例程。 本篇&#xff0c;来介绍如何自己编写一个Qt程序&#xff0c;并将编译结果放到Linux开发板中运行。 1 Windows上编写Qt程序 因为Qt是支持跨平台的&#xff0c;所以我们可以先在Windows平台…
阅读更多...
一天一个设计模式---单例模式

一天一个设计模式---单例模式

概念 单例模式是一种创建型设计模式&#xff0c;其主要目的是确保一个类只有一个实例&#xff0c;并提供一个全局访问点。这意味着在应用程序中的任何地方&#xff0c;只能有一个实例存在&#xff0c;而不会创建多个相同类型的实例。 具体内容 单例模式通常包括以下几个要素…
阅读更多...
深度学习：图神经网络——在推荐系统中的应用

深度学习：图神经网络——在推荐系统中的应用

PinSage是工业界应用图神经网络完成推荐任务的第一个成功案例&#xff0c;其从用户数据中构造图&#xff08;graph&#xff09;的方法和应对大规模图而采取的实现技巧都值得我们学习。PinSage被应用在图片推荐类Pinterest上。在Pinterest中&#xff0c;每个用户可以创建并命名图…
阅读更多...
工程管理系统功能设计与实践：实现高效、透明的工程管理

工程管理系统功能设计与实践：实现高效、透明的工程管理

在现代化的工程项目管理中&#xff0c;一套功能全面、操作便捷的系统至关重要。本文将介绍一个基于Spring Cloud和Spring Boot技术的Java版工程项目管理系统&#xff0c;结合Vue和ElementUI实现前后端分离。该系统涵盖了项目管理、合同管理、预警管理、竣工管理、质量管理等多个…
阅读更多...
深入了解网络流量清洗--使用免费的雷池社区版进行防护

深入了解网络流量清洗--使用免费的雷池社区版进行防护

​ 随着网络攻击日益复杂&#xff0c;企业面临的网络安全挑战也在不断增加。在这个背景下&#xff0c;网络流量清洗成为了确保企业网络安全的关键技术。本文将探讨雷池社区版如何通过网络流量清洗技术&#xff0c;帮助企业有效应对网络威胁。 ![] 网络流量清洗的重要性&#x…
阅读更多...
Wpf 使用 Prism 实战开发Day08

Wpf 使用 Prism 实战开发Day08

备忘录页面设计 1.效果图 一.布局设计跟第7章节一样&#xff0c;只是内容方面发生变化&#xff0c;其他样式都一样。直接把代码粘出来了 MemoView.xaml 页面代码 <UserControl x:Class"MyToDo.Views.MemoView"xmlns"http://schemas.microsoft.com/winfx/2…
阅读更多...
jQuery页面整屏滚动

jQuery页面整屏滚动

效果展示 jQuery页面整屏滚动 Html代码块 <div id"fullpage" class"fullpage-index"><!-- index01 --><div class"indexitem index01 section" id"#page1"><img src"img/img01.jpg"/></div>…
阅读更多...
设计模式——工厂方法模式（Factory Method Pattern）

设计模式——工厂方法模式（Factory Method Pattern）

简单工厂模式 概述 说工厂方法模式之前&#xff0c;先说下简单工厂模式&#xff0c;简单工厂模式并不属于GoF 23个经典设计模式&#xff0c;但通常将它作为学习其他工厂模式的基础&#xff0c;它的设计思想很简单&#xff0c;其基本流程如下&#xff1a;首先将需要创建的各种不…
阅读更多...
NODE笔记 0

NODE笔记 0

一些简单的node学习笔记记录&#xff0c;是Vue等前端框架的基础 入门学习备忘录 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 node.js 内置网络服务器&#xff0c;是前端框架学习的基础&#xff1a; 概念&#xff1a;…
阅读更多...
大模型机器人发展史：从VoxPoser、RT2到斯坦福Mobile ALOHA、Google机器人

大模型机器人发展史：从VoxPoser、RT2到斯坦福Mobile ALOHA、Google机器人

前言 23年7月&#xff0c;我在朋友圈评估Google的RT2说道&#xff1a; “大模型正在革新一切领域啊&#xff0c;超帅&#xff0c;通过大模型不仅能理解“人话”&#xff0c;还能对“人话”进行推理&#xff0c;并转变为机器人能理解的指令&#xff0c;从而分阶段完成任务。回…
阅读更多...
Web前端-jQuery

Web前端-jQuery

文章目录 jQuery1.1 jQuery 介绍1.1.1 JavaScript 库1.1.2 jQuery的概念1.1.3 jQuery的优点 1.2 jQuery 的基本使用1.2.1 jQuery 的下载1.2.2 jQuery快速入门1.2.3 jQuery入口函数1.2.4 jQuery中的顶级对象$1.2.5 jQuery 对象和 DOM 对象1.2.6. jQuery 对象和 DOM 对象转换 1.3…
阅读更多...
二叉树OJ练习（二）

二叉树OJ练习（二）

1. 二叉树的最近公共祖先 题目描述&#xff1a; ​ 题解: 1.p或者q其中一个等于root&#xff0c;那么root就是最进公共祖先 2.p和q分布在root的左右两侧&#xff0c;那么root就是最进公共祖先 3.p和q在root的同一侧&#xff0c;就是要遍历这棵树&#xff0c;遇到p或者q返回 ​…
阅读更多...
数据结构—图(下)

数据结构—图(下)

文章目录 12.图(下)(4).生成树和最小生成树#1.什么是生成树和最小生成树&#xff1f;i.生成树ii.最小生成树 #2.Prim算法i.算法思想ii.看看例子iii.代码实现 #3.Kruskal算法i.算法思想ii.看看例子iii.代码实现 #4.次小生成树 (5).最短路径问题#1.加权有向图的最短路径问题#2.单…
阅读更多...
(Matlab)基于CNN-Bi_LSTM的多维时序回归预测(卷积神经网络-双向长短期记忆网络)

(Matlab)基于CNN-Bi_LSTM的多维时序回归预测(卷积神经网络-双向长短期记忆网络)

目录 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 亮点与优势&#xff1a; 二、实际运行效果&#xff1a; 三、部分代码展示&#xff1a; 四、完整代码数据下载&#xff1a; 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 本代码基于Matlab平…
阅读更多...
鹦鹉目标检测数据集VOC格式600张

鹦鹉目标检测数据集VOC格式600张

鹦鹉&#xff0c;一种色彩鲜艳、聪明伶俐的鸟类&#xff0c;以其模仿人类语言的能力和独特的喙形而广受喜爱。 鹦鹉属于鸟纲、鹦鹉科&#xff0c;是热带和亚热带地区的常见鸟类。它们的喙弯曲呈钩状&#xff0c;非常适合啄食种子、果实和坚果等食物。鹦鹉的羽毛通常非常鲜艳&a…
阅读更多...
精进单元测试技能——Pytest断言的艺术

精进单元测试技能——Pytest断言的艺术

本篇文章主要是阐述Pytest在断言方面的应用。让大家能够了解和掌握Pytest针对断言设计了多种功能以适应在不同测试场景上使用。 了解断言的基础 在Pytest中&#xff0c;断言是通过 assert 语句来实现的。简单的断言通常用于验证预期值和实际值是否相等&#xff0c;例如&#xf…
阅读更多...
腾讯云域名外部入库流程

腾讯云域名外部入库流程

注册商是腾讯云&#xff0c;且在腾讯云管理的&#xff0c;请使用此教程外部入库。 如您的域名注册商是腾讯云但在聚名管理&#xff0c;请参考教程&#xff1a;https://www.west.cn/faq/list.asp?unid2539 在外部入库操作之前&#xff0c;请先登录腾讯云获取账号ID信息。…
阅读更多...
人类认知中的等价机理与机器智能中等价机理

人类认知中的等价机理与机器智能中等价机理

人类认知中的等价机理是指人们在认知过程中&#xff0c;通过将不同的概念、事物或情境进行等价替代&#xff0c;从而实现思维的连贯和理解的补充。例如&#xff0c;当人们看到一个陌生的动物时&#xff0c;可以将它与已知的动物进行等价对应&#xff0c;从而理解其特征和行为。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023