javascript的模块发展
谨以此文记录了解js模块的过程
随着ES6的出现,js模块已经成为正式的标准了。曾经为了解决js模块问题而发展起来的民间秘籍,requireJs(AMD)、SeaJs(CMD)、Node(CommonJs),已经或者不久的将来会成为历史。了解历史也是很重要的,因为正式标准就是以民间秘籍为基础而发展起来的,有些规范仍然被广泛应用于开发中(CommonJS)。再者,进入有些公司,你的工作可能是继承前辈们的代码,为了不至于始终一脸懵,认识一下这些东西是很重要的。
关于js模块的发展历史
github上玉伯发表的issue:地址
CommonJs模块规范
- 用于同步加载模块
- 主要应用于服务端
关于CommonJS的说明:commonjs
Node参考CommonJS实现了一套模块系统,npm上有大量的CommonJS的包,ECMAScript取代CommonJS可能还需要一些时日。
CommonJs对模块的定义很简单,主要分为模块引用、模块定义和模块标识。
模块引用
使用require()方法,该方法接收模块标识,引入一个模块的API到当前上下文。
var math = require("math");
math.add();
模块定义
上下文提供exports对象用于导出当前模块的方法或者变量,并且它是唯一导出的出口。module对象,代表模块自身,exports是module的属性。将方法挂载在exports对象上作为属性即可定义导出的方式。
exports.add = function () {
var sun = 0,
i = 0,
args = arguments,
l = args.length; while (i < 1) {
sum += args[i++];
}
return sum;
}
模块标识
模块标识是传递给require()方法的参数,它必须是符合小驼峰命名的字符串,或者以.,..开头的相对路径,或者绝对路径。它可以没有文件名后缀.js。
优势
- 语法简单,只需要定义module.exports属性,剩下的模块代码与标准Javascript无差异。引用模块的方法也很简单,只需要使用require函数
- CommonJS是Node.js默认的模板格式,所以我们可以是用成千上万的包
缺点
- 最大的缺点就是不显示的支持浏览器,(浏览器端的javascript不支持module变量和export属性,当然也有方法可以在浏览器中使用CommonJS模块,可以查看这里)由此也产生了另外的用于前端浏览器的规范AMD
AMD与requireJS
AMD是CommonJS的一个延伸,制定了能够在前端应用的模块规范。
- 异步加载模块
- 主要用于浏览器
github中AMD的定义——地址
规范
// 模块定义
// id和dependencies都是可选的
// factory是模块的实际代码
define(id, dependencies, factory); define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function () {
return beta.verb();
//Or:
return require("beta").verb();
}
});
// 不带id(名称)
define(["alpha"], function (alpha) {
return {
verb: function () {
return alpha.verb() + 2;
}
};
});
// 不带名称和依赖
define({
add: function (x, y) {
return x + y;
}
}); // 引用模块
// module是要加载的模块
// callback在加载完成之后运行
require([module], callback)
require(['a', 'b'], function (a, b) {
//modules a and b are now available for use.
});
优势
- 自动处理依赖,无序考虑引入顺序
- 异步加载模块,避免阻塞
requireJS
requireJS实现了AMD规范,具体使用方法请移步——中文API
CMD与SeaJS
CMD是玉伯在学习requireJs的过程中,自己提出的一个规范。SeaJs作为实现该规范的工具,一度成为与requireJs并肩的工具(当然主要是在国内)
玉伯在2015年宣布Seajs已死。ES2015正式发布了。不再需要民间力量修补这个漏洞了。
ES6Module
以上所有规范都是ES6之前产生的,为ES6奠定了基础。ES6汲取了CommonJS和AMD的优点:
- 与CommonJS类似,语法简单,一个文件是一个模块
- 与AMD类似,同样支持异步加载模块
语法
http://es6.ruanyifeng.com/#docs/module
总结
CommonJS规范,语法简单、同步加载、主要应用于服务端。目前在Node中仍然占据重要地位。
AMD规范,作为CommonJS的延伸,语法略微复杂一些,异步加载,主要应用于浏览器。
ES6 Module作为javascript内置的模块标准,虽然浏览器目前并不完全支持,但是有Babel等转换器,帮助转换ES6语法到ES5语法,从现在开始学习并应用ES6,也许是比较好的选择。
参考
- js模块发展历史——地址
- 知乎上玉伯关于CMD和AMD的区别的回答——地址
- require.js——中文官网
- 《深入理解es6》
- exploringJs——https://exploringjs.com/es6/
最新文章
- 搭建TFS 2015 Build Agent环境(三)
- C语言三维数组分解
- 从UWP到SWIFT - TableBarController 和 Pivot
- redis常用操作总结
- Learning The Bash Shell读书笔记(整理)
- Ubuntu 12 升级 SVN 1.6 到 1.8 版本
- VS2010 打开 VS2012 的项目
- openstack 流量控制
- ORA-01654 索引 无法通过 表空间扩展
- EasyUI中Base(基础)的基本用法
- JS事件中的对象
- 使用grunt运行hintjs任务
- 第二步 在D2RQ平台上配置jena环境
- Python 函数和模块
- 讨论asp.net通过机器cookie仿百度(google)实现搜索input搜索提示弹出框自己主动
- MYSQL启用日志,查看日志,利用mysqlbinlog工具恢复MySQL数据库【转载】
- webpack3中文版使用参考文档--全面解析webpack.config.js
- wamp phpcms部署网站问题
- 1. Two Sum (快速排序;有序数组的查找: 两个指针; 哈希表)
- 团队作业——Alpha冲刺 4/12