常用的三种模块化规范

常用的三种模块化规范

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com

ES6Moudle

• 使用import/export语法，在文件顶部导入需要的模块，特点是：静态化，在编译时候确定模块之间的以来关系，以及输入输出变量。
• ES6 中 export 和 import 一般的用法有两种 （别名使用as关键字）
  • 命名导出（Named exports）
  • 默认导出（Default exports）

ES6Moudle 在语言标准的层面上，实现了模块功能，而且实现得相当简单，未来大有可能完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案

//module-a.js
export default {
    a: 1
}

import命令具有提升效果，会提升到整个模块的头部，首先执行。

//module-b.js
const b = a + 2
import { a } from './module-a'

CommonJS

• commonJS服务器端（nodeJS）的js模块规范,同步加载方式。因为nodeJS会被部署在服务端不存在js模块下载阻塞的问题，但是浏览器则是本地客户机存在下载js文件阻塞的问题。
• (1）模块定义

module.exports.add = function () {
  ...
}
module.exports = function () {
  return ...
}

• （2）模块引用

var add = require('./add.js');
var config = require('config.js');
var http = require('http');

ADM

AMD是requireJS倡导的一种模块化规范，推崇依赖前置；在requireJS中模块是通过define来进行定义的，如果模块之间相互依赖，需要先将依赖模块导入进来，待导入完毕之后，在通过回调函数的方式执行后面的代码，有效的解决了模块依赖的问题。

• (1)模块定义

define({
  method1: function() {}
  method2: function() {}
});  

//或者
define(function(){
  return {
    method1: function() {},
    method2: function() {},
  }
});    

• (2)模块引用

require(['a', 'b'], function(a, b){
  a.method();
  b.method();
})

当然还有什么UMD、CMD规范这里就不一样叙说了

面试常问

前端模块化和服务端模块化有什么区别？

服务端加载一个模块，直接就从硬盘或者内存中读取了，消耗时间可以忽略不计
浏览器需要从服务端下载这个文件，所以说如果用CommonJS的require方式加载模块，需要等代码模块下载完毕，并运行之后才能得到所需要的API。

为什么CommonJS不适用于前端模块？

如果我们在某个代码模块里使用CommonJS的方法require了一个模块，而这个模块需要通过http请求从服务器去取，如果网速很慢，而CommonJS又是同步的，所以将阻塞后面代码的执行，从而阻塞浏览器渲染页面，使得页面出现假死状态。
因此后面AMD规范随着RequireJS的推广被提出，异步模块加载，不阻塞后面代码执行的模块引入方式，就是解决了前端模块异步模块加载的问题。

CommonJS 和AMD的对比：

CommonJS一般用于服务端，AMD一般用于浏览器客户端
CommonJS和AMD都是运行时加载