ixlei / jsnotes Goto Github PK

1.0 1.0 1.0 344 KB

jsnotes's Introduction

javascript notes

console.log('hello javascript world!');

jsnotes's People

Contributors

Stargazers

Watchers

Forkers

zhangchongzc

jsnotes's Issues

谈起音视频，前端能做些什么

@(音视频)[Audio|Video|MSE]

音视频随着互联网的发展，对音视频的需求越来越多，然而音视频无乱是播放还是编解码，封装对性能要求都比较高，那现阶段的前端再音视频领域都能做些什么呢。

[TOC]

音频或视频的播放

html5 audio

提起音视频的播放，我萌首先想到的是HTMLMediaElement，video播放视频，audio播放音频。举个栗子：

<audio controls autoplay loop="true" preload="auto" src="audio.mp3"></audio>

controls指定浏览器渲染成html5 audio.
autoplay属性告诉浏览器，当加载完的时候，自动播放.
loop属性循环播放.
preload当渲染到audio元素时，便加载音频文件.
移动端的浏览器并不支持autoplay和preload 属性，即不会自动加载音频文件，只有通过一些事件触发，比如touch、click事件等触发加载然后播放.
媒体元素还有一些改变音量，某段音频播放完成事件等，请阅读HTMLMediaElement.
当然如果你的网页是跑在WebView中，可以让客户端设置一些属性实现预加载和自动播放。

AudioContext

虽然使用html5的audio可以播放音频，但是正如你看到存在很多问题，同时我萌不能对音频的播放进行很好的控制，比如说从网络中获取到音频二进制数据，有的时候我萌想顺序播放多段音频，对于使用audio元素也是力不从心，处理起来并不优雅。
举个栗子：

function queuePlayAudio(sounds) {
	let index = 0;
	function recursivePlay(sounds, index) {
		if(sounds.length == index) return;
		sounds[index].play();
		sounds[index].onended = recursivePlay.bind(this, sounds, ++index);
	}
}

监听audio元素的 onended 事件，顺序播放。

为了更好的控制音频播放，我萌需要AudioContext.

AudioContext接口表示由音频模块连接而成的音频处理图，每个模块对应一个AudioNode。AudioContext可以控制它所包含的节点的创建，以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext对象，因为一切都发生在这个环境之中。

可能理解起来比较晦涩，简单的来说，AudioContext 像是一个工厂，对于一个音频的播放，从音源到声音控制，到链接播放硬件的实现播放，都是由各个模块负责处理，通过connect 实现流程的控制。

现在我萌便能实现音频的播放控制，比如从网络中获取。利用AJAX中获取 arraybuffer类型数据，通过解码，然后把音频的二进制数据传给AudioContext创建的BufferSourceNode，最后通过链接 destination 模块实现音频的播放。

   export default class PlaySoundWithAudioContext {
	constructor() {
	        if(PlaySoundWithAudioContext.isSupportAudioContext()) {
	            this.duration = 0;
	            this.currentTime = 0;
	            this.nextTime = 0;
	            this.pending = [];
	            this.mutex = false;
	            this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
	        }
	    }
	    static isSupportAudioContext() {
	        return window.AudioContext || window.webkitAudioContext;
	    }

	   play(buffer) {
	        var source = this.audioContext.createBufferSource(); 
	        source.buffer = buffer;                  
	        source.connect(this.audioContext.destination); 
	        source.start(this.nextTime);
	        this.nextTime += source.buffer.duration;
	    }

    addChunks(buffer) {
        this.pending.push(buffer);
        let customer = () => {
            if(!this.pending.length) return;
            let buffer = this.pending.shift();
            this.audioContext.decodeAudioData(buffer, buffer => {
            this.play(buffer);
            console.log(buffer)
            if(this.pending.length) {
                customer()
            }
            }, (err) => {
                console.log('decode audio data error', err);
            });
        }
        if(!this.mutex) {
            this.mutex = true;
            customer()
        }
       
    }

    clearAll() {
        this.duration = 0;
        this.currentTime = 0;
        this.nextTime = 0;
    }
}

AJAX调用

function xhr() {
    var XHR = new XMLHttpRequest();
   XHR.open('GET', '//example.com/audio.mp3');
  XHR.responseType = 'arraybuffer';
  XHR.onreadystatechange = function(e) {
      if(XHR.readyState == 4) {
         if(XHR.status == 200) {
	   playSoundWithAudioContext.addChunks(XHR.response);
	}
      }
   }
  XHR.send();
}

使用Ajax播放对于小段的音频文件还行，但是一大段音频文件来说，等到下载完成才播放，不太现实，能否一边下载一边播放呢。这里就要利用 fetch 实现加载stream流。

fetch(url).then((res) => {
    if(res.ok && (res.status >= 200 && res.status <= 299)) {
        readData(res.body.getReader())
    } else {
        that.postMessage({type: constants.LOAD_ERROR})
    }
})

function readData(reader) {
    reader.read().then((result) => {
        if(result.done) {
            return;
        }
        console.log(result);
        playSoundWithAudioContext.addChunks(result.value.buffer);
    })
}

简单的来说，就是fetch的response返回一个readableStream接口，通过从中读取流，不断的喂给audioContext 实现播放，测试发现移动端不能顺利实现播放，pc端浏览器可以。

PCM audio

实现audioContext播放时，我萌需要解码，利用decodeAudioDataapi实现解码，我萌都知道，一般音频都要压缩成mp3，aac这样的编码格式，我萌需要先解码成PCM数据才能播放，那PCM 又是什么呢？我萌都知道，声音都是由物体振动产生，但是这样的声波无法被计算机存储计算，我萌需要使用某种方式去刻画声音，于是乎便有了PCM格式的数据，表示麦克风采集声音的频率，采集的位数以及声道数，立体声还是单声道。

Media Source Extensions

Media Source Extensions可以动态的给Audio和Video创建stream流，实现播放，简单的来说，可以很好的播放进行控制，比如再播放的时候实现 seek 功能什么的，也可以在前端对某种格式进行转换进行播放，并不是支持所有的格式的。

通过将数据append进SourceBuffer中，MSE把这些数据存进缓冲区，解码实现播放。这里简单的举个使用MSE播放 audio的栗子：

export default class PlaySoundWithMSE{
    constructor(audio) {
        this.audio = audio;
        if(PlaySoundWithMSE.isSupportMSE()) {
            this.pendingBuffer = [];
            this._mediaSource = new MediaSource();
            this.audio.src = URL.createObjectURL(this._mediaSource);
            this._mediaSource.addEventListener('sourceopen', () => {
                this.sourcebuffer = this._mediaSource.addSourceBuffer('audio/mpeg');
                this.sourcebuffer.addEventListener('updateend', 
                this.handleSourceBufferUpdateEnd.bind(this));
            })
        }
    }

    addBuffer(buffer) {
        this.pendingBuffer.push(buffer);
    }

    handleSourceBufferUpdateEnd() {
        if(this.pendingBuffer.length) {
            this.sourcebuffer.appendBuffer(this.pendingBuffer.shift());
        } else {
            this._mediaSource.endOfStream();
        }
    }

    static isSupportMSE() {
        return !!window.MediaSource;
    }
}

HTML5 播放器

谈起html5播放器，你可能知道bilibili的flv.js,它便是依赖Media Source Extensions将flv编码格式的视频转包装成mp4格式，然后实现播放。

从流程图中可以看到，IOController实现对视频流的加载，这里支持fetch的 stream能力，WebSocket等，将得到的视频流，这里指的是flv格式的视频流，将其转封装成MP4格式，最后将MP4格式的数据通过appendBuffer将数据喂给MSE,实现播放。

未来

上面谈到的都是视频的播放，你也看到，即使播放都存在很多限制，MSE的浏览器支持还不多，那在视频的编码解码这些要求性能很高的领域，前端能否做一些事情呢？
前端性能不高有很多原因，在浏览器这样的沙盒环境下，同时js这种动态语言，性能不高，所以有大佬提出把c++编译成js ,然后提高性能，或许你已经知道我要说的是什么了，它就是ASM.js，它是js的一种严格子集。我萌可以考虑将一些视频编码库编译成js去运行提高性能，其中就不得不提到的FFmpeg,可以考虑到将其编译成asm,然后对视频进行编解码。

写在最后

我萌可以看到，前端对音视频的处理上由于诸多原因，可谓如履薄冰，但是在视频播放上，随着浏览器的支持，还是可以有所作为的。

Rollup

下一代打包工具，这是rollup对自己的定位。如今的前端领域，构建工具并不缺少，每个前端工程师都用过或者听过webpack。可以看到的是像React、Vue等框架的构建工具使用的都是rollup。既然如此，这些框架为什么会选择rollup？它的特性是什么？面对不同场景，我们要怎么选择构建工具？本文将一一为你呈现。

Tree Shaking

tree shaking是rollup提出的，这也是rollup一个非常重要的feature，那什么是tree shaking，rollup的解释是在构建代码时，在使用ES6模块化的代码中，会对你的代码进行静态分析，只打包使用到的代码。这样的好处是减少代码的体积。

可以看到它的实现依赖于静态分析，为什么必须使用ES6 modules呢？我们来复习一下ES6 modules的几个特性：

import 的模块名只能是字符串常量
import binding 是 immutable 的，类似 const
只能作为模块顶层的语句出现，不能出现在 function 里面或是 if 里面等块级作用域中
import hoisted，不管 import 的语句出现的位置在哪里，在模块初始化的时候所有的import 都必须已经导入完成。

以上特性使得ES6 Modules缺少了一定的灵活性，但使得所有的依赖都是确定的，能够对代码进行静态分析。不需要依靠运行时去确定依赖关系。
举个栗子:
maths.js

// maths.js
export function square ( x ) {
	return x * x;
}
export function cube ( x ) {
	return x * x * x;
}

main.js

import { cube } from './maths.js';
console.log( cube( 5 ) );

执行下面的命令后

$ rollup main.js --o bundle.js --f iife

输出bundle.js

(function () {
'use strict';

// maths.js

function cube(x) {
    return x * x * x;
}

console.log(cube(5));

}());

可以看到，maths.js中square方法没有使用到，没有打包到构建结果中。在构建的时候，加了个参数f,值为iife的选项，构建的后代码的组织形式被一个立即执行函数包裹。

代码构建后输出格式

上面在构建的时候指定了参数f,值为iife的选项，输出了立即执行风格的构建代码，rollup还支持下面几种输出格式：

amd - AMD
cjs -CommonJS
es - ES6 modules
umd - UMD
system - SystemJS loader

在构建代码的时候，可以根据代码运行环境选择不同的输出格式，如果你的代码是运行在node中那么cjs就可以，如果你的代码运行在浏览器环境中，那么iife就很好，如果两者兼具，那么选择umd。
在webpack的编译&构建中，提到webpack构建输出的代码其实有三种。

你的业务逻辑代码
Runtime - 代码执行的引导
Manifest - 模块依赖关系的记录

如果我们对main.js执行下面的命令构建后

webpack main.js dist.js

输出dist.js

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, {
/******/ 				configurable: false,
/******/ 				enumerable: true,
/******/ 				get: getter
/******/ 			});
/******/ 		}
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__maths_js__ = __webpack_require__(1);

console.log(Object(__WEBPACK_IMPORTED_MODULE_0__maths_js__["a" /* cube */])(5));

/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* unused harmony export square */
/* harmony export (immutable) */ __webpack_exports__["a"] = cube;
// maths.js
function square(x) {
    return x * x;
}
function cube(x) {
    return x * x * x;
}

/***/ })
/******/ ]);

可以看到构建结果中的业务逻辑代码，Runtime和Manifest
在Manifest中记录中依赖关系，通过__webpack_require__加载
构建结果中包含了没有使用到的square
构建体积明显比rollup中iife格式大
代码执行的时候，rollup中iife输出格式，代码执行的速度更快，webpack构建出来的还有依赖查找，而且每个模块通过一个函数包裹形式，执行的时候，就形成了一个个的闭包，占用了内存，当然可以在webpack3使用ConcatenationPlugin插件优化这样的输出格式，打包到一个依赖中

对于性能方面the-cost-of-small-modules做了很好的测评，可以了解一下。

没有银弹

webpack诞生的时候，为了解决css、图片等静态文件的构建和使得代码能够按需加载实现了code-splitting，在我们日常线上业务代码开发中，或多或少有一些静态资源需要打包，此时rollup显得不太适用。所以我们可以看到，在构建一些lib的时候可以选择rollup,而在构建一些应用的时候，选择webpack.

puppeteer爬虫的奇妙之旅

@(爬虫)[puppeteer|]

爬虫又称网络机器人。每天或许你都会使用搜索引擎，爬虫便是搜索引擎重要的组成部分，爬取内容做索引。现如今大数据，数据分析很火，那数据哪里来呢，可以通过网络爬虫爬取啊。那我萌就来探讨一下网络爬虫吧。

[TOC]

爬虫的工作原理

如图所示，这是爬虫的流程图，可以看到通过一个种子URL开启爬虫的爬取之旅，通过下载网页，解析网页中内容存储，同时解析中网页中的URL 去除重复后加入到等待爬取的队列。然后从队列中取到下一个等待爬取的URL重复以上步骤，是不是很简单呢？

广度（BFS）还是深度（DFS）优先策略

上面也提到在爬取完一个网页后从等待爬取的队列中选取一个URL去爬去，那如何选择呢？是选择当前爬取网页中的URL 还是继续选取当前URL中同级URL呢？这里的同级URL是指来自同一个网页的URL，这就是爬取策略之分。

广度优先策略（BFS）

广度优先策略便是将当前某个网页中URL先爬取完全，再去爬取从当前网页中的URL爬取的URL，这就是BFS，如果上图的关系图表示网页的关系，那么BFS的爬取策略将会是：（A->(B,D,F,G)->(C,F));

深度优先策略（DFS）

深度优先策略爬取某个网页，然后继续去爬取从网页中解析出的URL，直到爬取完。
（A->B->C->D->E->F->G)

下载网页

下载网页看起来很简单，就像在浏览器中输入链接一样，下载完后浏览器便能显示出来。当然结果是并不是这样的简单。
####模拟登录
对于一些网页来说需要登录才能看到网页中内容，那爬虫怎么登录呢？其实登录的过程就是获取访问的凭证（cookie,token...)

let cookie = '';
let j = request.jar()
async function login() {
    if (cookie) {
        return await Promise.resolve(cookie);
    }
    return await new Promise((resolve, reject) => {
        request.post({
            url: 'url',
            form: {
                m: 'username',
                p: 'password',
            },
            jar: j
        }, function(err, res, body) {
            if (err) {
                reject(err);
                return;
            }
            cookie = j.getCookieString('url');
            resolve(cookie);
        })
    })
}

这里是个简单的栗子，登录获取cookie, 然后每次请求都带上cookie.

获取网页内容

有的网页内容是服务端渲染的，没有CGI能够获得数据，只能从html中解析内容，但是有的网站的内容并不是简单的便能获取内容，像linkedin这样的网站并不是简单的能够获得网页内容，网页需要通过浏览器执行后才能获得最终的html结构，那怎么解决呢？前面我萌提到浏览器执行，那么我萌有没有可编程的浏览器呢？puppeteer,谷歌chrome团队开源的无头浏览器项目，利用无头浏览器便能模拟用户访问，便能获取最重网页的内容，抓取内容。
利用puppeteer 模拟登录

async function login(username, password) {
    const browser = await puppeteer.launch();
    page = await browser.newPage();
    await page.setViewport({
        width: 1400,
        height: 1000
    })
    await page.goto('https://maimai.cn/login');
    console.log(page.url())
    await page.focus('input[type=text]');
    await page.type(username, { delay: 100 });
    await page.focus('input[type=password]');
    await page.type(password, { delay: 100 });
    await page.$eval("input[type=submit]", el => el.click());
    await page.waitForNavigation();
    return page;
}

执行login()后便能像在浏览器中登录后，便能像浏览器中登录后便能获取html中的内容，当让w哦萌也可以直接请求CGI

async function crawlData(index, data) {
                    let dataUrl = `https://maimai.cn/company/contacts?count=20&page=${index}&query=&dist=0&cid=${cinfo.cid}&company=${cinfo.encodename}&forcomp=1&searchTokens=&highlight=false&school=&me=&webcname=&webcid=&jsononly=1`;
                    await page.goto(dataUrl);
                    let res = await page.evaluate((e) => {
                        return document.body.querySelector('pre').innerHTML;
                    });
                    console.log(res)
                    res = JSON.parse(res);
                    if (res && res.result == 'ok' && res.data.contacts && res.data.contacts.length) {
                        data = data.concat(res.data.contacts.map((item) => {
                            let contact = item.contact;
                            console.log(contact.name)
                            return {
                                name: contact.name,
                                occupation: contact.line4.split('，')[0],
                                company: contact.company,
                                title: contact.position
                            }
                        }));
                        return await crawlData(++index, data);
                    }
                    return data;
                }

像有的网站，拉钩，每次爬取的cookie都一样，也能利用无头浏览器取爬取，这样每次就不用每次爬取的时候担心cookie.

写在最后

当然爬虫不仅仅这些，更多的是对网站进行分析，找到合适的爬虫策略。对后关于puppeteer,不仅仅可以用来做爬虫，因为可以编程，无头浏览器，可以用来自动化测试等等。

webpack的编译&构建

上一篇文章webpack详解中介绍了webpack基于事件流编程，是个高度的插件集合，整体介绍了webpack 的编译流程。本文将单独聊一聊最核心的部分，编译&构建。

webpack的编译

重要的构建节点

webpack的构建中总会经历如下几个事件节点。

before-run 清除缓存
run 注册缓存数据钩子
compile 开始编译
make 从入口分析依赖以及间接依赖模块，创建模块对象
build-module 模块构建
seal 构建结果封装，不可再更改
after-compile 完成构建，缓存数据
emit 输出到dist目录

其中make是整个构建中最核心的部分编译，通过模块工厂函数创建模块，然后对模块进行编译。

在make钩子的编译

上图中提到的*ModuleFactory是指模块工厂函数，之所以会有模块工厂这样的函数，还要从webpack中entry的配置说起，在webpack的配置项中entry支持如下类型：

字符类型string
字符数组类型[string]
多页面对象key-value类型object { <key>: string | [string] }
也支持一个函数，返回构建的入口(function: () => string | [string] | object { <key>: string | [string] })

为了处理以后不同类型的入口模块，所以就需要个模块工厂来处理不同的入口模块类型。

singleEntry: string｜object { <key>: string }
multiEntry： [string]|object { <key>: [string] }
dynamicEntry： (function: () => string | [string] | object { <key>: string | [string] })

上图中为了简单说明构建的流程，就以最直接的singleEntry类型说起，对于此类入口模块，webpack均使用NormalModuleFactory来创建模块,这个创建的模块的类型叫NormalModule，在NormalModule中实现了模块的构建方法build，使用runLoaders对模块进行加载，然后利用进行解析，分析模块依赖，递归构建。

构建封装seal

到构建封装阶段时候，代码构建已经完毕，但是如何将这些代码按照依赖引用逻辑组织起来，当浏览器将你构建出来的代码加载到浏览器的时候，仍然能够正确执行。在webpack中通过Manifest记录各个模块的详细要点，通过Runtime来引导，加载执行模块代码，特别是异步加载。

###Runtime
如上所述，我们这里只简略地介绍一下。runtime，以及伴随的 manifest 数据，主要是指：在浏览器运行时，webpack 用来连接模块化的应用程序的所有代码。runtime 包含：在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。

###Manifest
那么，一旦你的应用程序中，形如 index.html 文件、一些 bundle 和各种资源加载到浏览器中，会发生什么？你精心安排的 /src 目录的文件结构现在已经不存在，所以 webpack 如何管理所有模块之间的交互呢？这就是 manifest 数据用途的由来……
当编译器(compiler)开始执行、解析和映射应用程序时，它会保留所有模块的详细要点。这个数据集合称为 "Manifest"，当完成打包并发送到浏览器时，会在运行时通过 Manifest 来解析和加载模块。无论你选择哪种模块语法，那些 import 或 require 语句现在都已经转换为 webpack_require 方法，此方法指向模块标识符(module identifier)。通过使用 manifest 中的数据，runtime 将能够查询模块标识符，检索出背后对应的模块。

定义了一个立即执行函数，声明了__webpack_require__,对各种模块进行加载。

(function(modules) { // webpackBootstrap
    var installedModules = {}; // cache module
    function __webpack_require__(moduleId) { // 模块加载
        // Check if module is in cache
        if (installedModules[moduleId]) {
            return installedModules[moduleId].exports;
        }
        // Create a new module (and put it into the cache)
        var module = installedModules[moduleId] = {
            i: moduleId,
            l: false,
            exports: {}
        };
        // Execute the module function
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        // Flag the module as loaded
        module.l = true;
        // Return the exports of the module
        return module.exports;
    }

    // expose the modules object (__webpack_modules__)
    __webpack_require__.m = modules;

    // expose the module cache
    __webpack_require__.c = installedModules;

    // define getter function for harmony exports
    __webpack_require__.d = function(exports, name, getter) {
        if (!__webpack_require__.o(exports, name)) {
            Object.defineProperty(exports, name, {
                configurable: false,
                enumerable: true,
                get: getter
            });
        }
    };

    // getDefaultExport function for compatibility with non-harmony modules
    __webpack_require__.n = function(module) {
        var getter = module && module.__esModule ?
            function getDefault() { return module['default']; } :
            function getModuleExports() { return module; };
        __webpack_require__.d(getter, 'a', getter);
        return getter;
    };

    // Object.prototype.hasOwnProperty.call
    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

    // __webpack_public_path__
    __webpack_require__.p = "";

    // Load entry module and return exports
    return __webpack_require__(__webpack_require__.s = 0);
})([/**modules*/])

上面提到的代码片段便是webpack构建后在浏览器中执行的引导代码。也就是上面提到的runtime。它是个立即执行函数，那么入参modules便是上面的Manifest,组织各个模块的依赖逻辑。

(function(modules){
	// ...
	// runtime
	function __webpack_require__(moduleId) {
		// 加载逻辑
	}
	// ...
})([function (module, exports, __webpack_require__) {

    var chunk1 = __webpack_require__(1);
    var chunk2 = __webpack_require__(2);
   
}, function (module, exports, __webpack_require__) {

    __webpack_require__(2);
    var chunk1 = 1;
    exports.chunk1 = chunk1;
}, function (module, exports) {

    var chunk2 = 1;
    exports.chunk2 = chunk2;
}])

上面说到了runtime和manifest就是在seal阶段注入的

class Compilation extends Tapable {
   
    seal(callback) {
        this.hooks.seal.call();
        // ...
        if (this.hooks.shouldGenerateChunkAssets.call() !== false) {
            this.hooks.beforeChunkAssets.call();
            this.createChunkAssets();
        }
        // ...
    }
  
    createChunkAssets() {
	    // ...
		for (let i = 0; i < this.chunks.length; i++) {
			const chunk = this.chunks[i];
			// ...
				const template = chunk.hasRuntime() 
					? this.mainTemplate
					: this.chunkTemplate; // 根据是否有runTime选择模块,入口文件是true, 需要异步加载的文件则没有
				const manifest = template.getRenderManifest({ 
					// 生成manifest
					chunk,
					hash: this.hash,
					fullHash: this.fullHash,
					outputOptions,
					moduleTemplates: this.moduleTemplates,
					dependencyTemplates: this.dependencyTemplates
				}); // [{ render(), filenameTemplate, pathOptions, identifier, hash }]
				// ...
    }
}

通过template最后将代码组织起来，上面看到的构建后的代码就是mainTemplate生成的。

写在最后

通过template生成最后代码，构建已经完成，接下来就是将代码输出到dist 目录。

浅谈前端中的错误处理

某一天用户反馈打开的页面白屏幕，怎么定位到产生错误的原因呢？日常某次发布怎么确定发布会没有引入bug呢？此时捕获到代码运行的bug并上报是多么的重要。

既然捕获错误并上报是日常开发中不可缺少的一环，那怎么捕获到错误呢？万能的**try...catch**

try{

throw new Error()

} catch(e) {

// handle error

}

看上去错误捕获是多么的简单，然而下面的场景下就不能捕获到了

try {

setTimeout(() => {

throw new Error('error')

})

} catch (e) {

// handle error

}

你会发现上面的例子中的错误不能正常捕获，看来错误捕获并不是这样简单**try...catch**就能搞定,当然你也可以为异步函数包裹一层**try...catch**来处理。

浏览器中，**window.onerror**来捕获你的错误

window.onerror = function (msg, url, row, col, error) {

console.log('error');

console.log({

msg, url, row, col, error

})

};

捕获到错误后就可以将错误上报，上报方式很简单，你可以通过创建简单的**img**,通过**src**指定上报的地址，当然为了避免上报发送过多的请求，可以对上报进行合并，合并上报。可以定时将数据进行上报到服务端。

但但你去看错误上报的信息的时候，你会发现一些这样的错误**Script error**

因为浏览器的同源策略，对于不同域名的错误，都抛出了**Script error**，怎么解决这个问题呢？特别是现在基本上js资源都会放在cdn上面。

解决方案

1：所有的资源都放在同一个域名下。但是这样也会存在问题是不能利用cdn的优势。

2：增加跨域资源支持，在cdn 上增加支持主域的跨域请求支持，在script 标签加**crossorigin**属性

在使用Promise过程中，如果你没有catch,那么可以这样来捕获错误

window.addEventListener("unhandledrejection", function(err, promise) { 
    // handle error here, for example log   
});

如何在NodeJs中捕获错误

NodeJs中的错误捕获很重要，因为处理不当可能导致服务雪崩而不可用。当然了不仅仅知道如何捕获错误，更应该知道如何避免某些错误。

当你写一个函数的时候，你也许曾经思考过当函数执行的时候出现错误的时候，我是应该直接抛出throw，还是使用callback或者event emitter还是其它方式分发错误呢？
我是否应该检查参数是否是正确的类型，是不是null
如果参数不符合的时候，你怎么办呢？抛出错误还是通过callback等方式分发错误呢？
如果保存足够的错误来复原错误现场呢？
如果去捕获一些异常错误呢？try...catch还是domain

操作错误VS编码错误

1. 操作错误

操作错误往往发生在运行时，并非由于代码bug导致，可能是由于你的系统内存用完了或者是由于文件句柄用完了，也可能是没有网络了等等

2.编码错误

编码错误那就比较容易理解了，可能是undefined却当作函数调用，或者返回了不正确的数据类型，或者内存泄露等等

处理操作错误

你可以记录一下错误，然后什么都不做
你也可以重试，比如因为链接数据库失败了，但是重试需要限制次数
你也可以将错误告诉前端，稍后再试
也许你也可以直接处理，比如某个路径不存在，则创建该路径

处理编码错误

错误编码是不好处理的，因为是由于编码错误导致的。好的办法其实重启该进程，因为

你不确定某个编码错误导致的错误会不会影响其它请求，比如建立数据库链接错误由于编码错误导致不能成功，那么其它错误将导致其它的请求也不可用
或许在错误抛出之前进行IO操作，导致IO句柄无法关闭，这将长期占有内存，可能导致最后内存耗尽整个服务不可用。
上面提到的两点其实都没有解决问题根本，应该在上线前做好测试，并在上线后做好监控，一旦发生类似的错误，就应该监控报警，关注并解决问题

如何分发错误

在同步函数中，直接throw出错误
对于一些异步函数，可以将错误通过callback抛出
async/await可以直接使用try..catch捕获错误
EventEmitter抛出error事件

NodeJs的运维

一个NodeJs运用，仅仅从码层面是很难保证稳定运行的，还要从运维层面去保障。

多进程来管理你的应用

单进程的nodejs一旦挂了，整个服务也就不可用了，所以我萌需要多个进程来保障服务的可用，某个进程只负责处理其它进程的启动，关闭，重启。保障某个进程挂掉后能够立即重启。

可以参考TSW中多进程的设计。master负责对worker的管理，worker和master保持这心跳监测，一旦失去，就立即重启之。

domain

process.on('uncaughtException', function(err) {
    console.error('Error caught in uncaughtException event:', err);
});
process.on('unhandleRejection', function(err) {
  // TODO
})

上面捕获nodejs中异常的时候，可以说是很暴力。但是此时捕获到异常的时候，你已经失去了此时的上下文，这里的上下文可以说是某个请求。假如某个web服务发生了一些异常的时候，还是希望能够返回一些兜底的内容，提升用户使用体验。比如服务端渲染或者同构，即使失败了，也可以返回个静态的html，走降级方案，但是此时的上下文已经丢失了。没有办法了。

function domainMiddleware(options) {
    return async function (ctx, next) {
        const request = ctx.request;
        const d = process.domain || domain.create();
        d.request = request;
        let errHandler = (err) => {
            ctx.set('Content-Type', 'text/html; charset=UTF-8');
            ctx.body = options.staticHtml;
        };
        d.on('error', errHandler);
        d.add(ctx.request);
        d.add(ctx.response);
        try {
            await next();
        } catch(e) {
            errHandler(e)
        }
    }

上面是一个简单的koa2的domain的中间件，利用domain监听error事件，每个请求的Request, Response对象在发生错误的时候，均会触发error 事件，当发生错误的时候，能够在有上下文的基础上，可以走降级方案。

如何避免内存泄露

内存泄漏很常见，特别是前端去写后端程序，闭包运用不当，循环引用等都会导致内存泄漏。

不要阻塞Event Loop的执行，特别是大循环或者IO同步操作
```
for ( var i = 0; i < 10000000; i++ ) {
    var user       = {};
    user.name  = 'outmem';
    user.pass  = '123456';
    user.email = 'outmem[@outmem](/user/outmem).com';
}
```
上面的很长的循环会导致内存泄漏，因为它是一个同步执行的代码，将在进程中执行，V8在循环结束的时候，是没办法回收循环产生的内存的，这会导致内存一直增长。还有可能原因是，这个很长的执行，阻塞了node进入下一个Event loop, 导致队列中堆积了太多等待处理已经准备好的回调，进一步加剧内存的占用。那怎么解决呢？

可以利用setTimeout将操作放在下一个loop中执行，减少长循环，同步IO对进程的阻.阻塞下一个loop 的执行，也会导致应用的性能下降
模块的私有变量和方法都会常驻在内存中

var leakArray = [];   
exports.leak = function () {  
  leakArray.push("leak" + Math.random());  
};

在node中require一个模块的时候，最后都是形成一个单例，也就是只要调用该函数一下，函数内存就会增长，闭包不会被回收，第二是leak方法是一个私有方法，这个方法也会一直存在内存。加入每个请求都会调用一下这个方法，那么内存一会就炸了。

这样的场景其实很常见

// main.js
function Main() {
  this.greeting = 'hello world';
}
module.exports = Main;

var a = require('./main.js')();
var b = require('./main.js')();
a.greeting = 'hello a';
console.log(a.greeting); // hello a
console.log(b.greeting); // hello a

require得到是一个单例，在一个服务端中每一个请求执行的时候，操作的都是一个单例，这样每一次执行产生的变量或者属性都会一直挂在这个对象上，无法回收，占用大量内存。

其实上面可以按照下面的调用方式来调用，每次都产生一个实例，用完回收。

var a = new require('./main.js');
// TODO

有的时候很难避免一些可能产生内存泄漏的问题，可以利用vm每次调用都在一个沙箱环境下调用，用完回收调。

最后就是避免循环引用了，这样也会导致无法回收

webpack详解

webpack是现代前端开发中最火的模块打包工具，只需要通过简单的配置，便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置，便可以轻松实现对代码的构建呢？

webpack的配置

const path = require('path');
module.exports = {
  entry: "./app/entry", // string | object | array
  // Webpack打包的入口
  output: {  // 定义webpack如何输出的选项
    path: path.resolve(__dirname, "dist"), // string
    // 所有输出文件的目标路径
    filename: "[chunkhash].js", // string
    // 「入口(entry chunk)」文件命名模版
    publicPath: "/assets/", // string
    // 构建文件的输出目录
    /* 其它高级配置 */
  },
  module: {  // 模块相关配置
    rules: [ // 配置模块loaders，解析规则
      {
        test: /\.jsx?$/,  // RegExp | string
        include: [ // 和test一样，必须匹配选项
          path.resolve(__dirname, "app")
        ],
        exclude: [ // 必不匹配选项（优先级高于test和include）
          path.resolve(__dirname, "app/demo-files")
        ],
        loader: "babel-loader", // 模块上下文解析
        options: { // loader的可选项
          presets: ["es2015"]
        },
      },
  },
  resolve: { //  解析模块的可选项
    modules: [ // 模块的查找目录
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    extensions: [".js", ".json", ".jsx", ".css"], // 用到的文件的扩展
    alias: { // 模块别名列表
      "module": "new-module"
	  },
  },
  devtool: "source-map", // enum
  // 为浏览器开发者工具添加元数据增强调试
  plugins: [ // 附加插件列表
    // ...
  ],
}

从上面我萌可以看到，webpack配置中需要理解几个核心的概念Entry 、Output、Loaders 、Plugins、 Chunk

Entry：指定webpack开始构建的入口模块，从该模块开始构建并计算出直接或间接依赖的模块或者库
Output：告诉webpack如何命名输出的文件以及输出的目录
Loaders：由于webpack只能处理javascript，所以我萌需要对一些非js文件处理成webpack能够处理的模块，比如sass文件
Plugins：Loaders将各类型的文件处理成webpack能够处理的模块，plugins有着很强的能力。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。但也是最复杂的一个。比如对js文件进行压缩优化的UglifyJsPlugin插件
Chunk：coding split的产物，我萌可以对一些代码打包成一个单独的chunk，比如某些公共模块，去重，更好的利用缓存。或者按需加载某些功能模块，优化加载时间。在webpack3及以前我萌都利用CommonsChunkPlugin将一些公共代码分割成一个chunk，实现单独加载。在webpack4 中CommonsChunkPlugin被废弃，使用SplitChunksPlugin

webpack详解

读到这里，或许你对webpack有一个大概的了解，那webpack 是怎么运行的呢？我萌都知道，webpack是高度复杂抽象的插件集合，理解webpack的运行机制，对于我萌日常定位构建错误以及写一些插件处理构建任务有很大的帮助。

不得不说的tapable

webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。在Tapable1.0之前，也就是webpack3及其以前使用的Tapable，提供了包括

plugin(name:string, handler:function)注册插件到Tapable对象中
apply(…pluginInstances: (AnyPlugin|function)[])调用插件的定义，将事件监听器注册到Tapable实例注册表中
applyPlugins*(name:string, …)多种策略细致地控制事件的触发，包括applyPluginsAsync、applyPluginsParallel等方法实现对事件触发的控制，实现

（1）多个事件连续顺序执行
（2）并行执行
（3）异步执行
（4）一个接一个地执行插件，前面的输出是后一个插件的输入的瀑布流执行顺序
（5）在允许时停止执行插件，即某个插件返回了一个undefined的值，即退出执行
我们可以看到，Tapable就像nodejs中EventEmitter,提供对事件的注册on和触发emit,理解它很重要，看个栗子：比如我萌来写一个插件

function CustomPlugin() {}
CustomPlugin.prototype.apply = function(compiler) {
  compiler.plugin('emit', pluginFunction);
}

在webpack的生命周期中会适时的执行

this.apply*("emit",options)

当然上面提到的Tapable都是1.0版本之前的，如果想深入学习，可以查看Tapable 和事件流
那1.0的Tapable又是什么样的呢？1.0版本发生了巨大的改变，不再是此前的通过plugin注册事件，通过applyPlugins*触发事件调用，那1.0的Tapable是什么呢？

暴露出很多的钩子，可以使用它们为插件创建钩子函数

const {
	SyncHook,
	SyncBailHook,
	SyncWaterfallHook,
	SyncLoopHook,
	AsyncParallelHook,
	AsyncParallelBailHook,
	AsyncSeriesHook,
	AsyncSeriesBailHook,
	AsyncSeriesWaterfallHook
 } = require("tapable");

我萌来看看怎么使用。

class Order {
    constructor() {
        this.hooks = { //hooks
            goods: new SyncHook(['goodsId', 'number']),
            consumer: new AsyncParallelHook(['userId', 'orderId'])
        }
    }

    queryGoods(goodsId, number) {
        this.hooks.goods.call(goodsId, number);
    }

    consumerInfoPromise(userId, orderId) {
        this.hooks.consumer.promise(userId, orderId).then(() => {
            //TODO
        })
    }

    consumerInfoAsync(userId, orderId) {
        this.hooks.consumer.callAsync(userId, orderId, (err, data) => {
            //TODO
        })
    }
}

对于所有的hook的构造函数均接受一个可选的string类型的数组

const hook = new SyncHook(["arg1", "arg2", "arg3"]);

// 调用tap方法注册一个consument
order.hooks.goods.tap('QueryPlugin', (goodsId, number) => {
    return fetchGoods(goodsId, number);
})
// 再添加一个
order.hooks.goods.tap('LoggerPlugin', (goodsId, number) => {
    logger(goodsId, number);
})

// 调用
order.queryGoods('10000000', 1)

对于一个 SyncHook,我们通过tap来添加消费者，通过call来触发钩子的顺序执行。

对于一个非sync*类型的钩子，即async*类型的钩子，我萌还可以通过其它方式注册消费者和调用

// 注册一个sync 钩子
order.hooks.consumer.tap('LoggerPlugin', (userId, orderId) => {
   logger(userId, orderId);
})

order.hooks.consumer.tapAsync('LoginCheckPlugin', (userId, orderId, callback) => {
    LoginCheck(userId, callback);
})

order.hooks.consumer.tapPromise('PayPlugin', (userId, orderId) => {
    return Promise.resolve();
})

// 调用
// 返回Promise
order.consumerInfoPromise('user007', '1024');

//回调函数
order.consumerInfoAsync('user007', '1024')

通过上面的栗子，你可能已经大致了解了Tapable的用法，它的用法

插件注册数量
插件注册的类型（sync, async, promise）
调用的方式（sync, async, promise）
实例钩子的时候参数数量
是否使用了interception

Tapable详解

对于Sync*类型的钩子来说。

注册在该钩子下面的插件的执行顺序都是顺序执行。
只能使用tap注册，不能使用tapPromise和tapAsync注册

// 所有的钩子都继承于Hook
class Sync* extends Hook { 
	tapAsync() { // Sync*类型的钩子不支持tapAsync
		throw new Error("tapAsync is not supported on a Sync*");
	}
	tapPromise() {// Sync*类型的钩子不支持tapPromise
		throw new Error("tapPromise is not supported on a Sync*");
	}
	compile(options) { // 编译代码来按照一定的策略执行Plugin
		factory.setup(this, options);
		return factory.create(options);
	}
}

对于Async*类型钩子

支持tap、tapPromise、tapAsync注册

class AsyncParallelHook extends Hook {
	constructor(args) {
		super(args);
		this.call = this._call = undefined;
	}

	compile(options) {
		factory.setup(this, options);
		return factory.create(options);
	}
}

class Hook {
	constructor(args) {
		if(!Array.isArray(args)) args = [];
		this._args = args; // 实例钩子的时候的string类型的数组
		this.taps = []; // 消费者
		this.interceptors = []; // interceptors
		this.call = this._call =  // 以sync类型方式来调用钩子
		this._createCompileDelegate("call", "sync");
		this.promise = 
		this._promise = // 以promise方式
		this._createCompileDelegate("promise", "promise");
		this.callAsync = 
		this._callAsync = // 以async类型方式来调用
		this._createCompileDelegate("callAsync", "async");
		this._x = undefined; // 
	}

	_createCall(type) {
		return this.compile({
			taps: this.taps,
			interceptors: this.interceptors,
			args: this._args,
			type: type
		});
	}

	_createCompileDelegate(name, type) {
		const lazyCompileHook = (...args) => {
			this[name] = this._createCall(type);
			return this[name](...args);
		};
		return lazyCompileHook;
	}
	// 调用tap 类型注册
	tap(options, fn) {
		// ...
		options = Object.assign({ type: "sync", fn: fn }, options);
		// ...
		this._insert(options);  // 添加到 this.taps中
	}
	// 注册 async类型的钩子
	tapAsync(options, fn) {
		// ...
		options = Object.assign({ type: "async", fn: fn }, options);
		// ...
		this._insert(options); // 添加到 this.taps中
	}
	注册 promise类型钩子
	tapPromise(options, fn) {
		// ...
		options = Object.assign({ type: "promise", fn: fn }, options);
		// ...
		this._insert(options); // 添加到 this.taps中
	}
	
}

每次都是调用tap、tapSync、tapPromise注册不同类型的插件钩子，通过调用call、callAsync 、promise方式调用。其实调用的时候为了按照一定的执行策略执行，调用compile方法快速编译出一个方法来执行这些插件。

const factory = new Sync*CodeFactory();
class Sync* extends Hook { 
	// ...
	compile(options) { // 编译代码来按照一定的策略执行Plugin
		factory.setup(this, options);
		return factory.create(options);
	}
}

class Sync*CodeFactory extends HookCodeFactory {
	content({ onError, onResult, onDone, rethrowIfPossible }) {
		return this.callTapsSeries({
			onError: (i, err) => onError(err),
			onDone,
			rethrowIfPossible
		});
	}
}

compile中调用HookCodeFactory#create方法编译生成执行代码。

class HookCodeFactory {
	constructor(config) {
		this.config = config;
		this.options = undefined;
	}

	create(options) {
		this.init(options);
		switch(this.options.type) {
			case "sync":  // 编译生成sync, 结果直接返回
				return new Function(this.args(), 
				"\"use strict\";\n" + this.header() + this.content({
					// ...
					onResult: result => `return ${result};\n`,
					// ...
				}));
			case "async": // async类型, 异步执行，最后将调用插件执行结果来调用callback,
				return new Function(this.args({
					after: "_callback"
				}), "\"use strict\";\n" + this.header() + this.content({
					// ...
					onResult: result => `_callback(null, ${result});\n`,
					onDone: () => "_callback();\n"
				}));
			case "promise": // 返回promise类型，将结果放在resolve中
				// ...
				code += "return new Promise((_resolve, _reject) => {\n";
				code += "var _sync = true;\n";
				code += this.header();
				code += this.content({
					// ...
					onResult: result => `_resolve(${result});\n`,
					onDone: () => "_resolve();\n"
				});
			    // ...
				return new Function(this.args(), code);
		}
	}
	// callTap 就是执行一些插件，并将结果返回
	callTap(tapIndex, { onError, onResult, onDone, rethrowIfPossible }) {
		let code = "";
		let hasTapCached = false;
		// ...
		code += `var _fn${tapIndex} = ${this.getTapFn(tapIndex)};\n`;
		const tap = this.options.taps[tapIndex];
		switch(tap.type) {
			case "sync":
				// ...
				if(onResult) {
					code += `var _result${tapIndex} = _fn${tapIndex}(${this.args({
						before: tap.context ? "_context" : undefined
					})});\n`;
				} else {
					code += `_fn${tapIndex}(${this.args({
						before: tap.context ? "_context" : undefined
					})});\n`;
				}
				
				if(onResult) { // 结果透传
					code += onResult(`_result${tapIndex}`);
				}
				if(onDone) { // 通知插件执行完毕，可以执行下一个插件
					code += onDone();
				}
				break;
			case "async": //异步执行，插件运行完后再将结果通过执行callback透传
				let cbCode = "";
				if(onResult)
					cbCode += `(_err${tapIndex}, _result${tapIndex}) => {\n`;
				else
					cbCode += `_err${tapIndex} => {\n`;
				cbCode += `if(_err${tapIndex}) {\n`;
				cbCode += onError(`_err${tapIndex}`);
				cbCode += "} else {\n";
				if(onResult) {
					cbCode += onResult(`_result${tapIndex}`);
				}
				
				cbCode += "}\n";
				cbCode += "}";
				code += `_fn${tapIndex}(${this.args({
					before: tap.context ? "_context" : undefined,
					after: cbCode //cbCode将结果透传
				})});\n`;
				break;
			case "promise": // _fn${tapIndex} 就是第tapIndex 个插件，它必须是个Promise类型的插件
				code += `var _hasResult${tapIndex} = false;\n`;
				code += `_fn${tapIndex}(${this.args({
					before: tap.context ? "_context" : undefined
				})}).then(_result${tapIndex} => {\n`;
				code += `_hasResult${tapIndex} = true;\n`;
				if(onResult) {
					code += onResult(`_result${tapIndex}`);
				}
			// ...
				break;
		}
		return code;
	}
	// 按照插件的注册顺序，按照顺序递归调用执行插件
	callTapsSeries({ onError, onResult, onDone, rethrowIfPossible }) {
		// ...
		const firstAsync = this.options.taps.findIndex(t => t.type !== "sync");
		const next = i => {
			// ...
			const done = () => next(i + 1);
			// ...
			return this.callTap(i, {
				// ...
				onResult: onResult && ((result) => {
					return onResult(i, result, done, doneBreak);
				}),
				// ...
			});
		};
		return next(0);
	}

	callTapsLooping({ onError, onDone, rethrowIfPossible }) {
		
		const syncOnly = this.options.taps.every(t => t.type === "sync");
		let code = "";
		if(!syncOnly) {
			code += "var _looper = () => {\n";
			code += "var _loopAsync = false;\n";
		}
		code += "var _loop;\n";
		code += "do {\n";
		code += "_loop = false;\n";
		// ...
		code += this.callTapsSeries({
			// ...
			onResult: (i, result, next, doneBreak) => { // 一旦某个插件返回不为undefined,  即一只调用某个插件执行，如果为undefined,开始调用下一个
				let code = "";
				code += `if(${result} !== undefined) {\n`;
				code += "_loop = true;\n";
				if(!syncOnly)
					code += "if(_loopAsync) _looper();\n";
				code += doneBreak(true);
				code += `} else {\n`;
				code += next();
				code += `}\n`;
				return code;
			},
			// ...
		})
		code += "} while(_loop);\n";
		// ...
		return code;
	}
	// 并行调用插件执行
	callTapsParallel({ onError, onResult, onDone, rethrowIfPossible, onTap = (i, run) => run() }) {
		// ...
		// 遍历注册都所有插件，并调用
		for(let i = 0; i < this.options.taps.length; i++) {
			// ...
			code += "if(_counter <= 0) break;\n";
			code += onTap(i, () => this.callTap(i, {
				// ...
				onResult: onResult && ((result) => {
					let code = "";
					code += "if(_counter > 0) {\n";
					code += onResult(i, result, done, doneBreak);
					code += "}\n";
					return code;
				}),
				// ...
			}), done, doneBreak);
		}
		// ...
		return code;
	}
}

在HookCodeFactory#create中调用到content方法，此方法将按照此钩子的执行策略，调用不同的方法来执行编译生成最终的代码。

SyncHook中调用`callTapsSeries`编译生成最终执行插件的函数，`callTapsSeries`做的就是将插件列表中插件按照注册顺序遍历执行。

class SyncHookCodeFactory extends HookCodeFactory {
	content({ onError, onResult, onDone, rethrowIfPossible }) {
		return this.callTapsSeries({
			onError: (i, err) => onError(err),
			onDone,
			rethrowIfPossible
		});
	}
}

SyncBailHook中当一旦某个返回值结果不为undefined便结束执行列表中的插件

 class SyncBailHookCodeFactory extends HookCodeFactory {
	content({ onError, onResult, onDone, rethrowIfPossible }) {
		return this.callTapsSeries({
			// ...
			onResult: (i, result, next) => `if(${result} !== undefined) {\n${onResult(result)};\n} else {\n${next()}}\n`,
			// ...
		});
	}
}

SyncWaterfallHook中上一个插件执行结果当作下一个插件的入参

class SyncWaterfallHookCodeFactory extends HookCodeFactory {
	content({ onError, onResult, onDone, rethrowIfPossible }) {
		return this.callTapsSeries({
			// ...
			onResult: (i, result, next) => {
				let code = "";
				code += `if(${result} !== undefined) {\n`;
				code += `${this._args[0]} = ${result};\n`;
				code += `}\n`;
				code += next();
				return code;
			},
			onDone: () => onResult(this._args[0]),
		});
	}
}

AsyncParallelHook调用callTapsParallel并行执行插件

class AsyncParallelHookCodeFactory extends HookCodeFactory {
	content({ onError, onDone }) {
		return this.callTapsParallel({
			onError: (i, err, done, doneBreak) => onError(err) + doneBreak(true),
			onDone
		});
	}
}

webpack流程篇

本文关于webpack 的流程讲解是基于webpack4的。

webpack 入口文件

从webpack项目的package.json文件中我萌找到了入口执行函数，在函数中引入webpack，那么入口将会是lib/webpack.js,而如果在shell中执行，那么将会走到./bin/webpack.js,我萌就以lib/webpack.js为入口开始吧！

{
  "name": "webpack",
  "version": "4.1.1",
  ...
  "main": "lib/webpack.js",
  "web": "lib/webpack.web.js",
  "bin": "./bin/webpack.js",
  ...
  }

webpack入口

const webpack = (options, callback) => {
    // ...
    // 验证options正确性
    // 预处理options
    options = new WebpackOptionsDefaulter().process(options); // webpack4的默认配置
	compiler = new Compiler(options.context); // 实例Compiler
	// ...
    // 若options.watch === true && callback 则开启watch线程
	compiler.watch(watchOptions, callback);
	compiler.run(callback);
	return compiler;
};

webpack 的入口文件其实就实例了Compiler并调用了run方法开启了编译，webpack的编译都按照下面的钩子调用顺序执行。

before-run 清除缓存
run 注册缓存数据钩子
before-compile
compile 开始编译
make 从入口分析依赖以及间接依赖模块，创建模块对象
build-module 模块构建
seal 构建结果封装，不可再更改
after-compile 完成构建，缓存数据
emit 输出到dist目录

编译&构建流程

webpack中负责构建和编译都是Compilation

class Compilation extends Tapable {
	constructor(compiler) {
		super();
		this.hooks = {
			// hooks
		};
		// ...
		this.compiler = compiler;
		// ...
		// template
		this.mainTemplate = new MainTemplate(this.outputOptions);
		this.chunkTemplate = new ChunkTemplate(this.outputOptions);
		this.hotUpdateChunkTemplate = new HotUpdateChunkTemplate(
			this.outputOptions
		);
		this.runtimeTemplate = new RuntimeTemplate(
			this.outputOptions,
			this.requestShortener
		);
		this.moduleTemplates = {
			javascript: new ModuleTemplate(this.runtimeTemplate),
			webassembly: new ModuleTemplate(this.runtimeTemplate)
		};

		// 构建生成的资源
		this.chunks = [];
		this.chunkGroups = [];
		this.modules = [];
		this.additionalChunkAssets = [];
		this.assets = {};
		this.children = [];
		// ...
	}
	// 
	buildModule(module, optional, origin, dependencies, thisCallback) {
		// ...
		// 调用module.build方法进行编译代码，build中 其实是利用acorn编译生成AST
		this.hooks.buildModule.call(module);
		module.build(/**param*/);
	}
	// 将模块添加到列表中，并编译模块
	_addModuleChain(context, dependency, onModule, callback) {
		    // ...
		    // moduleFactory.create创建模块，这里会先利用loader处理文件，然后生成模块对象
		    moduleFactory.create(
				{
					contextInfo: {
						issuer: "",
						compiler: this.compiler.name
					},
					context: context,
					dependencies: [dependency]
				},
				(err, module) => {
					const addModuleResult = this.addModule(module);
					module = addModuleResult.module;
					onModule(module);
					dependency.module = module;
					
					// ...
					// 调用buildModule编译模块
					this.buildModule(module, false, null, null, err => {});
				}
		});
	}
	// 添加入口模块，开始编译&构建
	addEntry(context, entry, name, callback) {
		// ...
		this._addModuleChain( // 调用_addModuleChain添加模块
			context,
			entry,
			module => {
				this.entries.push(module);
			},
			// ...
		);
	}

	
	seal(callback) {
		this.hooks.seal.call();

		// ...
		const chunk = this.addChunk(name);
		const entrypoint = new Entrypoint(name);
		entrypoint.setRuntimeChunk(chunk);
		entrypoint.addOrigin(null, name, preparedEntrypoint.request);
		this.namedChunkGroups.set(name, entrypoint);
		this.entrypoints.set(name, entrypoint);
		this.chunkGroups.push(entrypoint);

		GraphHelpers.connectChunkGroupAndChunk(entrypoint, chunk);
		GraphHelpers.connectChunkAndModule(chunk, module);

		chunk.entryModule = module;
		chunk.name = name;

		 // ...
		this.hooks.beforeHash.call();
		this.createHash();
		this.hooks.afterHash.call();
		this.hooks.beforeModuleAssets.call();
		this.createModuleAssets();
		if (this.hooks.shouldGenerateChunkAssets.call() !== false) {
			this.hooks.beforeChunkAssets.call();
			this.createChunkAssets();
		}
		// ...
	}


	createHash() {
		// ...
	}
	
	// 生成 assets 资源并 保存到 Compilation.assets 中 给webpack写插件的时候会用到
	createModuleAssets() {
		for (let i = 0; i < this.modules.length; i++) {
			const module = this.modules[i];
			if (module.buildInfo.assets) {
				for (const assetName of Object.keys(module.buildInfo.assets)) {
					const fileName = this.getPath(assetName);
					this.assets[fileName] = module.buildInfo.assets[assetName]; 
					this.hooks.moduleAsset.call(module, fileName);
				}
			}
		}
	}

	createChunkAssets() {
	 // ...
	}
}

在webpack make钩子中, tapAsync注册了一个DllEntryPlugin, 就是将入口模块通过调用compilation.addEntry方法将所有的入口模块添加到编译构建队列中，开启编译流程。

compiler.hooks.make.tapAsync("DllEntryPlugin", (compilation, callback) => {
		compilation.addEntry(
			this.context,
			new DllEntryDependency(
				this.entries.map((e, idx) => {
					const dep = new SingleEntryDependency(e);
					dep.loc = `${this.name}:${idx}`;
					return dep;
				}),
				this.name
			),
			// ...
		);
	});

随后在addEntry 中调用_addModuleChain开始编译。在_addModuleChain首先会生成模块，最后构建。

class NormalModuleFactory extends Tapable {
	// ...
	create(data, callback) {
		// ...
		this.hooks.beforeResolve.callAsync(
			{
				contextInfo,
				resolveOptions,
				context,
				request,
				dependencies
			},
			(err, result) => {
				if (err) return callback(err);

				// Ignored
				if (!result) return callback();
				// factory 钩子会触发 resolver 钩子执行，而resolver钩子中会利用acorn 处理js生成AST，再利用acorn处理前，会使用loader加载文件
				const factory = this.hooks.factory.call(null);

				factory(result, (err, module) => {
					if (err) return callback(err);

					if (module && this.cachePredicate(module)) {
						for (const d of dependencies) {
							d.__NormalModuleFactoryCache = module;
						}
					}

					callback(null, module);
				});
			}
		);
	}
}

在编译完成后，调用compilation.seal方法封闭，生成资源，这些资源保存在compilation.assets, compilation.chunk, 在给webpack写插件的时候会用到

class Compiler extends Tapable {
	constructor(context) {
		super();
		this.hooks = {
			beforeRun: new AsyncSeriesHook(["compilation"]),
			run: new AsyncSeriesHook(["compilation"]),
			emit: new AsyncSeriesHook(["compilation"]),
			afterEmit: new AsyncSeriesHook(["compilation"]),
			compilation: new SyncHook(["compilation", "params"]),
			beforeCompile: new AsyncSeriesHook(["params"]),
			compile: new SyncHook(["params"]),
			make: new AsyncParallelHook(["compilation"]),
			afterCompile: new AsyncSeriesHook(["compilation"]),
			// other hooks
		};
		// ...
	}

	run(callback) {
		const startTime = Date.now();

		const onCompiled = (err, compilation) => {
			// ...

			this.emitAssets(compilation, err => {
				if (err) return callback(err);

				if (compilation.hooks.needAdditionalPass.call()) {
					compilation.needAdditionalPass = true;

					const stats = new Stats(compilation);
					stats.startTime = startTime;
					stats.endTime = Date.now();
					this.hooks.done.callAsync(stats, err => {
						if (err) return callback(err);

						this.hooks.additionalPass.callAsync(err => {
							if (err) return callback(err);
							this.compile(onCompiled);
						});
					});
					return;
				}
				// ...
			});
		};

		this.hooks.beforeRun.callAsync(this, err => {
			if (err) return callback(err);
			this.hooks.run.callAsync(this, err => {
				if (err) return callback(err);

				this.readRecords(err => {
					if (err) return callback(err);

					this.compile(onCompiled);
				});
			});
		});
	}
	// 输出文件到构建目录
	emitAssets(compilation, callback) {
		// ...
		this.hooks.emit.callAsync(compilation, err => {
			if (err) return callback(err);
			outputPath = compilation.getPath(this.outputPath);
			this.outputFileSystem.mkdirp(outputPath, emitFiles);
		});
	}
	
	newCompilationParams() {
		const params = {
			normalModuleFactory: this.createNormalModuleFactory(),
			contextModuleFactory: this.createContextModuleFactory(),
			compilationDependencies: new Set()
		};
		return params;
	}

	compile(callback) {
		const params = this.newCompilationParams();
		this.hooks.beforeCompile.callAsync(params, err => {
			if (err) return callback(err);
			this.hooks.compile.call(params);
			const compilation = this.newCompilation(params);

			this.hooks.make.callAsync(compilation, err => {
				if (err) return callback(err);
				compilation.finish();
				// make 钩子执行后，调用seal生成资源
				compilation.seal(err => {
					if (err) return callback(err);
					this.hooks.afterCompile.callAsync(compilation, err => {
						if (err) return callback(err);
						// emit, 生成最终文件
						return callback(null, compilation);
					});
				});
			});
		});
	}
}

最后输出

在seal执行后，便会调用emit钩子，根据webpack config文件的output配置的path属性，将文件输出到指定的path.

javaScript中的Unicode

踩坑在做某个业务的时候，后端童鞋给到的某个字段的值大概都长这样 `javascript "\n#\u0008\u0005\u0012\u001f\u0012\u001d\u0005星球大战\u0006：原力觉醒\n\u000f\u0008\u0006\u0012\u000b\u0012\t张学友\n\n\u0008\u0003\u0012\u0006\u0012\u0004Dior\n\u0012\u0008\u0007\u0012\u000e\u0012\u000c英雄联盟"` 对于这样的数据，我是拒绝的。对于这些 `unicode`，怎么解析呢？它到底是什么？

什么是编码

其实编码原理很简单，在计算中并非直接存储字符（英文、中文等），而是存储这些字符对应的一个数字，这些字符在网络传输的时候，也是传输字符对应的数字，编码就是将字符转化成相应的数字。

ASCII

大学C语言入门课程最先学习的知识，它用了一个字节的7位表示一个字符，比如字符A的ASCII码是65。ASCII码只用了7个bit编码，注定能编码的字符很少，只有128个。

Unicode编码

ASCII编码只能编码128个字符，而**汉子就有6000 +，这样显然不够的，然后**推出GBK 编码，用了两个字节来编码。**编码用了GBK，那其他国家呢？于是为了统一，推出了Unicode编码。在1991年推出了UCS统一编码，实际应用的是USC-2，用了2个字节来编码，能编码65536个字符。�JavsScript中的编码就是用的这个编码方式。

编码都是不涉及计算机存储，传输的。但是在遇到两个字节编码的字符的时候，有个系统是大端顺序读取，Windows就是这样，而Mac上是按照小端顺序读取。如果没有个转化格式，那么就乱了，此时UTF(Unicode Transformation Format，简称为UTF)就产生了。因此，UTF-16使用了**大端序（Big-Endian，简写为UTF-16 BE）、小端序（Little-Endian，简写为UTF-16 LE）以及BOM（byte order mark）**的概念。避免上述情况的出现。

JavaScript中的编码

JavaScript刚创建出来的时候，只有USC-2编码方式可选，所以就一只用了这个编码方式。上文也提到USC-2一开始使用了两个字节来编码，能够编码65536个字符，从0x0 - 0xFFFF，这个也被称为基本平面（BMP-—Basic Multilingual Plane)。但是后来发现这样的Unicode编码也是不够用，扩展了其他补充平面，从0x010000 - 0x10FFFF，共16个。对于补充平面的字符。对于UTF-16编码方式来说，在0x0 - 0xFFFF之间的编码方式直接使用了2个字节，而补充平面使用了4个字节来编码，其中前两个字节范围是0xD800 - 0xDBFF，后两个字节范围是0xDC00 - 0xDFFF。通过下面的方式完成映射：

H = Math.floor((c-0x10000) / 0x400)+0xD800 
L = (c – 0x10000) % 0x400 + 0xDC00

USC-2编码的那些坑

var text = "𠮷"
console.log(text.length) // 2
console.log(/^.$/.test(text)) // false
console.log(text.split('').reverse()) // ["�", "�"]
console.log(String.fromCharCode(text.codePointAt(0))) // "��"

(1)判断长度失效

对于ES5来说，可以将此类转化以下

var regexAstralSymbols = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g; // 匹配UTF-16的代理对
 
function countSymbols(string) {
	return string
		.replace(regexAstralSymbols, '_')
		.length;
}
countSymbols("𠮷"); // 1

对于ES6来说

function codePointLength(text) {
    var result = text.match(/[\s\S]/gu);
    return result ? result.length : 0;
}
codePointLength("𠮷") // 1

(2)正则表达式

console.log(/^.$/u.test(text)); // true

字符反转

function reverse(string) {
	return Array.from(string).reverse().join('');
}
reverse("𠮷") // "𠮷"

String.fromCharCode

var text = "𠮷";
console.log(text.codePointAt(0)) // 0x20bb7 (unicode)
var hightByte = text.charCodeAt(0) // 0xd842
var lowByte = text.charCode(1) // 0xdfb7
console.log(String.fromCharCode(hightByte, lowByte)) // "𠮷"
console.log(String.fromCodePoint(text.codePointAt(0))) // "𠮷"

写在最后

最后发现这样的编码无法编码成想要的字符，最后让后端童鞋编码成base64编码，然后解码。

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

ixlei / jsnotes Goto Github PK

jsnotes's Introduction

javascript notes

目录

js序列

我的校招面试经历

那些年我们踩过的移动端的坑

jsnotes's People

Contributors

Stargazers

Watchers

Forkers

jsnotes's Issues

谈起音视频，前端能做些什么

音频或视频的播放

html5 audio

AudioContext

PCM audio

Media Source Extensions

HTML5 播放器

未来

写在最后

Rollup

Tree Shaking

代码构建后输出格式

没有银弹

puppeteer爬虫的奇妙之旅

爬虫的工作原理

广度（BFS）还是深度（DFS）优先策略

广度优先策略（BFS）

深度优先策略（DFS）

下载网页

获取网页内容

写在最后

webpack的编译&构建

webpack的编译

重要的构建节点

在make钩子的编译

构建封装seal

写在最后

浅谈前端中的错误处理

如何在NodeJs中捕获错误

操作错误VS编码错误

1. 操作错误

2.编码错误

处理操作错误

处理编码错误

如何分发错误

NodeJs的运维

多进程来管理你的应用

domain

如何避免内存泄露

webpack的配置

webpack详解

不得不说的tapable

Tapable详解

webpack流程篇

webpack 入口文件

webpack入口

编译&构建流程

最后输出

javaScript中的Unicode

什么是编码

ASCII

Unicode编码

JavaScript中的编码

USC-2编码的那些坑

(1)判断长度失效

(2)正则表达式

字符反转

String.fromCharCode

写在最后

Recommend Projects

Recommend Topics

Recommend Org