随笔分类 -  前端

摘要:第15章、编译器核心技术概览 15.1 模板 DSL 的编译器 完整的编译包括 [源代码] -->词法分析-->语法分析-->语义分析(编译前端) -->中间代码生成-->优化-->目标代码生成(编译后端) -->[目标代码] 在 Vue 中编译器的工作流程 [模板]-->词法分析-->语法分析-- 阅读全文
posted @ 2023-02-09 14:05 我不吃饼干呀 阅读(34) 评论(0) 推荐(0) 编辑
摘要:第14章、内建组件和模块 14.1 KeepAlive 组件的实现原理 KeepAlive 一词借鉴了 HTTP 协议。 KeepAlive 组件可以避免组件被频繁的销毁/重建。本质是缓存管理,再加上特殊的挂载卸载逻辑。 卸载时将组件放入另一个容器中,再次挂载时再拿出来。对应生命周期为 activa 阅读全文
posted @ 2023-02-09 12:56 我不吃饼干呀 阅读(26) 评论(0) 推荐(0) 编辑
摘要:第13章、异步组件与函数式组件 13.1 异步组件要解决的问题 用户可以简单通过 import 异步导入组件。 <template> <component :is="asyncComp"> </template> <script> export default { setup() { const a 阅读全文
posted @ 2023-02-07 18:35 我不吃饼干呀 阅读(41) 评论(0) 推荐(0) 编辑
摘要:第12章、组件的实现原理 12.1 渲染组件 在渲染器内部的实现看,一个组件是一个特殊类型的虚拟 DOM 节点。之前在 patch 我们判断了 VNode 的 type 值来处理,现在来处理类型为对象的情况。 // n1 旧node n2 新node container 容器 function pa 阅读全文
posted @ 2023-02-07 15:16 我不吃饼干呀 阅读(34) 评论(0) 推荐(0) 编辑
摘要:第11章、快速 Diff 算法 11.1 相同的前置元素和后置元素 快速 Diff 算法包含预处理步骤,这借鉴了纯文本 Diff 算法的思路。 先把相同的前缀后缀进行处理,然后再比较中间部分。 function patchKeyedChildren(n1, n2, container) { cons 阅读全文
posted @ 2023-02-06 17:26 我不吃饼干呀 阅读(36) 评论(0) 推荐(0) 编辑
摘要:第10章、双端 Diff 算法 10.1 双端比较的原理 上一章的移动算法并不是最优的,比如我们把 ABC 移动为 CAB,如下 A C B --> A C B 按照上一章的算法,我们遍历新的数组,然后定下第一个元素 C 的位置后,后面的 AB 都需要被移动。但是显而易见的,我们其实可以只移动 C 阅读全文
posted @ 2023-02-06 12:56 我不吃饼干呀 阅读(68) 评论(0) 推荐(0) 编辑
摘要:第9章、简单 Diff 算法 9.1 减少 DOM 操作的性能开销 在之前的章节,如果新旧子节点的类型都是数组,我们会先卸载所有旧节点,再挂载所有新的子节点。但是如果存在相同类型的节点,我们完全可以复用节点,只修改类型即可。 所以这一节采取就朴素的复用思路,按顺序依次 patch 节点,如果旧子节点 阅读全文
posted @ 2023-02-03 17:45 我不吃饼干呀 阅读(35) 评论(0) 推荐(0) 编辑
摘要:第8章、挂载与更新 8.1 挂载子节点和元素的属性 扩展子元素的类型可以为数组,并判断如果是数组的话,就先依次挂载所有的子元素。 同时新增节点属性。属性可以通过 el.setAttribute 添加到 DOM 上,也可以直接在 DOM 对象上设置。 function createRenderer(o 阅读全文
posted @ 2023-02-03 17:14 我不吃饼干呀 阅读(66) 评论(0) 推荐(0) 编辑
摘要:第7章、渲染器的设计 7.1 渲染器与响应系统的结合 渲染器需要有跨平台的能力。 在浏览器端会渲染为真实的 DOM 元素。 const { effect, ref } = VueReactivity // VueReactivity 是前几章实现的响应式代码 function renderer(do 阅读全文
posted @ 2023-02-02 15:12 我不吃饼干呀 阅读(49) 评论(0) 推荐(0) 编辑
摘要:第6章、原始值的响应式方案 6.1 引入 ref 的概念 既然原始值无法使用 Proxy 我们就只能把原始值包裹起来。 function ref(val) { const wrapper = { value: val, }; Object.defineProperty(wrapper, '__v_i 阅读全文
posted @ 2023-01-31 14:19 我不吃饼干呀 阅读(30) 评论(0) 推荐(0) 编辑
摘要:第5章、非原始值的响应式方案 5.1 理解 Proxy 和 Reflect Proxy Proxy 只能代理对象,不能代理非对象原始值,比如字符串。 Proxy 会拦截对对象的基本语义,并重新定义对象的基本操作。 const p = new Proxy(obj, { get() {...}, // 阅读全文
posted @ 2023-01-30 17:52 我不吃饼干呀 阅读(54) 评论(0) 推荐(0) 编辑
摘要:第 4 章、响应系统的作用与实现 4.1 响应式数据与副作用 副作用函数就是会对外部造成影响的函数,比如修改了全局变量。 响应式:修改了某个值的时候,某个会读取该值的副作用函数能够自动重新执行。 4.2 响应系统的简单实现 如何实现响应式: 1、副作用读取值的时候,把函数放到值的某个桶里 2、重新给 阅读全文
posted @ 2023-01-18 18:02 我不吃饼干呀 阅读(156) 评论(0) 推荐(0) 编辑
摘要:第 1 章、权衡的艺术 命令式 or 声明式 命令式:关注过程 声明式:关注结果 声明式直接声明想要的结果,框架帮用户封装好命令式的代码,所以在封装的过程中要做一些其他的事情来(生成要做的事情/找出差异)生成命令式的代码,优势是可维护性强,但是性能:命令式 ≥ 声明式。 框架设计要做的就是,保持可维 阅读全文
posted @ 2023-01-12 20:31 我不吃饼干呀 阅读(87) 评论(0) 推荐(0) 编辑
摘要:背景 最近新接手了一批项目,还没来得及接新需求,一大堆bug就接踵而至,仔细一看,应该返回数组的字段返回了 null,或者没有返回,甚至返回了字符串 "null"??? 这我能忍?我立刻截图发到群里,用红框加大加粗重点标出。后端同学也积极响应,答应改正。 第二天,同样的事情又在其他的项目上演,我只是 阅读全文
posted @ 2023-01-10 15:12 我不吃饼干呀 阅读(3800) 评论(7) 推荐(12) 编辑
摘要:本文翻译自 Intercepting JavaScript Fetch API requests and responses 拦截器是可用于预处理或后处理 HTTP 请求的代码块,有助于全局错误处理、身份验证、日志记录等。在本文中,你将学习如何拦截 JavaScript Fetch API 请求。 阅读全文
posted @ 2023-01-05 20:47 我不吃饼干呀 阅读(1921) 评论(0) 推荐(3) 编辑
摘要:创作灵感 有一天群里小伙伴发了一张图,十二星座一辈子要爱上多上人?如下 这我就不开心了,我大摩羯座,凭什么只能爱一个?我要爱100个!100个!于是我就想这种无厘头的东西我为什么不能自己写一个呢?说干就干! 效果展示 在线地址:https://idonteatcookie.github.io/my- 阅读全文
posted @ 2022-08-22 11:28 我不吃饼干呀 阅读(214) 评论(0) 推荐(0) 编辑
摘要:theme: orange 完整 demo 和 lib 文件可以在 https://github.com/tengge1/webgl-guide-code 中找到。 第 2 章 第一个 WebGL 程序 function main() { // 获取canvas元素 var canvas = doc 阅读全文
posted @ 2022-03-29 15:43 我不吃饼干呀 阅读(78) 评论(0) 推荐(0) 编辑
摘要:1. HTTP 和 HTTPS 定义 超文本传输协议(HyperText Transfer Protocol,HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。 HTTPS 是一种通过计算机网络进行安全通信的传输协议,经由 HTTP 进行通信,利用 S 阅读全文
posted @ 2022-01-27 00:19 我不吃饼干呀 阅读(264) 评论(0) 推荐(1) 编辑
摘要:由于重新打包后会导致对应的 js 和 css 文件 hash 值发生变化,客户端不刷新的话就会存在之前的文件找不到,导致报错的问题。 通过 build.sh 定义打包命令 #!/usr/bin/env bash # 更新当前时间戳 timestamp=`date '+%s'` str="{ \"ti 阅读全文
posted @ 2022-01-26 17:59 我不吃饼干呀 阅读(1328) 评论(0) 推荐(0) 编辑
摘要:和 flex 一起使用的时候会有这个问题。只能自动变宽不能自动变窄。 在 flex-grow:1; 的那一层设置 overflow: auto; 阅读全文
posted @ 2021-09-14 14:20 我不吃饼干呀 阅读(427) 评论(2) 推荐(0) 编辑