Peak's Blog
0%

发表于 更新于

1.异步

  • 所谓”异步”，简单说就是一个任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段,比如，有一个任务是读取文件进行处理，异步的执行过程就是下面这样。

image

这种不连续的执行，就叫做异步。相应地，连续的执行，就叫做同步。
image

2.高阶函数

函数作为一等公民，可以作为参数和返回值

2.1 可以用于批量生成函数

1
2
3
4
5
6
7
8
9
10
11
12
let toString = Object.prototype.toString;
let isString = function (obj) {
	return toString.call(obj) == [object String];
}
let isFunction = function (obj) {
	return toString.call(obj) == [object Function];
}
let isType = function (type) {
		return function (obj) {
		return toString.call(obj) == [object ${type}];
	}
}

2.2 可以用于需要调用多次才执行的函数

1
2
3
4
5
6
7
8
9
10
11
let after = function (times, task) {
	return function () {
		if (times-- == 1) {
			return task.apply(this, arguments);
		}
	};
};
let fn = after(3, function () {
	console.log(3);
});
fn();

3. 异步编程的语法目标，就是怎样让它更像同步编程,有以下几种

  • 回调函数实现
  • 事件监听
  • 发布订阅
  • Promise/A+ 和生成器函数
  • async/await

4.回调函数

所谓回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数

1
2
3
4
fs.readFile('某个文件', function (err, data) {
	if (err) throw err;
	console.log(data);
});

这是一个错误优先的回调函数(error-first callbacks),这也是 Node.js 本身的特点之一。

5.回调的问题

5.1 异常处理

1
2
3
try{
  //xxx
}catch(e){//TODO}

异步代码时try catch不再生效

1
2
3
4
5
6
7
8
9
10
11
12
13
let async = function (callback) {
	try {
		setTimeout(function () {
			callback();
		}, 1000);
	} catch (e) {
		console.log('捕获错误', e);
	}
};

async(function () {
	console.log(t);
});

因为这个回调函数被存放了起来，直到下一个事件环的时候才会取出,try 只能捕获当前循环内的异常，对 callback 异步无能为力。

Node 在处理异常有一个约定，将异常作为回调的第一个实参传回，如果为空表示没有出错。

1
2
3
4
5
async(function (err, callback) {
	if (err) {
		console.log(err);
	}
});

异步方法也要遵循两个原则

  • 必须在异步之后调用传入的回调函数
  • 如果出错了要向回调函数传入异常供调用者判断
1
2
3
4
5
6
7
8
9
10
let async = function (callback) {
	try {
		setTimeout(function () {
			if (success) callback(null);
			else callback('错误');
		}, 1000);
	} catch (e) {
		console.log('捕获错误', e);
	}
};

5.2 回调地狱

异步多级依赖的情况下嵌套非常深，代码难以阅读的维护

1
2
3
4
5
6
let fs = require('fs');
fs.readFile('template.txt', 'utf8', function (err, template) {
	fs.readFile('data.txt', 'utf8', function (err, data) {
		console.log(template + ' ' + data);
	});
});

6.异步流程解决方案

6.1 事件发布/订阅模型

订阅事件实现了一个事件与多个回调函数的关联

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let fs = require('fs');
let EventEmitter = require('events');
let eve = new EventEmitter();
let html = {};
eve.on('ready', function (key, value) {
	html[key] = value;
	if (Object.keys(html).length == 2) {
		console.log(html);
	}
});
function render() {
	fs.readFile('template.txt', 'utf8', function (err, template) {
		eve.emit('ready', 'template', template);
	});
	fs.readFile('data.txt', 'utf8', function (err, data) {
		eve.emit('ready', 'data', data);
	});
}
render();

6.2 哨兵变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let fs = require('fs');

let after = function (times, callback) {
	let result = {};
	return function (key, value) {
		result[key] = value;
		if (Object.keys(result).length == times) {
			callback(result);
		}
	};
};
let done = after(2, function (result) {
	console.log(result);
});

function render() {
	fs.readFile('template.txt', 'utf8', function (err, template) {
		done('template', template);
	});
	fs.readFile('data.txt', 'utf8', function (err, data) {
		done('data', data);
	});
}
render();

6.3 Promise/Deferred 模式

6.4 生成器 Generators/ yield

  • 当你在执行一个函数的时候，你可以在某个点暂停函数的执行，并且做一些其他工作，然后再返回这个函数继续执行， 甚至是携带一些新的值，然后继续执行。
  • 上面描述的场景正是 JavaScript 生成器函数所致力于解决的问题。当我们调用一个生成器函数的时候，它并不会立即执行， 而是需要我们手动的去执行迭代操作（next 方法）。也就是说，你调用生成器函数，它会返回给你一个迭代器。迭代器会遍历每个中断点。
  • next 方法返回值的 value 属性，是 Generator 函数向外输出数据；next 方法还可以接受参数，这是向 Generator 函数体内输入数据

6.4.1 生成器的使用

1
2
3
4
5
6
7
8
9
10
11
function* foo() {
	var index = 0;
	while (index < 2) {
		yield index++; //暂停函数执行，并执行yield后的操作
	}
}
var bar = foo(); // 返回的其实是一个迭代器

console.log(bar.next()); // { value: 0, done: false }
console.log(bar.next()); // { value: 1, done: false }
console.log(bar.next()); // { value: undefined, done: true }

6.4.2 Co

co是一个为Node.js和浏览器打造的基于生成器的流程控制工具，借助于 Promise，你可以使用更加优雅的方式编写非阻塞代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let fs = require('fs');
function readFile(filename) {
	return new Promise(function (resolve, reject) {
		fs.readFile(filename, function (err, data) {
			if (err) reject(err);
			else resolve(data);
		});
	});
}
function* read() {
	let template = yield readFile('./template.txt');
	let data = yield readFile('./data.txt');
	return template + '+' + data;
}
co(read).then(
	function (data) {
		console.log(data);
	},
	function (err) {
		console.log(err);
	}
);
1
2
3
4
5
6
7
8
9
10
11
12
13
function co(gen) {
	let it = gen();
	return new Promise(function (resolve, reject) {
		!(function next(lastVal) {
			let { value, done } = it.next(lastVal);
			if (done) {
				resolve(value);
			} else {
				value.then(next, (reason) => reject(reason));
			}
		})();
	});
}

6.5 Async/ await

使用async关键字，你可以轻松地达成之前使用生成器和 co 函数所做到的工作

6.5.1 Async 的优点

  • 内置执行器
  • 更好的语义
  • 更广的适用性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let fs = require('fs');
function readFile(filename) {
	return new Promise(function (resolve, reject) {
		fs.readFile(filename, 'utf8', function (err, data) {
			if (err) reject(err);
			else resolve(data);
		});
	});
}

async function read() {
	let template = await readFile('./template.txt');
	let data = await readFile('./data.txt');
	return template + '+' + data;
}
let result = read();
result.then((data) => console.log(data));

6.5.2 async 函数的实现

async 函数的实现，就是将 Generator 函数和自动执行器，包装在一个函数里。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
async function read() {
	let template = await readFile('./template.txt');
	let data = await readFile('./data.txt');
	return template + '+' + data;
}

// 等同于
function read() {
	return co(function* () {
		let template = yield readFile('./template.txt');
		let data = yield readFile('./data.txt');
		return template + '+' + data;
	});
}

发表于 更新于

1. 模块化

模块化是指把一个复杂的系统分解到多个模块以方便编码。

1.1 命名空间

开发网页要通过命名空间的方式来组织代码

1
<script src="jquery.js">
  • 命名空间冲突，两个库可能会使用同一个名称
  • 无法合理地管理项目的依赖和版本；
  • 无法方便地控制依赖的加载顺序。

1.2 CommonJS

CommonJS 是一种使用广泛的JavaScript模块化规范，核心思想是通过require方法来同步地加载依赖的其他模块，通过 module.exports 导出需要暴露的接口。

1.2.1 用法

采用 CommonJS 导入及导出时的代码如下：

1
2
3
4
5
6
// 导入
const someFun = require('./moduleA');
someFun();

// 导出
module.exports = someFunc;

1.2.2 原理

a.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let fs = require('fs');
let path = require('path');
let b = req('./b.js');
function req(mod) {
	let filename = path.join(__dirname, mod);
	let content = fs.readFileSync(filename, 'utf8');
	let fn = new Function(
		'exports',
		'require',
		'module',
		'__filename',
		'__dirname',
		content + '\n return module.exports;'
	);
	let module = {
		exports: {},
	};

	return fn(module.exports, req, module, __filename, __dirname);
}

b.js

1
2
console.log('bbb');
exports.name = 'zfpx';

1.3 AMD

AMD 也是一种 JavaScript 模块化规范，与 CommonJS 最大的不同在于它采用异步的方式去加载依赖的模块。 AMD 规范主要是为了解决针对浏览器环境的模块化问题，最具代表性的实现是 requirejs。

AMD 的优点

  • 可在不转换代码的情况下直接在浏览器中运行
  • 可加载多个依赖
  • 代码可运行在浏览器环境和 Node.js 环境下

AMD 的缺点

  • JavaScript 运行环境没有原生支持 AMD，需要先导入实现了 AMD 的库后才能正常使用。

1.3.1 用法

1
2
3
4
5
6
7
8
9
10
11
// 定义一个模块
define('a', [], function () {
	return 'a';
});
define('b', ['a'], function (a) {
	return a + 'b';
});
// 导入和使用
require(['b'], function (b) {
	console.log(b);
});

1.3.2 原理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let factories = {};
function define(modName, dependencies, factory) {
	factory.dependencies = dependencies;
	factories[modName] = factory;
}
function require(modNames, callback) {
	let loadedModNames = modNames.map(function (modName) {
		let factory = factories[modName];
		let dependencies = factory.dependencies;
		let exports;
		require(dependencies, function (...dependencyMods) {
			exports = factory.apply(null, dependencyMods);
		});
		return exports;
	});
	callback.apply(null, loadedModNames);
}

1.4 ES6 模块化

ES6 模块化是ECMA提出的JavaScript模块化规范，它在语言的层面上实现了模块化。浏览器厂商和Node.js都宣布要原生支持该规范。它将逐渐取代CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。 采用 ES6 模块化导入及导出时的代码如下

1
2
3
4
// 导入
import { name } from './person.js';
// 导出
export const name = 'zfpx';

ES6 模块虽然是终极模块化方案，但它的缺点在于目前无法直接运行在大部分 JavaScript 运行环境下，必须通过工具转换成标准的 ES5 后才能正常运行。

2. 自动化构建

构建就是做这件事情，把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。

  • 代码转换：ECMASCRIPT6 编译成 ECMASCRIPT5、LESS 编译成 CSS 等。
  • 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
  • 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
  • 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
  • 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
  • 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
  • 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

3. Webpack

Webpack 是一个打包模块化 JavaScript 的工具，在 Webpack 里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。

一切文件：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。 经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。

3.1 安装 Webpack

在用 Webpack 执行构建任务时需要通过 webpack 可执行文件去启动构建任务，所以需要安装 webpack 可执行文件

3.1.1 安装 Webpack 到本项目

1
2
3
4
5
6
7
8
# 安装最新稳定版
npm i -D webpack

# 安装指定版本
npm i -D webpack@<version>

# 安装最新体验版本
npm i -D webpack@beta

npm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies

3.1.2 安装 Webpack 到全局

安装到全局后你可以在任何地方共用一个 Webpack 可执行文件，而不用各个项目重复安装

1
npm i -g webpack

推荐安装到当前项目，原因是可防止不同项目依赖不同版本的 Webpack 而导致冲突

3.1.3 使用 Webpack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
(function (modules) {
    function require(moduleId) {
        var module = {
            exports: {}
        };
        modules[moduleId].call(module.exports, module, module.exports, require);
        return module.exports;

    }
    return require("./index.js");
})
    ({
        "./index.js":
            (function (module, exports, require) {
                eval("console.log('hello');\n\n");
            })
    });
#! /usr/bin/env node
const pathLib = require('path');
const fs = require('fs');
let ejs = require('ejs');
let cwd = process.cwd();
let { entry, output: { filename, path } } = require(pathLib.join(cwd, './webpack.config.js'));
let script = fs.readFileSync(entry, 'utf8');
let bundle = `
(function (modules) {
    function require(moduleId) {
        var module = {
            exports: {}
        };
        modules[moduleId].call(module.exports, module, module.exports, require);
        return module.exports;

    }
    return require("<%-entry%>");
})
    ({
        "<%-entry%>":
            (function (module, exports, require) {
                eval("<%-script%>");
            })
    });
`
let bundlejs = ejs.render(bundle, {
    entry,
    script
});
try {
    fs.writeFileSync(pathLib.join(path, filename), bundlejs);
} catch (e) {
    console.error('编译失败 ', e);
}
console.log('compile sucessfully!');

3.1.4 依赖其它模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
#! /usr/bin/env node
const pathLib = require('path');
const fs = require('fs');
let ejs = require('ejs');
let cwd = process.cwd();
let {
	entry,
	output: { filename, path },
} = require(pathLib.join(cwd, './webpack.config.js'));
let script = fs.readFileSync(entry, 'utf8');
let modules = [];
script.replace(/require\(['"](.+?)['"]\)/g, function () {
	let name = arguments[1];
	let script = fs.readFileSync(name, 'utf8');
	modules.push({
		name,
		script,
	});
});
let bundle = `
(function (modules) {
    function require(moduleId) {
        var module = {
            exports: {}
        };
        modules[moduleId].call(module.exports, module, module.exports, require);
        return module.exports;
    }
    return require("<%-entry%>");
})
    ({
        "<%-entry%>":
            (function (module, exports, require) {
                eval(\`<%-script%>\`);
            })
       <%if(modules.length>0){%>,<%}%>
        <%for(let i=0;i<modules.length;i++){
            let module = modules[i];%>   
            "<%-module.name%>":
            (function (module, exports, require) {
                eval(\`<%-module.script%>\`);
            })
        <% }%>    
    });
`;
let bundlejs = ejs.render(bundle, {
	entry,
	script,
	modules,
});
try {
	fs.writeFileSync(pathLib.join(path, filename), bundlejs);
} catch (e) {
	console.error('编译失败 ', e);
}
console.log('compile sucessfully!');