JS學(xué)習(xí)筆記 - 模塊化

CntChen 發(fā)布于2019-08-22 10:57 / 3416人閱讀

摘要：在開(kāi)發(fā)大型的項(xiàng)目中，可能會(huì)使用到管理的模塊化工具。說(shuō)道，學(xué)習(xí)過(guò)的同學(xué)會(huì)比較熟悉，是服務(wù)器模塊的規(guī)范，采用了這個(gè)規(guī)范。可能是未來(lái)模塊化解決方案的首選。

  本文章記錄本人在學(xué)習(xí) JavaScript 中理解到的一些東西，加深記憶和并且整理記錄下來(lái)，方便之后的復(fù)習(xí)。

在開(kāi)發(fā)大型的web項(xiàng)目中，可能會(huì)使用到管理js的模塊化工具。但是在前端輪子漫天飛的時(shí)代。那一款js模塊化工具真正適合我們應(yīng)用到開(kāi)發(fā)呢？目前比較流行的模塊化工具有RequireJS 、SeaJS等等。而且模塊化開(kāi)發(fā)工具都有不同的規(guī)范去約束例如：AMD CMD CommonJS。

CommonJS

說(shuō)道CommonJS，學(xué)習(xí)過(guò)Node的同學(xué)會(huì)比較熟悉，CommonJS是服務(wù)器模塊的規(guī)范，Node采用了這個(gè)規(guī)范。如果我們也想在瀏覽器中使用到CommonJS的規(guī)范的話，可以使用browserify。

下面用browserify做一個(gè)示例。首先需要安裝Node和npm（假設(shè)你已經(jīng)安裝好了）：

npm install browserify -g

接著使用npm安裝browserify，記得要安裝到全局環(huán)境中。然后新建兩個(gè)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");

我們編寫(xiě)好代碼之后，在命令行中運(yùn)行:

browserify b.js -o bundle.js
node bundle.js // 運(yùn)行 bundle.js
This is a.js // 輸出
This is b.js // 輸出

然后我們就發(fā)現(xiàn)了目錄下多了一個(gè)bundle.js的文件。這就是browserify根據(jù)我們寫(xiě)的代碼最后編譯出來(lái)的。上面只是用了browserify拋磚引玉的介紹了一下如何在客戶端中CommonJS規(guī)范。

為什么要使用CommonJS規(guī)范呢？
如果經(jīng)常寫(xiě)Node的同學(xué)可能會(huì)對(duì)CommonJS規(guī)范比較了解一些，上手比較容易。

外鏈

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

CommonJS規(guī)范

CommonJS Modules/1.0 規(guī)范

AMD

說(shuō)道模塊化的話，大多數(shù)的同學(xué)都應(yīng)該了解RequireJS，而且RequireJS是基于AMD規(guī)范的。下面也用一下小栗子來(lái)體驗(yàn)一下RequireJS。新建兩個(gè)文件一個(gè)是a.js另一個(gè)是index.html。

a.js:

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

index.html:




    
    Document

接著用瀏覽器打開(kāi)index.html，發(fā)現(xiàn)控制臺(tái)輸出了hello RequireJS!。就表示已經(jīng)成功了。上面只是一個(gè)非常簡(jiǎn)單的栗子。體驗(yàn)了一下RequireJS。

為什么要使用AMD規(guī)范呢？
因?yàn)?b>AMD是專門(mén)為瀏覽器中js環(huán)境設(shè)計(jì)的規(guī)范。它吸取了CommonJS的一些優(yōu)點(diǎn)，但是沒(méi)有全部都照搬過(guò)來(lái)。也是非常容易上手。

外鏈

RequireJS中文網(wǎng)

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

AMD規(guī)范

CMD

說(shuō)道AMD的話，又會(huì)想起有個(gè)叫CMD的東西。而且SeaJS是推薦是用CMD的寫(xiě)法，那么就使用SeaJS來(lái)編寫(xiě)一個(gè)簡(jiǎn)單的栗子：

也是新建兩個(gè)文件，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

看到頁(yè)面上輸出了Hello,JavaScript，就表示成功了。看了前面AMD和這個(gè)CMD的栗子之后，大部分人會(huì)感覺(jué)兩者寫(xiě)起來(lái)好像沒(méi)什么區(qū)別。雖然寫(xiě)起來(lái)像，還是有一些區(qū)別：

對(duì)于依賴的模塊，AMD是提前執(zhí)行，CMD是延遲執(zhí)行。不過(guò) RequireJS從2.0開(kāi)始，也改成可以延遲執(zhí)行（根據(jù)寫(xiě)法不同，處理方式不同）。CMD 推崇as lazy as possible。

CMD推崇依賴就近，AMD推崇依賴前置。

AMD的API默認(rèn)是一個(gè)當(dāng)多個(gè)用，CMD的API 嚴(yán)格區(qū)分，推崇職責(zé)單一。比如AMD里，require分全局require 和局部require，都叫require。CMD里，沒(méi)有全局 require，而是根據(jù)模塊系統(tǒng)的完備性，提供seajs.use來(lái)實(shí)現(xiàn)模塊系統(tǒng)的加載啟動(dòng)。CMD里，每個(gè)API都簡(jiǎn)單純粹。

以上區(qū)別都是摘抄自：AMD 和 CMD 的區(qū)別有哪些？玉伯的回答。

外鏈

Sea.js

Hello Sea.js

CMD規(guī)范

ES6 Module

上面解決js模塊化的方法都是使用第三方的庫(kù)來(lái)解決的。但是欣慰的是，ES6幫我們解決了原生js能夠不依賴第三方的庫(kù)來(lái)使用模塊解決方案。

  歷史上，JavaScript一直沒(méi)有模塊（module）體系，無(wú)法將一個(gè)大程序拆分成互相依賴的小文件，再用簡(jiǎn)單的方法拼裝起來(lái)。其他語(yǔ)言都有這項(xiàng)功能，比如Ruby的require、Python的import，甚至就連CSS都有@import，但是JavaScript任何這方面的支持都沒(méi)有，這對(duì)開(kāi)發(fā)大型的、復(fù)雜的項(xiàng)目形成了巨大障礙?！禘CMAScript 6 入門(mén)》 - 阮一峰

還是寫(xiě)一個(gè)小栗子了解一下，又是新建兩個(gè)文件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));

因?yàn)槭褂玫搅?b>ES6的語(yǔ)法，所以需要轉(zhuǎn)碼器來(lái)把代碼轉(zhuǎn)換成ES5的代碼。只需要使用npm安裝traceur就行了。

npm install traceur -g

安裝好之后，我們就通過(guò)traceur命令來(lái)運(yùn)行b.js。就和Node運(yùn)行js文件一樣。

traceur b.js
3 // 輸出

如果命令行中輸出了3，就表示成功了。

為什么要使用ES6 Module規(guī)范呢？
不用依賴第三方的庫(kù)來(lái)結(jié)局模塊化的問(wèn)題，語(yǔ)法簡(jiǎn)單簡(jiǎn)潔。上手簡(jiǎn)單?？赡苁俏磥?lái)模塊化解決方案的首選。

外鏈

ES6 Module

ECMAScript 6 modules: the final syntax

  最后，如果文章有什么錯(cuò)誤和疑問(wèn)的地方，請(qǐng)指出。與sf各位共勉！

云服務(wù)器 GPU云服務(wù)器學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記深度學(xué)習(xí)筆記

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/91523.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

CntChen

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

ESP8266+Blinker 的萬(wàn)物互聯(lián)（智能家居篇）

閱讀 1096·2021-11-24 09:38
谷歌推送緊急 Chrome 更新以修復(fù)兩個(gè)零日漏洞

閱讀 1270·2021-10-08 10:05
Friendhosting：9月9日TESTER’S DAY SALE（測(cè)試員節(jié)）特賣,折扣高達(dá) 5

閱讀 2750·2021-09-10 11:21
移動(dòng)端H5 viewport

閱讀 2942·2019-08-30 15:53
用更合理的方式寫(xiě) CSS

閱讀 1958·2019-08-30 15:52
彈出層完美禁止頁(yè)面滾動(dòng)

閱讀 2114·2019-08-29 12:17
你真的認(rèn)識(shí)css里面的position么？！

閱讀 3567·2019-08-29 11:21
【譯】Node.js 前端開(kāi)發(fā)指南

閱讀 1754·2019-08-26 12:17

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JS學(xué)習(xí)筆記 - 模塊化

相關(guān)文章

**Node.js 學(xué)習(xí)筆記_20170924（持續(xù)更新...）**

**Node.js 學(xué)習(xí)筆記_20170924（持續(xù)更新...）**

**Node.js 學(xué)習(xí)筆記_20170924（持續(xù)更新...）**

ES6學(xué)習(xí)筆記之模塊

Node.js學(xué)習(xí)筆記（二）

發(fā)表評(píng)論

0條評(píng)論

CntChen

男|高級(jí)講師

TA的文章

ESP8266+Blinker 的萬(wàn)物互聯(lián)（智能家居篇）

谷歌推送緊急 Chrome 更新以修復(fù)兩個(gè)零日漏洞

Friendhosting：9月9日TESTER’S DAY SALE（測(cè)試員節(jié)）特賣,折扣高達(dá) 5

移動(dòng)端H5 viewport

用更合理的方式寫(xiě) CSS

彈出層完美禁止頁(yè)面滾動(dòng)

你真的認(rèn)識(shí)css里面的position么？！

【譯】Node.js 前端開(kāi)發(fā)指南

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JS學(xué)習(xí)筆記 - 模塊化

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！