赛里木湖畔的博客

学习脚手架第四节：脚手架的命令注册和参数解析

Varilly — Mon, 02 Sep 2024 23:51:50 +0800

我们通过 nodejs 的process模块获取到命令行参数，并进行一系列逻辑判断，实现用户输入命令，执行命令对应的操作（这里用模拟操作)在实际项目应用中，一般会借助生成脚手架的框架来实现。目前市场占有率较高的脚手架框架是yargs和commander。那我们熟悉的脚手架vue-cli就是使用commander框架实现，学习 vue-cli 源码，首先要了解 commander 框架的基本实现。下一节就来看看 commander 框架的一些基础配置。

学习脚手架第三节：脚手架的分包和多模块调试

Varilly — Sat, 10 Aug 2024 19:17:49 +0800

本篇讲述了脚手架单模块和多模块的调试，如何在线上环境和本地调试环境中来回切换，本地调试可以方便更好的开发。

从 Underscore.js 源码解读节流(throttle) 和防抖(debounce)函数

Varilly — Thu, 08 Aug 2024 20:32:09 +0800

具体效果可以看下面视频演示。整体简化版本：更好理解。节流防抖函数效果演示。

学习脚手架第一节：从 vue-cli 探究脚手架原理

Varilly — Mon, 05 Aug 2024 20:31:31 +0800

脚手架本质是一个操作系统的客户端在终端中去执行一个命令，这个命令本身它就是一个客户端我们其实可以把脚手架理解为操作系统的一个客户端通过命令去执行它的时候，这个命令往往是这样的一个构造，如下比如：要创建一个vue的项目的时候, $上面这条命令由3个部分组成主命令: vue这个 command 是子命令，实际上它向脚手架(主命令)发送一个请求这个请求，让我们的脚手架帮我们完成一个动作，完成这个动作，就是create创建项目。

学习脚手架第二节：使用原生 Node.js 开发脚手架

Varilly — Sun, 04 Aug 2024 21:29:15 +0800

参考前端架构: 从vue-cli探究脚手架原理windows 系统可以用 git bash 执行which vue命令。git bash 模拟 unix 命令行终端，不仅可以进行 git 版本管理，也可以执行 shell 脚本命令创建 npm 项目创建脚手架入口文件，最上方添加。表示用 nodejs 执行配置，添加bin属性。bin 属性用于定义可执行文件的路径，是命令名到本地文件名的映射，编写脚手架代码发布到 npm。

Event Loop 事件循环机制 & Promise async/await 执行顺序问题

Varilly — Sat, 27 Jul 2024 18:09:37 +0800

await 之前的代码可以看做是同步的，await 右侧紧跟着的，也可以看作是同步的。await 下面的，被阻塞，整体看作是 Promise.then() 微任务。减少了 await 任务的循环次数，从而提高效能，通过直接调用 PromiseResolve() 代替之前的又一层 Promise封装。其中：defineProperty 和 Proxy 可被监听的数据拦截，本质上都是通过回调处理的，不是立刻执行的。js执行任务分为宏任务和微任务，宏任务放在任务队列，微任务放在微任务队列，先进先出（FIFO）。

js原型和原型链继承

Varilly — Sat, 20 Jul 2024 12:01:43 +0800

通俗来说，就是子类能够继承父类构造函数及原型对象上的属性和方法。那么怎么实现继承呢？：在组合式继承的基础上，使用Object.create创建空对象，并实现继承。：因为实例对象上有构造函数和他的原型对象上的所有属性和方法，被所有实例共享。父类为 Person，子类为Student，以下几种实现方法同上。父类为 Person，子类为Student。：在子类构造函数中直接调用父类构造函数。问题：父类构造函数被执行了两次。：将以上两种方法组合起来使用。

JS实现深拷贝(深克隆)和浅拷贝(浅克隆)

Varilly — Tue, 22 Sep 2020 09:34:19 +0800

什么是深拷贝与浅拷贝浅拷贝：只复制对象的基本类型，对于引用类型，只是克隆地址数组的 Array.from(item) 方法就是实现的浅拷贝深拷贝：复制对象的基本类型和引用类型引用类型，只是克隆地址，那么原对象修改，克隆后的新对象也会跟着变化，克隆不彻底深拷贝的代码实现实现深拷贝需要用到递归的思想具体代码如下： // 实现深拷贝 function deepClone(val) { //判断是普通类型或是null直接返回 if (typeof val !== 'object' || val

JS数组去重的方法Array

Varilly — Mon, 21 Sep 2020 19:42:24 +0800

数组去重的方法方法一：对象的属性不能重复 function unique1(arr) { var newArr = [] var obj = {} for (var key of arr) { //for of的key获取属性值 if (obj[key] === undefined) { //如果对象没有该属性值 newArr.push(key); //就将新数组末尾添加改属性值 obj[key] = 1; //并将对象中强行添加该属性 } }

JavaScript中数组的方法总结(map,forEach,reduce,some,every,filter,indexOf...)

Varilly — Thu, 17 Sep 2020 17:33:04 +0800

Document