Javascript模块化编程2一模块的规范

一. 模块化

模块化开发使代码耦合度降低，模块化的意义在于最大化的设计重用，以最少的模块、零部件，更快速的满足更多的个性化需求。因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。代码复用，便于维护

二.模块化规范

image.png

2-1 common.js---同步加载、服务器端的模块化规范，采用案列：Node.js

a. 实现原理：
一个单独的文件就是一个模块；
加载模块采用同步方式，加载完成后才能执行后面的操作
加载模块使用require方法，该方法读取一个文件并执行，最后返回内部的exports对象；
b. 特点：
由于是同步加载。所以加载、执行完依赖文件后，才可执行后续的操作，即会产生同步阻塞；
比较适合运用于服务器的编程，加载模块文件通常都存在本地磁盘，加载过程无延迟，无需异步加载；
由于同步加载执行，存在同步阻塞问题，对于从远程服务器加载模块的浏览器环境不友好，

2.2 AMD————异步加载，采用案例：require.js

a. 实现原理： ‘Ansychronous Module Definition’–异步模块定义
通过一个函数封装所有所需要、所依赖的模块/方法/对象/属性；返回一个新函数(模块)；
推崇依赖前置，依赖的模块提前执行；(require2.0开始支持延迟执行)
采用依赖注入方式加载模块；
注入依赖模块后，执行异步回调函数；
b. 特点：
异步加载，不会产生异步阻塞，适合浏览器网络环境；
同时允许异步加载、按需加载模块

2.3 CMD————异步加载、异步执行依赖，案例：SealJS

CMD 与 AMD 类似；都是采用异步加载，不同点主要有一下几点:

• 对依赖模块的执行时机：CMD延迟执行，AMD提前执行(RequireJS2.0后支持延迟执行)
• 依赖位置：CMD推崇依赖就近，按需加载；AMD推崇依赖前置；
• API:CMD推崇职责单一，AMD里面require分局部和全局方式；

2.4 es6模块化————export 和 import

https://www.cnblogs.com/diligenceday/p/5503777.html

三.commonjs和require.js的小例子对比

假定有一个数学模块math.js，在服务器环境下，就可以像下面这样加载。

Commonjs：var math = require(‘math’);
          调用：math.add(2,3)//5

但是在浏览器环境下，第二行math.add(2, 3)，在第一行require('math')之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。
这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。
因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。
AMD它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD也采用require()语句加载模块，但是有两个参数：
require([module], callback)
第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数
如果将前面的代码改写成AMD形式，就是下面这样：

AMD:  require ([‘math’],function(math){
    Math.add (2,3);
    })

math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。

es6的简单写法：

ES6:
//lib.js
//导出常量
export const sqrt = Math.sqrt;
//导出函数
export function square(x) {
    return x * x;
}
//导出函数
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//main.js
import { square, diag } from './lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5