- 博客(10)
- 收藏
- 关注
原创 Virtual DOM 的实现原理
Virtual DOM(虚拟 DOM),即是由普通的JS对象来描述 DOM 对象真实 DOM 成员(创建真实DOM的成本非常高)使用 Virtual DOM 来描述真实 DOM就是普通的JavaScript对象,通过sel来描述选择器,通过text来描述文本,其他的之后再研究,创建一个虚拟DOM,它的成员非常少,也就是创建一个虚拟DOM的成本比创建一个真实DOM的成本要低很多- 如何学习源码- 宏观了解- 带着目标看源码- 看源码的过程要不求甚解- 调试- 参考资料Snabbdom 的核心。
2022-10-30 23:15:38
248
1
原创 Vue响应式原理
什么是Vue?一款用于构建用户界面的JavaScript框架,它基于标准 HTML,CSS和 JavaScript 构建,并提供一套声明式、组件化的编程模型,帮助你高效开发用户界面,无论是简单还是复杂的用户界面,Vue都可以胜任观察者模式是由具体目标调度,比如当事件触发,Dep就会去调用观察者的方法,所以观察者模式的订阅者与发布者之间是存在依赖的发布/订阅模式由统一调度中心调用,因此发布者和订阅者不需要知道对方的存在问题给属性重新赋值成对象,是否是响应式的?答案:是响应式的。
2022-10-24 17:46:38
613
原创 VueRouter类图
createRouteMap(): 初始化 routeMap ,它把构造函数中传入的路由规则转换成键值对的形式存储到 routeMap 来, routeMap 就是一个对象,键就是我们的路由地址,值就是对应的组件。+data:对象,里面有个current,current记录路由地址,响应式对象,路由地址发生变化对应的组件要自动更新,如何把data设置成响应式的呢?+routeMap:传入对象,记录路由中地址和组件的对应关系,将来我们会把路由规则解析到 routeMap。+对外公开的方法,_静态方法。
2022-09-23 12:00:51
224
原创 Hash 和 History模式的区别
VueRouter 是前端路由,当路径切换的时候在浏览器端判断当前路径并加载当前路径对应的组件。History 模式是基于 HTML5 中的 History API。Hash 模式是基于锚点,以及 onhashchange 事件。History 模式。
2022-09-16 01:42:04
289
1
原创 Webpack打包
一、模块打包工具的由来模块化产生的问题:ES Modules 存在环境兼容问题模块文件过多,网络请求频繁所有的前端资源都需要模块化从开发到生产模块化可以达到要求新特性代码编译模块化 JavaScript 打包支持不同类型的资源模块二、模块打包工具概要Webpack 作为 模块打包器(Module bundler)有兼容问题的代码通过 模块加载器(Loader)对其进行编译转换代码拆分(Code Splitting)按照我们的需求去拆分文件Webpack 支持我们以任意的资
2022-09-16 00:37:48
109
原创 模块化开发
一、模块化概念模块化 只是一个思想内容概要:模块化演变过程模块化规范常用的模块化打包工具基于模块化工具构建现代 Web 应用打包工具的优化技巧二、模块化演变过程Stage 1 - 文件划分发生基于文件的划分模块的方式问题:污染全局作用域命名冲突问题无法管理模块依赖关系这种早期模块化完全依靠约定Stage 2 - 命名空间方式(所有模块成员都挂载在这个对象下面)每个模块只暴露一个全局对象,所有模块成员都挂载到这个对象中问题:模块成员在外部仍然可以被访问被
2022-09-16 00:37:27
191
原创 开发脚手架及封装自动化构建工作流
一、工程化的定义和主要解决的问题1、工程化的定义和主要解决的问题前端工程化:全副武装:通过工程化提升“战斗力”面临的问题想使用ES6+ 新特性,但是兼容有问题想要用 Less/Sass/PostCSS增强CSS的编程性,但是运行环境不能直接支持想要用模块化的方式提高项目的可维护性,但运行环境不能直接支持部署上线前需要手动压缩代码及资源文件,部署过程需要手动上传代码到服务器多人协作开发,无法硬性统一大家的代码风格,从仓库pull回来的代码质量无法保证部分功能开发时需要等待后端服务接口提前完
2022-09-16 00:36:56
221
原创 TypeScript 语言
概述文章目录概述类型系统1、强类型与弱类型2、静态类型与动态类型3、JavaScript 类型系统特征弱类型的问题强类型与弱类型静态类型与动态类型JavaScript自有类型系统的问题Flow静态类型检查方案TypeScript语言规范与基本应用类型系统强类型与弱类型(类型安全)静态类型与动态类型(类型检查)1、强类型与弱类型类型安全:强类型 vs. 弱类型强类型定义:语言层面限制函数的实参类型必须与形参类型相同弱类型定义:语言层面不会限制实参的类型普遍认为:强类型有更强的类
2022-09-16 00:36:27
378
原创 JS性能优化
文章目录性能优化介绍内存管理 Memory ManagementJavaScript 中的垃圾回收GC算法介绍引用计数算法实现原理引用计数算法优缺点标记清除算法实现原理标记清除算法优缺点标记整理算法实现原理常见GC算法总结认识V8V8垃圾回收策略V8如何回收新生代对象性能优化介绍性能优化是不可避免的哪些内容可以看做是性能优化无处不在的前端性能优化内存管理垃圾回收与常见 GC 算法V8 引擎的垃圾回收Performance 工具代码优化实例内存管理 Memory Management
2022-09-16 00:35:42
896
原创 我的笔记--ECMAScript 新特性
文章目录ECMAScript 概述ES2015 概述ES2015 let 与块级作用域ECMAScript 概述ECMAScript 是 JavaScript的语言本身通常看作JavaScript的标准化规范时间上JavaScript是ECMAScript的扩展语言ECMAScript只提供了最基本的语法(约定了代码该怎么编写,停留在语言上)ES2015 概述解决原有语法上的一些问题或者不足对原有语法进行增强全新的对象、全新的方法,全新的功能全新的数据类型和数据结构ES2015 l
2020-11-24 02:10:49
709
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人