commonjs、AMD、CMD、ES6有什么区别?是什么意思?前端开发为什么要模块化?因为听朋友说面试时被问道,不是很清楚,所以想在此阐述一下。
1、为什么前端使用模块化开发?
模块化是指把一个复杂的系统分解到多个模块以方便编码。就像积木,我们可以可以重复的利用这些积木组成不同的形状。一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。模块开发需要遵循一定的规范,否则就都乱套了。
2、commonjs、AMD、CMD、ES6是什么?
commonjs、AMD、CMD是一种规范也是一种标准。
2.1 AMD
AMD 是RequireJs在推广过程中对模块化定义的规范化产出。(异步模块)AMD 规范主要是为了解决针对浏览器环境的模块化问题。
AMD异步加载模块。它的模块支持对象 函数 构造器 字符串 JSON等各种类型的模块。
AMD 的优点
- 可在不转换代码的情况下直接在浏览器中运行
- 可加载多个依赖
- 代码可运行在浏览器环境和 Node.js 环境下
AMD 的缺点
- JavaScript 运行环境没有原生支持 AMD,需要先导入实现了 AMD 的库后才能正常使用。
用法:
// 定义模块,三个参数
define(id?, deps?, factory)
// 执行模块,两个参数 依赖前置
require(deps, factory)
例子:
// 定义一个模块 通过数组引入依赖 ,回调函数通过形参传入依赖
define('a', [], function () {
return 'a';
});
define('b', ['a'], function (a) {
return a + 'b';
});
// 导入和使用
require(['b'], function (b) {
console.log(b);
});
例子分析:
参数说明:
id:指定义中模块的名字,可选;如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的
名字。如果提供了该参数,模块名必须是“顶级”的和绝对的(不允许相对名字)。
依赖deps:是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。
依赖参数是可选的,如果忽略此参数,它应该默认为["require", "exports", "module"]。
然而,如果工厂方法的长度属性小于3,加载器会选择以函数的长度属性指定的参数个数调用工厂方法。
工厂方法factory,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。
如果是对象,此对象应该为模块的输出值。
通过define来定义一个模块,a 和 b,因为require用到了b,所有需要依赖前置,先定义b,而b中又用到了a
通过deps
参数,很容易知道该文件依赖的脚本是b.js,然后去加载依赖的脚本,加载完之后执行一遍并且将执行的结果作为回调函数factory
的参数,然后执行该匿名的回调函数即可。
ps:
require API
介绍:github.com/amdjs/amdjs…
AMD
规范中文版:github.com/amdjs/amdjs…
原理:
let factories = {};
function define(modName, dependencies, factory) {
factory.dependencies = dependencies;
factories[modName] = factory;
}
function require(modNames, callback) {
let loadedModNames = modNames.map(function (modName) {
let factory = factories[modName];
let dependencies = factory.dependencies;
let exports;
require(dependencies, function (...dependencyMods) {
exports = factory.apply(null, dependencyMods);
});
return exports;
})
callback.apply(null, loadedModNames);
}
2.2 cmd
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。该规范明确了模块的基本书写格式和基本交
互规则。该规范是在国内(淘宝)发展出来的。同步概念。
在 CMD 规范中,一个模块就是一个文件。
代码的书写格式如下:
define(factory);
define
是一个全局函数,用来定义模块
define
接受 factory
参数,factory
可以是一个函数,也可以是一个对象或字符串。
factory
为对象、字符串时,表示模块的接口就是该对象、字符串。比如可以如下定义一个 JSON 数据模块:
define({ "foo": "bar" });
也可以通过字符串定义模板模块:
define('I am a template. My name is {{name}}.');
factory
为函数时,表示是模块的构造方法。执行该构造方法,可以得到模块向外提供的接口。factory
方法在执行时,默认会传入三个参数:require
、exports
和 module
:
define(function(require, exports, module) {
// 模块代码
});
define define(id?, deps?, factory)
define
也可以接受两个以上参数。字符串 id
表示模块标识,数组 deps
是模块依赖。比如:
define('hello', ['jquery'], function(require, exports, module) {
// 模块代码
});
id
和 deps
参数可以省略。省略时,可以通过构建工具自动生成。
注意:带 id
和 deps
参数的 define
用法不属于 CMD 规范,而属于 Modules/Transport 规范。
CMD具体规范: github.com/seajs/seajs…
sea.js如何使用?
- 1.- 引入sea.js的库
- 2.- 如何变成模块? - define -
- 3.-如何调用模块? -exports -sea.js.use
- 4.-如何依赖模块? -require
<script type="text/javascript">
define(function (require,exports,module) {
//exports : 对外的接口
//requires : 依赖的接口
require('./test.js');//如果地址是一个模块的话,那么require的返回值就是模块中的exports
})
</script>
2.3 commonjs
CommonJS是服务器端模块的规范,Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。核心思想是通过
require方法来同步地加载依赖的其他模块,通过 module.exports 导出需要暴露的接口。
1、根据CommonJS
规范,一个单独的文件就是一个模块。
2、每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global
对象的属性。
3、模块可以多次加载,但只会在第一次加载的时候运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果;模块的加载顺序,按照代码的出现顺序是同步加载的;
4、__dirname代表当前模块文件所在的文件夹路径,__filename代表当前模块文件所在的文件夹路径+文件名;
5、require(同步加载)基本功能:读取并执行一个JS文件,然后返回该模块的exports对象,如果没有发现指定模块会报错;
6、模块内的exports:为了方便,node为每个模块提供一个exports变量,其指向module.exports,相当于在模块头部加了这句话:var exports = module.exports,在对外输出时,可以给exports对象添加方法,PS:不能直接赋值(因为这样就切断了exports和module.exports的联系);
7、npm root -g:查看npm全局包安装位置,建议在nvm目录下新建npm\node_modules目录,然后设置npm的全局包安装位置:npm config set prefix "",然后将该路径添加到环境变量中;
8、npm init -y:初始化一个package.json文件,加上-y就会默认生成该文件,无需一步一步填写;npm docs 包名:查看包的文档;npm install:安装package.json中dependencies属性中所有依赖的包
9、由于npm的服务器是国外的,所以如果你没有和谐工具是下载不了的,这里推荐使用淘宝NPM镜像:http://npm.taobao.org/,与官方NPM的同步频率目前为10分钟一次;安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org,安装包:cnpm install 包名(其它命令基本一致);
10、如果你不想下载cnpm,npm还提供了一个镜像源管理工具:npm install -g nrm,通过:nrm ls,查看镜像源列表 ,通过:npm use 镜像源,来切换;
11、NPM的模块加载机制:
如果require的是绝对路径文件,查找不会去遍历每个node_modules目录,其速度最快
1).从module.paths数组中(由当前执行文件目录到磁盘根目录)取出第一个目录作为查找基准
2).直接从目录中查找该文件,如果存在则结束查找,如果不存在则进行下一条查找
3).尝试添加.js、.node、.json后缀之后查找,如果存在文件则结束查找,如果不存在则进行下一条查找
4).尝试将require的参数作为一个包来进行查找,读取目录下的package.json文件,取得Main参数指定的文件
5).尝试查找该文件,如果存在则结束查找,如果不存在则进行第3条查找
6).如果继续失败,则取出module.paths数组中的下一目录作为基准查找,循环第1-5个步骤
7).如果继续失败,循环第1-6个步骤,直到module.paths中的最后一个值
8).如果继续失败,则抛出异常
CommonJS定义的模块分为:
{模块引用(require)} {模块定义(exports)} {模块标识(module)}
require()用来引入外部模块;
exports对象用于导出当前模块的方法或变量,唯一的导出口;module对象就代表模块本身。
用法
采用 CommonJS 导入及导出时的代码如下:
// 导入
const someFun= require('./moduleA');
someFun();
// 导出
module.exports = someFunc;
原理
a.js
let fs = require('fs');
let path = require('path');
let b = req('./b.js');
function req(mod) {
let filename = path.join(__dirname, mod);
let content = fs.readFileSync(filename, 'utf8');
let fn = new Function('exports', 'require', 'module', '__filename', '__dirname', content + '\n return module.exports;');
let module = {
exports: {}
};
return fn(module.exports, req, module, __filename, __dirname);
}
b.js
console.log('bbb');
exports.name = 'Jones';
2.4 ES6 模块化
ES6 模块化是ECMA
提出的JavaScript
模块化规范,它在语言的层面上实现了模块化。浏览器厂商和Node.j
s 都宣布要原生支持该规范。它将逐渐取代
CommonJS和
AMD`规范,成为浏览器和服务器通用的模块解决方案。 采用 ES6 模块化导入及导出时的代码如下
// 导入
import { name } from './person.js';
// 导出
export const name = 'Jones';
3、区别
commonJS规范:服务端的模块化规范,不适用于浏览器环境。适用于nodejs,终极目标是提供一个类似Python,Ruby和Java标准库。
AMD、CMD;浏览器端模块化开发的规范,都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript
的模块化开发变得简单自然。区别:CMD
对模块的态度是懒执行(同步), 而AMD
对模块的态度是预执行(异步)ps:AMD目前也在同步。
commonjs\AMD、CMD是es5中退出的。
es6中的:import|export
本文内容参考网上内容,如有雷同和错误,请与我联系。