Blog

Blog copied to clipboard

从零到一开发你的专属JavaScript库

4

## 前言 本项目[jslib-base](https://github.com/logan70/jslib-base)是一个能让开发者轻松开发属于自己的JavaScript库的基础框架。 灵感来源于[颜海镜](https://juejin.im/user/56848f1d60b2fa064c24a4fd)的[8102年如何写一个现代的JavaScript库](https://juejin.im/post/5bbafd78f265da0ad947e6ba)，[项目链接在此](https://github.com/yanhaijing/jslib-base)。 ## 需求简介 最近在项目中需要对内部一款历史悠久的js库进行改造升级，此库使用iife+ES5的方式编写，日后维护及开发存在诸多不便，随即萌生了搭建一个编写js库的基础框架的想法，正好又看到了[颜大的文章](https://juejin.im/post/5bbafd78f265da0ad947e6ba)，说干就干，最终达到的效果如下： - 编写源码支持ES6+和TypeScript - 打包后代码支持多环境（支持浏览器原生，支持AMD，CMD，支持Webpack，Rollup，fis等，支持Node） - 收敛项目相关配置，目录清晰，上手简单 - Tree Shaking: 自动剔除第三方依赖无用代码 - 一键初始化框架 - 自动生成API文档 - 集成代码风格校验 - 集成commit信息校验及增量代码风格校验 - 集成单元测试及测试覆盖率 - 集成可持续构建工具与测试结果上报 ##...

logan70

执行机制 - 使用Promise实现串行

3

# 使用Promise实现串行 `Promise`原型上的`then`方法以及`Async/Await`基本用法大家都熟悉，不作过多介绍。 下面的实现方法本质上也都是基于以上两种用法的拓展。 ## 普通循环 理论上任何循环函数或语法都可实现。 ```js let promise = Promise.resolve() function runPromisesSerially(tasks) { tasks.forEach(task => { promise = promise.then(task) }) return promise } runPromiseSerially([ task1, task2, ... ])...

logan70

原型与原型链 - instanceof的底层实现原理及手动实现

2

# instanceof的底层实现原理及手动实现 ## 作用 `instanceof` 用于检测右侧构造函数的原型是否存在于左侧对象的原型链上。 **`Symbol.hasInstance`** `ES6`新增的内置Symbol，用作对象方法标识符，该方法用于检测任意对象是否为拥有该方法对象的实例。`instanceof`操作符优先使用该`Symbol`对应的属性。 这样一来`instanceof`右侧并非必须为函数，对象也可以的。示例代码如下： ```js const MyArray = { [Symbol.hasInstance](obj) { return Array.isArray(obj) } } expect([] instanceof MyArray).toBe(true) ``` ## 手写实现 ```js const isObj =...

logan70

# 彻底搞懂数组reduce方法 ## 语法 `arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])` ## 参数 - `callback`: 执行数组中每个值 (如果没有提供 `initialValue`则第一个值除外)的函数，包含四个参数： - `accumulator`: 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或`initialValue`（见于下方）。 - `currentValue`: 数组中正在处理的元素。 - `index`(**可选**): 数组中正在处理的当前元素的索引。 如果提供了`initialValue`，则起始索引号为0，否则从索引1起始。 - `array`(**可选**): 调用`reduce()`的数组...

logan70

Bumps [node-fetch](https://github.com/node-fetch/node-fetch) from 2.6.0 to 2.6.7. Release notes Sourced from node-fetch's releases. v2.6.7 Security patch release Recommended to upgrade, to not leak sensitive cookie and authentication header information to 3th...

dependabot[bot]

深入JavaScript系列（二）：执行上下文

8

# 一、执行上下文（Exexution Contexts） > 执行上下文（Exexution Contexts）：用来通过ECMAScript编译器来追踪代码运行时计算的一种规范策略。 **执行上下文**简单理解就是代码执行时所在环境的抽象。 执行上下文同时包含**变量环境组件（VariableEnvironment）**和**词法环境组件（LexicalEnvironment）**，这两个组件多数情况下都指向相同的**词法环境（Lexical Environment）**，那为什么还要存在两个环境组件呢？我们稍后将进行详细讨论。如果不太了解词法环境的可以看下我的上一篇文章[深入ECMAScript系列（一）：词法环境](https://juejin.im/post/5c0a398be51d451dcb0400b3)。 ```js ExecutionContext = { VariableEnvironment: { ... }, LexicalEnvironment: { ... }, } ``` # 二、执行上下文栈 **执行上下文栈（Execution Context Stack）**：是一个后进先出的栈式结构（LIFO），用来跟踪维护执行上下文。**运行执行上下文（running execution context）**...

logan70

深入JavaScript系列（一）：词法环境

1

# 一、词法环境 （Lexical Environment） > **ECMAScript规范中对词法环境的描述如下**：词法环境是用来定义 基于词法嵌套结构的ECMAScript代码内的标识符与变量值和函数值之间的关联关系 的一种规范类型。一个词法环境由环境记录（Environment Record）和一个可能为`null`的对外部词法环境的引用（outer）组成。一般来说，词法环境都与特定的ECMAScript代码语法结构相关联，例如函数、代码块、`TryCatch`中的`Catch`从句，并且每次执行这类代码时都会创建新的词法环境。 简而言之，**词法环境**就是相应代码块内**标识符与值的关联关系**的体现。如果之前了解过**作用域**概念的话，和**词法环境**是类似的（ES6之后**作用域**概念变为**词法环境**概念）。 词法环境有两个组成部分： 1. **环境记录（Environment Record）**：记录相应代码块的标识符绑定。 >可以理解为相应代码块内的所有变量声明、函数声明（代码块若为函数还包括其形参）都储存于此 >对应ES6之前的变量对象or活动对象，没了解过的可忽略 2. **对外部词法环境的引用（outer）**：用于形成多个词法环境在逻辑上的嵌套结构，以实现可以访问外部词法环境变量的能力。 > 词法环境在逻辑上的嵌套结构对应ES6之前的作用域，没了解过的可忽略 # 二、环境记录（Environment Record） 环境记录有三种类型，分别是**声明式环境记录（Declarative Environment Record）**、**对象式环境记录（Object Environment Record）**、**全局环境记录（Global Environment Record）**。...

logan70

变量和类型 - 变量在内存中的具体存储形式

2

# 变量在内存中的具体存储形式 ## 基本类型变量的存储 - 基本类型变量存储在**栈内存**中； - JS中基本类型值是不可变的，故基本类型变量改变时都会为变量重新分配内存并存储值。 下面例子说明了基本类型变量的声明、赋值及改变的过程。 ```js // Step 1. `myNumber` -> Address: 0012CCGWH80 -> Value: 23 let myNumber = 23 // Step 2. `newVar` -> Address:...

logan70

```js const PENDING = 'pending' const FULFILLED = 'fulfilled' const REJECTED = 'rejected' const queueMicrotask = typeof window !== 'undefined' ? window.queueMicrotask : process.nextTick class Promise { constructor(excutor) { this.state...

logan70

# 实现数组方法（下） 所有数组方法的实现均忽略参数校验、边界条件判断，主要关注核心逻辑的实现。 部分数组方法会基于`Array.prototype.reduce`方法来实现，关于`reduce`方法的讲解及实现详见[彻底搞懂数组reduce方法](https://github.com/logan70/Blog/issues/40) ## Array.prototype.push() [MDN - Array.prototype.push()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push) `push()`方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。 `push()`方法可用于类数组对象，需要注意的是length不存在或无法转为数值时，将被设置为0，并从索引0开始添加元素。 ```js Array.prototype._push = function(...args) { const len = Number(this.length) || 0 this.length = len for (arg of args) {...

logan70