- 博客(71)
- 收藏
- 关注
RSS订阅原创 JavaScript -期约与异步函数
ECMAScript 6 及之后的几个版本逐步加大了对异步编程机制的支持，提供了令人眼前一亮的新特性。ECMAScript 6 新增了正式的 Promise（期约）引用类型，支持优雅地定义和组织异步逻辑。接下来几个版本增加了使用 async 和 await 关键字定义异步函数的机制。注意 本章示例将大量使用异步日志输出的方式 setTimeout(console.log, 0, …params)，旨在演示执行顺序及其他异步行为。异步输出的内容看起来虽然像是同步输出的，但实际上是异步打印的。
2023-03-07 16:25:17
491
1
原创 JavaScript - 函数
对于命名参数而言，如果调用函数时没有传这个参数，那么它的值就是 undefined。这就类似于定义了变量而没有初始化。比如，如果只给 doAdd() 传了一个参数，那么 num2 的值就是 undefined。
2023-02-20 13:22:39
664
原创 JavaScript - 代理与反射（代理捕获器与反射方法）
代理可以捕获 13 种不同的基本操作。这些操作有各自不同的反射 API 方法、参数、关联 ECMAScript 操作和不变式。正如前面示例所展示的，有几种不同的 JavaScript 操作会调用同一个捕获器处理程序。不过，对于在代理对象上执行的任何一种操作，只会有一个捕获处理程序被调用。不会存在重复捕获的情况。只要在代理上调用，所有捕获器都会拦截它们对应的反射 API 操作。
2023-01-18 10:27:08
615
原创 JavaScript - 代理与反射（代理基础）
使用代理的主要目的是可以定义捕获器（trap）。捕获器就是在处理程序对象中定义的“基本操作的拦截器”。每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。注意：捕获器（trap）是从操作系统中借用的概念。在操作系统中，捕获器是程序流中的一个同步中断，可以暂停程序流，转而执行一段子例程，之后再返回原始程序流。
2023-01-16 21:18:34
801
原创 JavaScript-对象、类与面向对象编程（类） + 本章小结
与函数类型相似，定义类也有两种主要方式：类声明和类表达式。// 类声明 class Person {} // 类表达式 const Animal = class {};与函数表达式类似，类表达式在它们被求值前也不能引用。不过，与函数定义不同的是，虽然函数声明可以提升，但类定义不能};};另一个跟函数声明不同的地方是，函数受函数作用域限制，而类受块作用域限制{类可以包含构造函数方法、实例方法、获取函数、设置函数和静态类方法，但这些都不是必需的。空的类定义照样有效。
2022-12-29 15:56:44
530
原创 JavaScript-对象、类与面向对象编程（创建对象）
综观 ECMAScript 规范的历次发布，每个版本的特性似乎都出人意料。ECMAScript 5.1 并没有正式支持面向对象的结构，比如类或继承。但是，正如接下来几节会介绍的，巧妙地运用原型式继承可以成功地模拟同样的行为。ECMAScript 6 开始正式支持类和继承。ES6 的类旨在完全涵盖之前规范设计的基于原型的继承模式。不过，无论从哪方面看，ES6 的类都仅仅是封装了 ES5.1 构造函数加原型继承的语法糖而已。
2022-12-10 22:13:49
156
原创 JavaScript-对象、类与面向对象编程（理解对象）
创建自定义对象的通常方式是创建 Object 的一个新实例，然后再给它添加属性和方法，如下例所示：这个例子创建了一个名为 person 的对象，而且有三个属性（name、age 和 job）和一个方法（sayName()）。sayName() 方法会显示 this.name 的值，这个属性会解析为 person.name。早期 JavaScript 开发者频繁使用这种方式创建新对象。几年后，对象字面量变成了更流行的方式。前面的例子如果使用对象字面量则可以这样写：这个例子中的 person 对象跟前面例子
2022-12-05 19:07:56
795
原创 JavaScript-迭代器与生成器
在 JavaScript 中，计数循环就是一种最简单的迭代：迭代会在一个有序集合上进行。（“有序”可以理解为集合中所有项都可以按照既定的顺序被遍历到，特别是开始和结束项有明确的定义。）数组是 JavaScript 中有序集合的最典型例子：因为数组有已知的长度，且数组每一项都可以通过索引获取，所以整个数组可以通过递增索引来遍历。由于如下原因，通过这种循环来执行例程并不理想：ES5 新增了 方法，向通用迭代需求迈进了一步（但仍然不够理想）：这个方法解决了单独记录索引和通过数组对象取得值的问题。不过，
2022-12-04 18:33:46
254
原创 Vue.js 框架源码与进阶 - Vue.js 3.0 快速上手（尚硅谷）
打包大小减少 41%初次渲染快 55%, 更新渲染快 133%内存减少 54%…使用 Proxy 代替 defineProperty 实现响应式重写虚拟 DOM 的实现和 Tree-Shaking…Composition API（组合 API）新的内置组件其他改变官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create3.2 使用 vite 创建官方文档：https://v3.cn.vuejs.org/guide/ins
2022-08-26 17:25:22
869
原创 Vue.js 框架源码与进阶 - Vue.js 3.0 响应式系统原理
/ Reflect 也有对应方法 Reflect.getPrototypeOf()，方法的作用是一样的，只是表达语意的问题。// 因为 JavaScript 的特殊性，代码在运行期间可以随意的去给对象增加成员或者获取对象中成员的信息。// 如果在 Reflect 中有对应的 Object 的方法，那么都建议使用 Reflect 中的方法。// 因为这里的 this 指向 Proxy ，所以 this.bar 执行的是代理对象的 get 方法。// effect 中的函数首先会执行一次。...
2022-08-16 17:58:00
293
原创 Vue.js 框架源码与进阶 - Vue.js 3.0 介绍
相对于 Options API 这样做的好处：查看某个逻辑时只需关注具体的函数即可，当前的逻辑代码都封装在函数内部，不像 Options API 时获取鼠标位置的逻辑代码分散在不同的位置，查看这部分代码还需要上下拖动滚动条。在性能方面 Vue.js 3.x 又大幅度提升，使用代理对象 Proxy 重写了响应式的代码并且对编译器做了优化，重写了虚拟 DOM，从而让渲染和 Update 的性能都有了大幅度的提升。Vue 3.x 在构建时与 Vue 2.x 类似都构建了不同的版本。......
2022-08-09 17:48:30
1492
原创 Vue.js 框架源码与进阶 - 封装 Vue.js 组件库
好处main.jsroot.vue1.2.2 $parent获取的数据是响应式的parent.vuechild.vuegrandson.vue1.2.3 $children获取所有子组件parent.vuechildren1.vuechildren2.vue1.2.4 $refs如果你把它作用到普通 HTML 标签上，则获取到的是 DOM如果你把它作用到组件标签上，则获取到的是组件实例parent.vuemyinput.vue1.2.5 provide / in
2022-08-08 22:47:45
560
原创 Vue.js 框架源码与进阶 - 搭建自己的SSR
官方文档VueSSR（Vue.jsServer-SideRendering）是Vue.js官方提供的一个服务端渲染（同构应用）解决方案使用它可以构建同构应用还是基于原有的Vue.js技术栈官方文档的解释Vue.js是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出Vue组件，进行生成DOM和操作DOM。然而，也可以将同一个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。...
2022-07-25 19:56:43
513
原创 Vue.js 框架源码与进阶 - Nuxt.js 基础
下图阐述了 Nuxt.js 应用一个完整的服务器请求到渲染（或用户通过 切换路由渲染页面）的流程：Nuxt 提供了两种方式用来创建项目：在 package.json 文件的 scripts 中新增上面的配置使得我们可以通过运行 来运行 nuxt启动项目现在我们的应用运行在 上运行那么，Nuxt.js 自动生成的路由配置如下：3.2 路由导航a 标签它会刷新整个页面，不建议使用 组件https://router.vuejs.org/zh/api/#t
2022-07-11 19:48:18
733
原创 Vue.js 框架源码与进阶 - 服务端渲染基础
但也也有一些很大的缺陷，其中主要涉及到以下两点：为了解决这两个缺陷，业界借鉴了传统的服务端直出 HTML 方案，提出在服务器端执行前端框架（React/Vue/Angular）代码生成网页内容，然后将渲染好的网页内容返回给客户端，客户端只需要负责展示就可以了当然不仅仅如此，为了获得更好的用户体验，同时会在客户端将来自服务端渲染的内容激活为一个 SPA 应用，也就是说之后的页面内容交互都是通过客户端渲染处理这种方式简而言之就是：工作流程：下面通过 Node.js 来了解一下这种方式：安装依赖：服务端代
2022-07-10 23:31:51
649
原创 Vue.js 框架源码与进阶 - Vuex 状态管理
Vue 最核心的两个功能：数据驱动和组件化下面是一个最简单的组件的代码，每个组件内部都有自己的数据、模板还有方法状态管理包含以下几部分：1.2.2 子组件给父组件传值子传父：Event Up在子组件中使用 $emit 发布一个自定义事件在使用这个组件的时候，使用 v-on 监听这个自定义事件可以通过 $event 访问到被抛出的这个值（使用事件抛出一个值），但在事件处理函数中是不能这么使用的1.2.3 不相关组件传值非父子组件：Event Bus我们可以使用 Event B
2022-07-08 15:31:19
270
原创 Vue.js 框架源码与进阶 - Vue.js 源码剖析 - 组件化
全局注册三、Vue.component 内部实现src/core/global-api/index.jssrc/core/global-api/assets.jssrc/shared/constans.jssrc/core/global-api/assets.js四、Vue.extendsrc/core/global-api/extend.js通过源码我们可以看到，它内部就是基于传入的选项对象创建了组件的构造函数，组件的构造函数继承自 Vue 构造函数，所以组件对
2022-07-07 15:00:34
297
原创 Vue.js 框架源码与进阶 - Vue.js 源码剖析 - 模板编译
渲染函数 render模板编译的作用Vue 2.x 使用 VNode 描述视图以及各种交互，用户自己编写 VNode 比较复杂用户只需要编写类似 HTML 的代码 - Vue.js 模板，通过编译器将模板转换为返回 VNode 的 render 函数.vue 文件会被 webpack 在构建的过程中转换成 render 函数二、体验模板编译的结果带编译器版本的 Vue.js 中，使用 template 或 el 的方式设置模板编译后 render 输出的结果_c
2022-07-06 18:33:14
630
原创 Vue.js 框架源码与进阶 - Vue.js 源码剖析 -虚拟 DOM
虚拟 DOM 实现原理请查看博客 Vue.js 框架源码与进阶 - Virtual DOM 的实现原理h 函数就是 createElement()vm.$createElement(tag, data, children, normalizeChildren)参数Vue 中的 h 函数支持组件和插槽（slots）四、虚拟 DOM 创建过程功能定义src/core/vdom/create-element.js执行完 createElement 之后创建好了 VNode，把创建好的 VNode 传
2022-07-05 14:54:03
443
原创 Vue.js 框架源码与进阶 - Vue.js 源码剖析 - 响应式原理
1.3 了解 Flow官网：https://flow.org/JavaScript 的静态类型检查器Flow 的静态类型检查错误是通过静态类型推断实现的文件开头通过 // @flow 或者 /* @flow */ 声明具体的使用方式请参考博客 JavaScript 深度剖析 - 类型系统 + TypeScript1.4 调试设置打包工具 Rollup安装依赖设置 sourcemap（代码地图）执行 dev调试术语Runtime + Compiler（完整版） vs Run
2022-07-04 15:57:54
1380
1
原创 Vue.js 框架源码与进阶 - Virtual DOM 的实现原理
真实 DOM 成员非常多，所以创建一个 DOM 对象的成本是非常高的二、为什么使用 Virtual DOM前端开发刀耕火种的时代，手动操作 DOM 比较麻烦，还需要考虑浏览器兼容性问题，虽然有 jQuery 等库简化 DOM 操作，但是随着项目的复杂 DOM 操作复杂提升为了简化 DOM 的复杂操作于是出现了各种 MVVM 框架，MVVM 框架解决了视图和状态的同步问题为了简化视图的操作我们可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题虚拟 DOM 跟踪状态变化，Virtual D
2022-06-28 16:03:08
392
原创 Vue.js 框架源码与进阶 - 模拟 Vue.js 响应式原理
演示 Object.defineProperty 是如何使用的对象中多个属性转换 getter/setter2.2 Vue 3.xMDN - Proxy直接监听对象，而非属性ES6 中新增，IE 不支持，性能由浏览器优化对比三、发布订阅模式和观察者模式3.1 发布/订阅模式订阅者发布者信号中心Vue 中的自定义事件以及 node 中的事件机制，都是基于发布/订阅模式的兄弟组件通信过程模拟 Vue 自定义事件的实现（此处并代码并不体现发布者和订阅者，只体现
2022-06-21 21:41:09
218
原创 Vue.js 框架源码与进阶 - Vue-Router 原理实现
1.3 注册 router 对象 main.js1.4 创建路由组件的占位 App.vue二、动态路由router/index.jsDetail.vue三、嵌套路由router/index.jsLayout.vueAPP.vue四、编程式导航push 方法会记录本次历史（可以在浏览器上面后退）replace 方法不会记录本次历史 会替换历史记录go 方法会以 0 为基准跳转到相对页面五、Hash 和 History 模式区别5.1 表现形式的区别H
2022-06-20 17:31:56
254
原创 前端工程化实战 - 模块化开发
第一阶段所以就有了第二阶段，在第二阶段当中，我们约定每一个模块只暴露一个全局对象，所有模块的成员都挂载到对象下面具体做法就是在第一阶段的基础上，通过将每个模块包裹为一个全局对象的形式实现，有点类似于为模块内的成员添加了命名空间的感觉通过命名空间减小了命名冲突的可能，但是同样没有私有空间，所有模块成员也可以在模块外部被访问或者修改，而且也无法管理模块之间的依赖关系第二阶段到了第三阶段，第三阶段使用立即执行函数的方式为模块提供私有空间具体做法就是将模块中每一个成员都放在一个函数提供的私
2022-06-15 19:53:42
517
原创 前端工程化实战 - 自动化构建工具
最典型的运用场景就是在去开发网页应用时就可以使用：main.scssindex.htmlpackage.json安装 Sass 模块安装完成后，在 node_modules 下有一个 .bin 目录，这个目录下有一个 Sass 的命令文件，可以使用指令打开帮助信息将 Sass 文件转换成 CSS使用 或 启动实现自动化构建（1）安装 browser-sync 模块，用于启动一个测试服务器，去运行项目（2）在 scripts 中添加 serve 命令，通过 br
2022-06-13 22:47:25
1818
原创 前端工程化实战 - 开发脚手架
日常开发会面临的一些问题（技术是为了解决问题而存在的）主要解决的问题实现前端工程化可以从以下几方面出发：一切重复的工作都应该被工程化一些成熟的工程化集成通常我们在去开发相同类型的项目时都会有一些相同的约定，其中包括：安装对应的 generator通过 yo 运行 generator（在自己新建的文件根目录运行）填写相关信息运行模块3.4 Yeoman 使用步骤总结明确你的需求找到合适的 Generator全局范围安装找到的 Generator通过 Yo 运行对
2022-06-09 16:58:45
869
原创 JavaScript 深度剖析 - JavaScript 性能优化
文章目录一、性能优化介绍二、JavaScript 内存管理（Memory Management）2.1 内存管理介绍2.2 JavaScript 中的内存管理三、JavaScript 中的垃圾回收四、GC算法介绍一、性能优化介绍性能优化是不可避免的任何一种可以提高运行效率，降低运行开销的行为都可以看做是一种优化操作无处不在的前端性能优化，例如：请求资源用到的网络、数据的传输方式、开发过程中使用到的框架等接下来我们探讨的核心为 JavaScript 语言的优化二、JavaScript 内存管理
2022-06-06 22:31:49
807
原创 JavaScript 深度剖析 - 类型系统 + TypeScript
文章目录一、类型系统1.1 强类型与弱类型（类型安全）1.2 静态类型与动态类型（类型检查）1.3 常见编程语言在这两个角度下的表现二、JavaScript 类型系统特征三、JavaScript 弱类型的问题四、 强类型的优势五、Flow（JavaScript 的静态类型检查器）5.1 Flow 概述5.2 Flow 快速上手5.3 Flow 编译移除注解5.4 Flow 开发工具插件（Flow Language Support）5.5 Flow 类型推断5.6 Flow 类型注解5.6.1 原始类型5.6
2022-05-29 16:16:32
477
原创 JavaScript 深度剖析 - ECMAScript 新特性（2015-2017）
文章目录一、ECMAScript 概述二、ES2015 概述（ES6）2.1 let 与块级作用域2.2 const （恒量 / 常量）三、数组的解构3.1 使用解构快速支取数组成员四、对象的解构一、ECMAScript 概述实际上 JavaScript 是 ECMAScript 的扩展语言JavaScript 语言本身指的就是 ECMAScript2015 年开始 ECMAScript 保持每年一个版本的迭代二、ES2015 概述（ES6）解决原有语法上的一些问题或者不足对原有语法
2022-05-24 18:04:25
337
原创 JavaScript 深度剖析 - 手写 Promise 源码
文章目录一、Promise 类核心逻辑实现1.1 Promise 的基本使用1.2 创建 Promise 原理代码1.2.1 执行器1.2.2 then二、在 Promise 类中加入异步逻辑三、实现 then 方法多次调用添加多个处理函数四、实现 then 方法的链式调用要求node 版本 > 12推荐 14.17.3 LTS长期支持版一、Promise 类核心逻辑实现1.1 Promise 的基本使用Promise 就是一个类，在执行这个类的时候，需要传递一个执行器进去，执行器会立
2022-05-17 23:56:21
743
2
原创 JavaScript 深度剖析 - 异步编程
同步模式、异步模式、回调函数、Promise、Generator异步方案、async/await语法糖
2022-05-16 16:32:06
282
原创 JavaScript 深度剖析 - 函数式编程范式
文章目录一、为什么要学习函数式编程二、什么是函数式编程三、前置知识3.1 函数是一等公民3.2 高阶函数3.2.1 函数作为参数3.2.2 函数作为返回值3.3 使用高阶函数的意义3.4 常用高阶函数内容介绍为什么要学习函数编程以及什么是函数式编程函数式编程的特性(纯函数、柯里化、函数组合等)函数式编程的应用场景函数式编程库 Lodash一、为什么要学习函数式编程函数式编程是非常古老的一个概念，早于第一台计算机的诞生，函数式编程的历史函数式编程是随着 React 的流行受到越来越多
2022-05-11 22:49:56
248
原创 JavaScript-集合引用类型（迭代与扩展操作 + 本章小结）
文章目录一、迭代与扩展操作二、本章小结一、迭代与扩展操作ECMAScript 6 新增的迭代器和扩展操作符对集合引用类型特别有用。这些新特性让集合类型之间相互操作、复制和修改变得异常方便有 4 种原生集合类型定义了默认迭代器（Array、所有定型数组、Map、Set）这意味着上述所有类型都支持顺序迭代，都可以传入 for-of 循环let iterableThings = [ Array.of(1, 2), typedArr = Int16Array.of(3, 4), new
2022-05-04 22:44:44
777
1
原创 JavaScript-集合引用类型（WeakSet- ES6新特性）
文章目录一、基本 API二、弱值三、不可迭代值四、使用弱集合ECMAScript 6 新增的“弱集合”（WeakSet）是一种新的集合类型，为这门语言带来了集合数据结构WeakSet 是 Set 的“兄弟”类型，其 API 也是 Set 的子集WeakSet 中的“weak”（弱），描述的是 JavaScript 垃圾回收程序对待“弱集合”中值的方式一、基本 API可以使用 new 关键字实例化一个空的 WeakSetconst ws = new WeakSet();弱集合中的值只
2022-05-04 22:24:23
100
原创 JavaScript-集合引用类型（Set- ES6新特性）
文章目录一、基本 API二、顺序与迭代三、定义正式集合操作ECMAScript 6 新增的 Set 是一种新集合类型，为这门语言带来集合数据结构。Set 在很多方面都像是加强的 Map，这是因为它们的大多数 API 和行为都是共有的一、基本 API使用 new 关键字和 Set 构造函数可以创建一个空集合const m = new Set();如果想在创建的同时初始化实例，则可以给 Set 构造函数传入一个可迭代对象，其中需要包含插入到新集合实例中的元素// 使用数组初始化集合c
2022-05-04 22:06:26
578
原创 JavaScript-集合引用类型（WeakMap- ES6新特性）
文章目录一、基本API二、弱键三、不可迭代键四、使用弱映射4.1 私有变量4.2 DOM 节点元数据ECMAScript 6 新增的“弱映射”（WeakMap）是一种新的集合类型，为这门语言带来了增强的键/值对存储机制WeakMap 是 Map 的“兄弟”类型，其 API 也是 Map 的子集WeakMap 中的“weak”（弱），描述的是 JavaScript 垃圾回收程序对待“弱映射”中键的方式一、基本API可以使用 new 关键字实例化一个空的 WeakMapconst wm =
2022-05-04 21:08:39
593
原创 JavaScript-集合引用类型（Map- ES6新特性）
文章目录一、基本 APIECMAScript 6 以前，在 JavaScript 中实现“键/值”式存储可以使用 Object 来方便高效地完成，也就是使用对象属性作为键，再使用属性来引用值。但这种实现并非没有问题，为此 TC39 委员会专门为“键/值”存储定义了一个规范。作为 ECMAScript 6 的新增特性，Map 是一种新的集合类型，为这门语言带来了真正的键/值存储机制Map 的大多数特性都可以通过 Object 类型实现，但二者之间还是存在一些细微的差异。具体实践中使用哪一个，还是值
2022-05-03 22:09:27
674
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人