终极异步方案

JavaScript异步编程一直是一件很麻烦的事，从最早的回调函数，到 Promise 对象，
再到 Generator 函数，每次都有所改进。但总感觉缺点什么。

直到 async/await 出现，很多人认为它是异步操作的终极解决方案。

async 应该会在 ECMAScript 7 引入。在 NodeJs v7.4.0 正式加入 NodeJs 大家庭。

async 是 Generator 函数的语法糖

1
2
3
4
5
6
7
8
9
10

var fs = require('fs');

var readFile = function (fileName){
    return new Promise(function (resolve, reject){
        fs.readFile(fileName, function(error, data){
            if (error) reject(error);
            resolve(data);
        });
    });
};

Generator 写法：

1
2
3
4
5
6
7
8

var co = require('co');
var gen = function* (){
    var f1 = yield readFile('/etc/fstab');
    var f2 = yield readFile('/etc/shells');
    console.log(f1.toString());
    console.log(f2.toString());
};
co(gen);

写成 async 函数，就像下面这样：

1
2
3
4
5
6

var asyncReadFile = async function (){
    var f1 = await readFile('/etc/fstab');
    var f2 = await readFile('/etc/shells');
    console.log(f1.toString());
    console.log(f2.toString());
};

其实就是把 * 替换成 async ，把 yield 换成 await。而且自带执行器
（Generator 函数的执行必须依靠执行器，所以才有了 co 函数库）。

async 函数用法

• 同 Generator 函数一样，async 函数返回一个 Promise 对象。
  所以调用 async 函数的函数也要处理 Promise 对象。

• 用 try…catch 来处理 Promise 对象 rejected

• await 命令只能用在 async 函数之中，如果用在普通函数，就会报错。

• 将 forEach 方法的参数改成 async 函数不能够实现继发执行。应该采用 for 循环。

• 希望多个请求并发执行，可以使用 Promise.all 方法。

评论和共享

CommonJS

首先，最先出现的是 CommonJS， CommonJS API 定义很多普通应用程序（主要指非浏览器的应用）使用的API。它的终极目标是提供一个类似 Python， Ruby 和 Java 标准库。这样的话，开发者可以使用 CommonJS API 编写应用程序，然后这些应用可以运行在不同的 JavaScript 解释器和不同的主机环境中。

2009年，美国程序员 Ryan Dahl 创造了 node.js 项目，将 javascript 语言用于服务器端编程。这标志 Javascript 模块化编程”正式诞生。

NodeJS 是 CommonJS 规范的实现， webpack 也是以 CommonJS 的形式来书写。NPM 作为 Node 的包管理器，帮助Node 解决依赖包的安装问题，也要遵循 CommonJS。

Browserify

browserify 是最常用的 CommonJS 转换工具。

然后看个例子

1
2
3
4
5
6
7
8

// foo.js
module.exports = function(x) {
  console.log(x);
};

// main.js
var foo = require("./foo");
foo("Hi");

1

$ browserify main.js > compiled.js

即可打包，Browserify 具体做了什么继续向下看即可：

1

$ npm install browser-unpack -g

然后我们将上面生成的 compiled.js 解包。

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

$ browser-unpack < compiled.js

[
  {
    "id":1,
    "source":"module.exports = function(x) {\n  console.log(x);\n};",
    "deps":{}
  },
  {
    "id":2,
    "source":"var foo = require(\"./foo\");\nfoo(\"Hi\");",
    "deps":{"./foo":1},
    "entry":true
  }
]

Browserify 在这里将所有模块放到一个数组里，id 是模块的编号，source 是源码，deps 为依赖，entry 为指定入口。

Browserify 先找到 entry: true 的地方，然后执行 source 中的代码，遇到 require 就去deps 中寻找依赖，并执行所依赖的代码，将结果赋值给 require 前的变量。

AMD

AMD ( Asynchronous Module Definition )，是为了解决 CommonJS 不能异步加载的问题。AMD 采用异步的方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等加载完成后，这个回调函数才会执行。

AMD 也采用 require() 语句加载模块，但是不同于 CommonJS，它要求两个参数：

1

require([module], callback);

第一个参数 [module] ，是一个数组，里面的成员就是要加载的模块；第二个参数 callback ，则是加载成功之后的回调函数。如果将前面的代码改写成 AMD 形式，就是下面这样：

1
2
3

require(['math'], function (math) {
　　math.add(2, 3);
});

math.add() 与 math 模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD 比较适合浏览器环境。目前，主要有两个 Javascript 库实现了 AMD 规范： require.js 和 curl.js。

require.js

先去官方网站下载最新版本。

1

然后将它放到项目中即可

如果加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样：

1

<script src="js/require.js" defer async="true" ></script>

async 属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持 defer，所以把 defer 也写上。

加载 require.js 以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是 main.js ，也放在 js 目录下面。那么，只需要写成下面这样就行了：

1

<script src="js/require.js" data-main="js/main"></script>

data-main 属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的 main.js ，这个文件会第一个被 require.js加载。由于 require.js 默认的文件后缀名是js，所以可以把 main.js 简写成 main。

主模块的写法：

1
2
3
4

// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　// some code here
});

默认情况下，require.js 假定这三个模块与 main.js 在同一个目录，文件名分别为 moduleA.js，moduleB.js 和 moduleA.js，然后自动加载。

使用 require.config() 方法，我们可以对模块的加载行为进行自定义。require.config() 就写在主模块（main.js）的头部。参数就是一个对象，这个对象的 paths 属性指定各个模块的加载路径。

1
2
3
4
5
6
7

require.config({
　　paths: {
　　　　"jquery": "jquery.min",
　　　　"underscore": "underscore.min",
　　　　"backbone": "backbone.min"
　　}
});

模块的写法

模块必须采用特定的 define() 函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在 define() 函数之中。

1
2
3
4
5
6
7
8
9

// math.js
define(function (){
 　var add = function (x,y){
　　　　return x+y;
　　};
　　return {
　　　　add: add
　　};
});

ES6 module

ES6发布的 module 并没有直接采用 CommonJS ，甚至连 require 都没有采用，也就是说 require 仍然只是 node 的一个私有的全局方法，module.exports 也只是 node 私有的一个全局变量属性，跟标准半毛钱关系都没有。

export 详细用法
import 详细用法

区别

require 的使用非常简单，它相当于 module.exports 的传送门，module.exports 后面的内容是什么，require 的结果就是什么，对象、数字、字符串、函数……再把 require 的结果赋值给某个变量，相当于把 require 和 module.exports 进行平行空间的位置重叠，而且 require 理论上可以运用在代码的任何地方，甚至不需要赋值给某个变量之后再使用。在使用时，完全可以忽略模块化这个概念来使用 require，仅仅把它当做一个 node 内置的全局函数，它的参数甚至可以是表达式：

但是 import 则不同，它是编译时的（require是运行时的），它必须放在文件开头，而且使用格式也是确定的，不容置疑。它不会将整个模块运行后赋值给某个变量，而是只选择 import 的接口进行编译，这样在性能上比 require 好很多。

从理解上，require 是赋值过程，import 是解构过程，当然，require 也可以将结果解构赋值给一组变量，但是 import 在遇到 default 时，和 require 则完全不同： var $ = require('jquery'); 和 import $ from 'jquery' 是完全不同的两种概念。

评论和共享

注意： 正则表达式中不要插入没用的空格。

直接量字符

字符类

重复

非贪婪的重复： 例如“??”，“+?”，“*?”

正则表达式的选择，分组和引用字符

锚字符

修饰符

用于匹配的String方法

search() 返回匹配字符串的起始坐标，没有则返回-1

replace() 两个参数，替换字符

match() 匹配字符串如果没有修饰符g，则不进行全局检索，返回一个数组，在其中可以用括号匹配详细内容

1
2
3
4
5

let result = 'visit my Blog :https://www.baidu.com:80'.match(/(https?):\/\/([\w.]+):(\d*)/);
console.log(result);
console.log('协议：',result[1]);
console.log('网址：',result[2]);
console.log('端口：',result[3]);

结果

1
2
3
4
5
6
7
8
9

[ 'https://www.baidu.com:80',
  'https',
  'www.baidu.com',
  '80',
  index: 15,
  input: 'visit my Blog :https://www.baidu.com:80' ]
协议： https
网址： www.baidu.com
端口： 80

split() 截取字符串

评论和共享

• 1.JavaScript简介
  • JavaScript简史
  • JavaScript实现
• 2.在HTML中使用JavaScript
  • \元素
  • 嵌入代码与外部文件
  • \元素

JavaScript简介

JavaScript简史

JavaScript实现

在HTML 中使用JavaScript

script元素

1
2
3
4
5
6

<script type="text/javascript">
    function sayScript(){
        alert("<\/script>");
        //此处要加转义符
    }
</script>

1
2
3
4

<script type="text/javascript" src="example.js"><script/>
<!--注意：此处不能写成
  <script type="text/javascript" src="example.js"/>
-->

评论和共享

规范

在最新的 DOM 规范中，事件的捕获与冒泡是通过 addEventListener(...arg) 的第三个参数的 capture来指定的。默认为 false,也就是默认冒泡。

1
2
3
4
5

addEventListener(type, listener, {
    capture: false,
    passive: false,
    once: false
})

addEventListener 第三个参数

触发规则

在多个嵌套情况下，捕获的触发是从外到内的，冒泡则相反。先进行捕获，然后是冒泡。

这里要注意一点，在最后的一层中，先触发冒泡或捕获决定于代码中出现的先后，先出现的先执行。

不是所有的事件都能冒泡，例如：blur、focus、load、unload

DOM事件流

同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

DOM事件模型最独特的性质是，文本节点也触发事件

绑定事件方式

在一个支持W3C DOM的浏览器中，像这样一般的绑定事件方式，是采用的事件冒泡方式。

1
2
3

ele.onclick = ()=>{
    //doSomething
}

IE浏览器

IE只支持事件冒泡，不支持事件捕获，它也不支持 addEventListener 函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数 attachEvent。

1
2
3

ele.attachEvent("onclick", ()=>{
    //doSomething
});

阻止事件传播：

• 在W3c中，使用 stopPropagation() 方法
• 在IE下设置 cancelBubble = true
  在捕获的过程中 stopPropagation(); 后，后面的冒泡过程也不会发生了

阻止事件的默认行为

• 在W3c中，使用 preventDefault(); 方法；
• 在IE下设置 window.event.returnValue = false;

评论和共享