模块化的区别

2021-10-13  本文已影响0人  lvyweb

一、AMD，异步模块定义（Asynchronous Module Definition）

它是一个在浏览器端模块化开发的规范。
依赖前置（依赖必须是一开始就写好）会尽早执行（依赖）模块，话句话说，所有的require都被提前执行（require可以是全局或者局部）
由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是RequireJS。
1）定义模块：define()
定义一个就modelName的模块，且该模块的依赖为a,b,c。当加载完所有的依赖（即加载完a,b,c）后，再执行回调函数，返回模块的输出值（即对外暴露的值）

define('modelName',['a','b','c'],function(){
return {}//返回模块输出值（由向外暴露的变量组成）
})

二、CMD，通用模块定义（Common Module Definition）

CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS
在CMD规范中推崇：

define(function(require,exports,module){
var a = require('./a');//按需加载

exports.add = add;//向外暴露的变量
})

CMD和AMD的比较

三、CommonJS

最早期在网页端没有模块化变成只是页面JavaScript逻辑复杂，但也可以工作下去，在服务器端却一定要有模块，所以CommonJS出现了,CommonJS规范是由NodeJS发扬光大。
1）定义模块：根据CommonJS规范，一个单独的文件就是一个模块，每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
2)模块输出：模块输出只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象
3）加载模块：加载模块使用require方法，该方法读取一个文件并执行，返回文件内容部的module.exports对象

// 定义模块math.js
var basicNum = 0;
function add(a,b){
    return a+b;
}
module.exports = { //在这里写上需要向外暴露的函数、变量
    add:add,
    basicNum:basicNum
}

// 引用自定义模块，参数包含路径，可省略.js
var math = require('./math');
math.add(2,4);

//引用核心模块：参数不需要带路径
var http = require('http');
http.createService(...).listen(3000)

commonJS用同步的方式加载模块，在服务端，模块文件都存在本地磁盘，读取非常快，所以这样做不会有问题，但是在浏览器端，限于网络原因，更合理的方案是使用异步加载，所以浏览器端一般不使用commonJS了

四、ES6 Module

ES6 Module 主要有两个命令构成：export和import

//    定义模块math.js 
var basicNum = 0;
var add = function(a,b){
    return a+b;
}
export {basicNum,add};//暴露给外部的变量

// 引用模块
import { basicNum,add } form './math';
function test(ele){
    ele.textContent = add(99 + basicNum);
}

如上所示：使用import命令的时候，用户需要知道所要加载的变量名或者函数名。其实ES6还提供了 export default 命令，为模块指定默认输出，对应的import语句不需要使用大括号。

    //    定义模块math.js 
var basicNum = 0;
var add = function(a,b){
    return a+b;
}
export {basicNum,add};//暴露给外部的变量

// 引用模块
import math form './math';
function test(ele){
    ele.textContent = math.add(99 + math.basicNum);
}

ES6模块与CommonJS模块

CommonJS模块输出是一个值的拷贝，ES6模块输出的是值的引用。

上一篇 下一篇

猜你喜欢

热点阅读