常用的三种模块化规范
个人博客网站欢迎交流:萤火之森: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都是运行时加载