JS学习笔记 - 模块化

时间 2019-11-06

原文原文链接

本文章记录本人在学习 JavaScript 中理解到的一些东西，加深记忆和而且整理记录下来，方便以后的复习。javascript

在开发大型的web项目中，可能会使用到管理js的模块化工具。可是在前端轮子漫天飞的时代。那一款js模块化工具真正适合咱们应用到开发呢？目前比较流行的模块化工具备RequireJS 、SeaJS等等。并且模块化开发工具都有不一样的规范去约束例如：AMD CMD CommonJS。html

CommonJS

说道CommonJS，学习过Node的同窗会比较熟悉，CommonJS是服务器模块的规范，Node采用了这个规范。若是咱们也想在浏览器中使用到CommonJS的规范的话，可使用browserify。前端

下面用browserify作一个示例。首先须要安装Node和npm（假设你已经安装好了）：java

npm install browserify -g

接着使用npm安装browserify，记得要安装到全局环境中。而后新建两个js文件，分别是a.js和b.js。node

// a.js
module.exports = function () {
    console.log('This is a.js');
};

//b.js
var a = require('./a');
a();
console.log('This is b.js');

咱们编写好代码以后，在命令行中运行:git

browserify b.js -o bundle.js
node bundle.js // 运行 bundle.js
This is a.js // 输出
This is b.js // 输出

而后咱们就发现了目录下多了一个bundle.js的文件。这就是browserify根据咱们写的代码最后编译出来的。上面只是用了browserify抛砖引玉的介绍了一下如何在客户端中CommonJS规范。es6

为何要使用CommonJS规范呢？
若是常常写Node的同窗可能会对CommonJS规范比较了解一些，上手比较容易。

外链github

AMD

说道模块化的话，大多数的同窗都应该了解RequireJS，并且RequireJS是基于AMD规范的。下面也用一下小栗子来体验一下RequireJS。新建两个文件一个是a.js另外一个是index.html。web

a.js:npm

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各位共勉！