赤楠曦-CSDN博客

原创模拟Vue.js响应式原理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3wM6g5Bk-1652351202807)(模拟Vue.js响应式原理/image-20220505104638376.png)]数据响应式的核心原理vue 2.xshim降级处理vue 2.x 基于 Object.defineProperty()实现的所以不支持IE8以及更低的版本如果有一个对象中多个属性需要转换 getter/setter 如何处理？vue 3.x基于proxy实现响应式原理prox

2022-05-12 18:26:56 232

原创 vue-Router的实现原理

基本任务Vue Router 基础回顾Hash模式History模式模拟实现自己的Vue RouterVue Router基础回顾给Vue实例注入route和route和route和router,route路由规则，router路由对象，router对象下的属性mode:hash 路由模式哈希模式，已‘#’表示路由模式currentRoute：当前路由规则，有时（在插件中）不方便获取到路由规则，可以先获取路由对象然后获取到当前路由规则动态路由路由传参路径后传参path '/deta

2022-05-12 18:24:15 1795

原创 Virtual DOM的实现原理

了解虚拟DOM,以及虚拟DOM的作用Snabbdom的基本使用Snabbdom的源码解析虚拟DOM的作用和虚拟DOM库h函数的用法h函数创建虚拟dom第一个参数：标签+选择器第二个参数：可以是一个数组，数组中的每一个元素也都是一个Vnodelet vnode = h('div#container',[ h('h1','Hello Snabbdom'), h('p','这是一个p')])如果是字符串就是标签的文本内容let vnode = h('di.

2022-05-12 18:20:03 245

原创模块化开发

模块化概述最主流的代码组织方式模块化只是思想模块化的演进过程基于文件划分缺点：污染全局作用域、命名冲突、无法管理模块依赖关系、完全依靠约定命名空间方式将模块包装成一个全局对象、减小命名冲突、仍然没有私有空间、变量可以被修改、依赖关系无法管理使用立即执行函数为模块提供私有空间[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZHDKGgoH-1651320618136)(模块化开发/image-20220412214127261.png)]使

2022-04-30 20:10:57 196

原创 webpack5

现代Web开发"问题"采用模块化开发使用新特性提高效率保证安全性实时监听开发过程使用热更新项目结果打包压缩使用Webpack实现项目工程化webpack上手为现代JavaScript引用提供静态模块打包打包：将不同类型资源按模块处理进行打包静态：打包后最终产出静态资源模块：webpack支持不同规范的模块化开发webpack配置文件使用局部的webpack打包文件npx webpack指定入口文件npx webpack --entry ./src/main.js指定输出目

2022-04-30 20:08:48 303

原创自动化构建

简介~初体验scss编译创建sass文件安装yarn add sass --dev执行./node_modules/.bin/sass查看帮助信息执行./node_modules/.bin/sass 输入路劲输出路径npm Scripts在package.js文件中添加scripts:'sass 输入路径输出路径'npm Scripts实现自动化构建最简单的方式添加一个模块yarn add browser-sync --dev用于启动一个测试服务器运行项目在package.j

2022-04-11 19:29:18 1028

原创脚手架工具

yeoman 基础使用通用项目脚手架工具1、安装yarn global add yo// 项目生成器yarn global add generator-node2、创建my-module文件夹运行生成器yo node3、创建cli运行yo node:cliyarn link// 安装模块yarnyeomen 使用步骤[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vsslm1ne-1649676358887)(脚手架工具/image-20

2022-04-11 19:26:53 545

原创 TypeScript语言

概述静态类型与动态类型JavaScript自有类型系统的问题Flow静态类型检查方案TypeScript语言规范与基本应用强类型与弱类型强类型与弱类型从类型安全的角度区分强类型：从语言层面限制函数的实参类型必须与形参类型相同弱类型语言：并不会去限制有隐式类型转换静态类型动态类型语言是否允许类型转换，从类型检查的角度区分javascript类型系统特征可以说没有类型系统，任性丢失类型系统的可靠性，没有类型检查，因为没有编译阶段弱类型的问题运行阶段才能发

2022-03-20 17:55:51 1363

原创 JavaScript性能优化

概述性能优化是不可避免的提高运行效率，降低运行开销的行为即为性能优化内容概要内存管理垃圾回收与常见的GC算法V8引擎的垃圾回收Performance工具内存管理为什么需要内存管理内存泄漏内存：有可读写的单元组成，表示一篇可操作的空间管理：人为的去操作一片空间的申请、使用和释放内存管理：开发者主动申请空间、使用空间、释放空间管理流程：申请-使用-释放js中的内存管理申请内存空间使用内存空间释放内存空间// 申请空间let obj = {}// 使用

2022-03-20 17:54:15 1947

原创 ECMAScript新特性

准备依赖 nodemon 小工具作用修改完代码自动执行命令行代码：code a.js 在当前目录下创建一个a.js的文件del a.js 删除当前目录下的a.js文件npx nodemon ./a.js 使用项目中的nodemon执行a.js文件let 与块级作用域let 声明的变量只在块作用域中生效没有声明提升存在暂时性死去const关键字声明一个常量，不能修改（不能重新指向一个新的内存地址）其它和let一样数组解构const arr = [100

2022-02-27 22:03:29 405

原创 JavaScript异步执行流程

JavaScript异步什么是异步相对于同步的概念，同步代码按照代码顺序依次执行，异步代码则不会按照代码顺序执行，异步代码会从主线成中发送一个子线程来完成任务异步代码的执行过程主线程的代码一次开始执行（压入调用栈），当遇到异步代码时，调用栈并不会等待异步代码的执行，会直接开始执行异步代码之后的代码，异步代码执行完成将会创建一个会回调函数（事件）放入消息队列。如果调用栈中同步代码全部执行完成就会去消息队列中调用异步代码（将异步代码压入调用栈），之后只要调用栈中的代码执行完毕

2022-02-22 17:43:11 458

原创手写promise源码

promise核心原理promise就是一个类，自在执行这个类的时候需要一个执行器，执行器会立即执行promise的状态成功（fulfilled）失败（rejected）等待（pending）pending ==> fulfilledpending ==> rejected状态y一但确定就不可改变resolve和reject函数用来改变状态resolve 函数的参数接收成功的数据reject 函数的参数接收失败的原因then 方法接收两

2022-02-22 17:39:44 103

原创 javaScript异步编程

概述同步与异步的差异事件循环与消息队列，即如何实现异步模式异步编程的方式Promise 异步方案、宏任务/微任务Generator异步方案、Async/Await语法糖同步模式逐行执行阻塞异步模式不会等待任务是否执行完成，立即执行下个任务后续逻辑通过回调函数定义代码混乱异步分析同步代码按文档顺序执行，碰见异步代码，先压入调用栈，之后直接弹出到异步api环境中，继续执行同步代码，在执行同步代码的同时，事件循环一直会等待消息对列中的异步代码完成，完成后事件循环压入到调用

2022-02-21 12:00:26 406

原创 javaScript深度剖析

函数式编程柯里化函数组合函子

2022-02-20 11:12:07 317

weixin_53800968的博客