JS學習筆記 - 模塊化

CntChen 發布于2019-08-22 10:57 / 3335人閱讀

摘要：在開發大型的項目中，可能會使用到管理的模塊化工具。說道，學習過的同學會比較熟悉，是服務器模塊的規范，采用了這個規范。可能是未來模塊化解決方案的首選。

本文章記錄本人在學習 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規范比較了解一些，上手比較容易。

外鏈

前端模塊及依賴管理的新選擇：Browserify

CommonJS規范

CommonJS Modules/1.0 規范

AMD

說道模塊化的話，大多數的同學都應該了解RequireJS，而且RequireJS是基于AMD規范的。下面也用一下小栗子來體驗一下RequireJS。新建兩個文件一個是a.js另一個是index.html。

a.js:

define(function () {
    console.log("hello RequireJS!");
});

index.html:




    
    Document

接著用瀏覽器打開index.html，發現控制臺輸出了hello RequireJS!。就表示已經成功了。上面只是一個非常簡單的栗子。體驗了一下RequireJS。

為什么要使用AMD規范呢？
因為AMD是專門為瀏覽器中js環境設計的規范。它吸取了CommonJS的一些優點，但是沒有全部都照搬過來。也是非常容易上手。

外鏈

RequireJS中文網

Javascript模塊化編程（三）：require.js的用法

AMD規范

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：




    
    Document

看到頁面上輸出了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 的區別有哪些？玉伯的回答。

外鏈

Sea.js

Hello Sea.js

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規范呢？
不用依賴第三方的庫來結局模塊化的問題，語法簡單簡潔。上手簡單。可能是未來模塊化解決方案的首選。

外鏈

ES6 Module

ECMAScript 6 modules: the final syntax

最后，如果文章有什么錯誤和疑問的地方，請指出。與sf各位共勉！

云服務器 GPU云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91523.html

Node.js 學習筆記_20170924（持續更新...）

摘要：記錄學習的點點滴滴，方便日后查看。筆記源于網老師安裝官網下載安裝官網下載與電腦配版本，說明一下是長期支持版本是當前最新版本。瀏覽器請求訪問此地址會出現，第一個服務就完成了，是不是很簡單。模塊分類模塊分為核心模塊文件模塊第三方模塊。記錄學習 Node.js 的點點滴滴，方便日后查看。（筆記源于imooc網Scott老師） 1. 安裝 Node.js官網：https://nodejs....

魏憲會 2019-08-01 17:41 評論0 收藏0
Node.js 學習筆記_20170924（持續更新...）

摘要：記錄學習的點點滴滴，方便日后查看。筆記源于網老師安裝官網下載安裝官網下載與電腦配版本，說明一下是長期支持版本是當前最新版本。瀏覽器請求訪問此地址會出現，第一個服務就完成了，是不是很簡單。模塊分類模塊分為核心模塊文件模塊第三方模塊。記錄學習 Node.js 的點點滴滴，方便日后查看。（筆記源于imooc網Scott老師） 1. 安裝 Node.js官網：https://nodejs....

CoderDock 2019-08-21 16:43 評論0 收藏0
Node.js 學習筆記_20170924（持續更新...）

摘要：記錄學習的點點滴滴，方便日后查看。筆記源于網老師安裝官網下載安裝官網下載與電腦配版本，說明一下是長期支持版本是當前最新版本。瀏覽器請求訪問此地址會出現，第一個服務就完成了，是不是很簡單。模塊分類模塊分為核心模塊文件模塊第三方模塊。記錄學習 Node.js 的點點滴滴，方便日后查看。（筆記源于imooc網Scott老師） 1. 安裝 Node.js官網：https://nodejs....

remcarpediem 2019-08-30 15:53 評論0 收藏0
ES6學習筆記之模塊

摘要：但是一直沒有在語言層面支持模塊，直到的出現。相信在不久的將來，的模塊一定會全面取代和。的模塊提供了個新的語法，分別是和。就是模塊用來對外暴露數據的接口，具體用法如下。本文同步自我得博客：http://www.joeray61.com 簡介在當今的Javascript程序中，模塊的作用不言而喻，目前廣泛應用的主要有AMD（瀏覽器端）和CommonJS（服務器端）。但是Javascri...

Airmusic 2019-08-19 18:38 評論0 收藏0
Node.js學習筆記（二）

摘要：今天的內容涉及的原理運行機制和的內容，會有點沉悶，也會有點困難，建議像我一樣做一些筆記。這個變量就是這個模塊與外界的一個出口。中，變量就是在中暴露的函數。具體原因同樣涉及到的內部處理。有興趣的同學可以參考上面的那篇文章。今天的內容涉及Node的原理、運行機制和CommonJS的內容，會有點沉悶，也會有點困難，建議像我一樣做一些筆記。模塊在開發大型應用的時候，我們常常會用到全局變量...

fireflow 2019-08-26 11:36 評論0 收藏0