本文章记录本人在学习 JavaScript 中理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。
在开发大型的web
项目中,可能会使用到管理js
的模块化工具。但是在前端轮子漫天飞的时代。那一款js
模块化工具真正适合我们应用到开发呢?目前比较流行的模块化工具有RequireJS 、SeaJS
等等。而且模块化开发工具都有不同的规范去约束例如:AMD CMD CommonJS
。
CommonJS
说道CommonJS
,学习过Node
的同学会比较熟悉,CommonJS
是服务器模块的规范,Node
采用了这个规范。如果我们也想在浏览器中使用到CommonJS
的规范的话,可以使用browserify
。
下面用browserify
做一个示例。首先需要安装Node
和npm
(假设你已经安装好了):
npm install browserify -g
接着使用npm
安装browserify
,记得要安装到全局环境中。然后新建两个js
文件,分别是a.js
和b.js
。
// a.js
module.exports = function () {
console.log('This is a.js');
};
//b.js
var a = require('./a');
a();
console.log('This is b.js');
我们编写好代码之后,在命令行中运行:
browserify b.js -o bundle.js
node bundle.js // 运行 bundle.js
This is a.js // 输出
This is b.js // 输出
然后我们就发现了目录下多了一个bundle.js
的文件。这就是browserify
根据我们写的代码最后编译出来的。上面只是用了browserify
抛砖引玉的介绍了一下如何在客户端中CommonJS
规范。
- 为什么要使用
CommonJS
规范呢?
如果经常写Node
的同学可能会对CommonJS
规范比较了解一些,上手比较容易。
外链
AMD
说道模块化的话,大多数的同学都应该了解RequireJS
,而且RequireJS
是基于AMD
规范的。下面也用一下小栗子来体验一下RequireJS
。新建两个文件一个是a.js
另一个是index.html
。
a.js
:
define(function () {
console.log('hello RequireJS!');
});
index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script data-main="a.js" src="http://apps.bdimg.com/libs/require.js/2.1.9/require.min.js"></script>
</body>
</html>
接着用浏览器打开index.html
,发现控制台输出了hello RequireJS!
。就表示已经成功了。上面只是一个非常简单的栗子。体验了一下RequireJS
。
- 为什么要使用
AMD
规范呢?
因为AMD
是专门为浏览器中js
环境设计的规范。它吸取了CommonJS
的一些优点,但是没有全部都照搬过来。也是非常容易上手。
外链
CMD
说道AMD
的话,又会想起有个叫CMD
的东西。而且SeaJS
是推荐是用CMD
的写法,那么就使用SeaJS
来编写一个简单的栗子:
也是新建两个文件,greet.js
和index.html
:
greet.js
:
define(function (require, exports) {
function helloPython() {
document.write("Hello,Python");
}
function helloJavaScript() {
document.write("Hello,JavaScript");
}
exports.helloPython = helloPython;
exports.helloJavaScript = helloJavaScript;
});
index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="http://apps.bdimg.com/libs/seajs/2.3.0/sea.js"></script>
<script>
seajs.use(['./greet'], function (Greet) {
Greet.helloJavaScript()
});
</script>
</body>
</html>
看到页面上输出了Hello,JavaScript
,就表示成功了。看了前面AMD
和这个CMD
的栗子之后,大部分人会感觉两者写起来好像没什么区别。虽然写起来像,还是有一些区别:
- 对于依赖的模块,
AMD
是提前执行,CMD
是延迟执行。不过RequireJS
从2.0
开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD
推崇as lazy as possible
。 -
CMD
推崇依赖就近,AMD
推崇依赖前置。 -
AMD
的API
默认是一个当多个用,CMD
的API
严格区分,推崇职责单一。比如AMD
里,require
分全局require
和局部require
,都叫require
。CMD
里,没有全局require
,而是根据模块系统的完备性,提供seajs.use
来实现模块系统的加载启动。CMD
里,每个API
都简单纯粹。
以上区别都是摘抄自:AMD 和 CMD 的区别有哪些?玉伯的回答。
外链
ES6 Module
上面解决js
模块化的方法都是使用第三方的库来解决的。但是欣慰的是,ES6
帮我们解决了原生js
能够不依赖第三方的库来使用模块解决方案。
历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如Ruby的require、Python的import,甚至就连CSS都有@import,但是JavaScript任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。《ECMAScript 6 入门》 - 阮一峰
还是写一个小栗子了解一下,又是新建两个文件a.js
和b.js
:
// a.js
var num1 = 1;
var num2 = 2;
export {num1, num2};
// b.js
import {num1, num2} from './a.js';
function add(num1, num2) {
return num1 + num2;
}
console.log(add(num1, num2));
因为使用到了ES6
的语法,所以需要转码器来把代码转换成ES5
的代码。只需要使用npm
安装traceur
就行了。
npm install traceur -g
安装好之后,我们就通过traceur
命令来运行b.js
。就和Node
运行js
文件一样。
traceur b.js
3 // 输出
如果命令行中输出了3,就表示成功了。
- 为什么要使用
ES6 Module
规范呢?
不用依赖第三方的库来结局模块化的问题,语法简单简洁。上手简单。可能是未来模块化解决方案的首选。
外链
最后,如果文章有什么错误和疑问的地方,请指出。与sf各位共勉!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。