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就好了。