luoleiself's blog

Generator

Generator 函数是 ES6 提供的一种异步编程解决方案, 语法行为和传统普通函数完全不同, Generator 函数是一个状态机, 封装了多个内部状态, 执行函数会返回一个迭代器对象, 返回的迭代器对象可以依次遍历 Generator 函数内部的每一个状态.

• function 关键字和函数名之间有一个星号, 星号写在哪个位置都可以
• 函数体内部使用 yield 表达式定义不同的状态

1
2
3
4
5
6
7
8
9
10
11
12

function* helloWorld() {
  yield 'hello';
  yield 'world';
}

var gen = helloWorld();
gen.next();
// { value: 'hello', done: false }
gen.next();
// { value: 'world', done: false }
gen.next();
// { value: undefined, done: true }

调用 Generator 函数, 返回一个迭代器对象, 代表 Generator 函数的内部指针, 每次调用迭代器对象的 next 方法, 就会返回一个包含 value 和 done 属性的对象, value 属性表示当前的内部状态(yield 表达式)的值, done 属性表示遍历是否结束的 boolean 值

yield 表达式

yield 表达式只能用在 Generator 函数里面, 用在其他地方都会报错

1. 遇到 yield 表达式, 就暂停执行后面的操作, 并将 yield 后面紧跟的表达式的值作为返回对象的 value 属性值
2. 下一次调用 next 方法时, 再继续往下执行, 直到遇到下一个 yield 表达式
3. 如果没有再遇到新的 yield 表达式, 就一直运行到函数结束, 直到 return 语句为止, 并将 return 语句后面的表达式的值作为返回的对象的 value 属性值
4. 如果该函数没有 return 语句, 则返回的对象的 value 属性值为 undefined

• String.prototype.substr()

  并非 JavaScript 核心语言的一部分,未来将可能被移除掉, 建议使用 substring() 代替

• arguments.callee

  ES5 严格模式下禁止使用此方法，建议使用方法名调用自己

• Function.arguments 已废弃

  是一个类数组对象,表示传入函数的实参. 在函数内部直接使用 arguments 对象访问

• regexObj.compile 已废弃

  用于编译正则表达式, 和 RegExp 构造函数的作用基本一样

• Date.prototype.getYear 已废弃

  使用 getFullYear 代替

• Date.prototype.setYear 已废弃

  使用 setFullYear 代替

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具, webpack 处理应用程序时会在内部构建一个依赖图, 此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle

plugin 是 webpack 生态的关键部分, 采用基于事件流的机制, 将各个插件串联起来完成相关的功能, compiler 模块是 webpack 的主要引擎, 它扩展(extend)自 Tapable 类, 用来注册和调用插件.

Tapable 是一个用于事件发布订阅执行的插件架构, 类似于 Node.js 的 EventEmitter 库.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const {
  SyncHook,
  SyncBailHook,
  SyncWaterfallHook,
  SyncLoopHook,
  AsyncParallelHook,
  AsyncParallelBailHook,
  AsyncSeriesHook,
  AsyncSeriesBailHook,
  AsyncSeriesWaterfallHook,
  AsyncSeriesLoopHook,
  HookMap,
  MultiHook,
} = require('tapable');

钩子分类

参数

所有 Hook 构造函数都接收一个由参数名称为字符串组成的列表作为可选参数

执行方式

Basic Hook (基础)

钩子调用所在行中调用的每个钩子函数

WaterFall (瀑布)

与基础钩子不同, 它将一个返回值从每个函数传递到下一个函数

Bail (保证)

钩子函数执行中, 只要其中有一个钩子返回 非 undefined 时, 则剩余的钩子函数不再执行

Loop (循环)

循环执行钩子, 当循环钩子函数返回 非 undefined 时, 则从第一个钩子重新启动, 直到所有的钩子返回 undefined 时结束

概念

是异步编程的一种解决方案, 解决 js 异步回调地狱的问题

• 状态唯一

  • pending: 初始状态, 既没有被兑现, 也没有被拒绝
  • fulfilled: 操作成功完成
  • rejected: 操作失败

• 状态不受外界影响

• Promise.prototype.then 最多接收两个参数, 用于 promise 兑现和拒绝情况的回调函数, 并立即返回一个新的处于待定状态的 promise 对象, 允许链接到其他的 promise 方法实现链式调用

  • 返回的 promise 对象(称之为 p )的行为取决于处理函数(参数函数)的执行结果
  • 处理函数返回值
    • 没有返回值, p 以 undefined 作为其兑现值
    • 返回一个值, p 以该返回值作为其兑现值
    • 抛出一个错误, p 抛出的错误作为其拒绝值
    • 返回一个已兑现的 promise 对象, p 以该 promise 的值作为其兑现值
    • 返回一个已拒绝的 promise 对象, p 以该 promise 的值作为其拒绝值
    • 返回另一个待定的 promise 对象, p 保持待定状态, 并在该 promise 对象被兑现/拒绝后立即以该 promise 的值作为其兑现/拒绝值

简单用法

1
2
3
4
5
6

let p = new Promise((resolve, reject) => {
  resolve(200);
});
p.then((res) => {
  console.log(res);
});

全局 API

应用实例 API

调用 createApp 返回一个应用实例，该实例提供了一个应用上下文, 应用实例挂载的整个组件树共享相同的上下文

createApp()

创建一个应用实例

• 参数
  • {Object} rootComponent 根组件选项
  • {Object} rootProps 传递给根组件的 props

1
2
3
4
5
6
7
8
9

import { createApp } from 'vue';
const app = createApp(
  {
    /* root component options */
  },
  {
    /* root component props */
  }
);

createSSRApp()

以 SSR 模式创建一个应用实例, 用法和 createApp() 相同

app.mount()

将应用实例挂载到一个容器元素中

• 参数可以是一个实际的 DOM 元素或一个 CSS 选择器, 返回根组件实例
• 如果该组件有 template 模板或定义了 render 函数, 则替换容器内所有现存的 DOM 节点, 否则使用容器元素的 innerHTML 作为模板

1
2
3
4
5
6
7
8
9

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp({
  /* */
});

// app.mount('#app');
app.mount(App);

app.unmount()

卸载一个已挂载的应用实例, 同时触发该应用组件树内所有组件的卸载生命周期钩子

app.onUnmount()

Vue 3.5 支持

注册一个回调函数, 在应用卸载时调用

1
2
3

app.onUnmount(() => {
  /*...*/
})

app.component()

注册或查找全局组件, 根据参数个数区分

1
2
3
4
5
6
7

import { createApp } from 'vue';
const app = createApp(/* */);
app.component('my-component', {
  /*组件配置项*/
});

app.component('my-component'); // 查找已注册的组件

其他篇

submodule 仓库

submodule init 初始化

1

git submodule init [<path>]

submodule deinit 删除

1
2

git submodule deinit [-f]
git submodule deinit [--all]

操作篇

初始化仓库

1

git init [project-name]

克隆仓库

1

git clone [url]

分支

查看

• a|all: 列出所有本地和关联远程分支

• r: 列出关联远程分支

• v|verbose: 列出分支并显示当前提交信息摘要

  1	git branch [-a] [-r] [-v]

配置篇

概念

结构型概念

Remote

远程仓库, 托管代码的服务器, 团队协作开发时都与此进行同步

Repository

本机仓库(或版本库), 管理所有被提交的代码版本, 其中 HEAD 指向最新放入仓库的版本

Index / Stage

暂存区, 临时存放改动的需要被提交的文件列表信息

Workspace

工作区, 当前可见的随时可以进行操作的区域

功能型概念

文件状态

• 修改: Git 可以感知到工作目录中的文件的变化, 然后通过 add 命令可以将变更的文件添加到暂存区
• 暂存: 通过 add 命令将工作目录中的变更的文件提交到暂存区, 等候被 commit
• 提交: 将暂存区的文件 commit 至 Git 版本库中永久保存

commit 节点

Git 中每次的提交都会对提交的文件生成快照并生成一个 hash 值作为唯一标识的节点, 不管 HEAD 或者 Branch 都是对 commit 节点的引用

HEAD

指针或者引用, 一个仓库中只能有一个 HEAD, 指向任意一个节点/分支,并且指向的节点始终为当前工作目录

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment