摘要:服務(wù)端使用模塊規(guī)范。所有依賴這個模塊的語句,都定義在一個回調(diào)函數(shù)中,等到加載完成之后,這個回調(diào)函數(shù)才會運行。注意是數(shù)組格式工廠方法,返回一個模塊函數(shù)如果一個模塊不依賴其他模塊,那么可以直接定義在函數(shù)之中。
js中的require、import和export require時代
Javascript社區(qū)做了很多努力,在現(xiàn)有的運行環(huán)境中,實現(xiàn)"模塊"的效果。
對象寫法把模塊寫成一個對象,所有的模塊成員都放到這個對象里面
var module1 = new Object({ _count : 0, m1 : function (){ //... }, m2 : function (){ //... } });
上面的函數(shù)m1()和m2(),都封裝在module1對象里。使用的時候,就是調(diào)用這個對象的屬性
module1.m1();
這樣的寫法會暴露所有模塊成員,內(nèi)部狀態(tài)可以被外部改寫。比如,外部代碼可以直接改變內(nèi)部計數(shù)器的值。
module._count = 1;立即執(zhí)行函數(shù)寫法
使用"立即執(zhí)行函數(shù)"(Immediately-Invoked Function Expression,IIFE),可以達到不暴露私有成員的目的
var module = (function() { var _count = 0; var m1 = function() { alert(_count) } var m2 = function() { alert(_count + 1) } return { m1: m1, m2: m2 } })()
module就是Javascript模塊的基本寫法。
主流模塊規(guī)范在es6以前,還沒有提出一套官方的規(guī)范,從社區(qū)和框架推廣程度而言,目前通行的javascript模塊規(guī)范有兩種:CommonJS 和 AMD
CommonJS規(guī)范node編程中最重要的思想之一就是模塊,而正是這個思想,讓JavaScript的大規(guī)模工程成為可能。服務(wù)端使用CommonJS模塊規(guī)范。
在CommonJS中,有一個全局性方法require(),用于加載模塊。假定有一個數(shù)學(xué)模塊math.js,就可以像下面這樣加載。
var math = require("math"); math.add(2,3); // 5
正是由于CommonJS 使用的require方式的推動,才有了后面的AMD、CMD 也采用的require方式來引用模塊的風(fēng)格
AMD規(guī)范Common.js起源于node,因此在服務(wù)端廣泛使用.對服務(wù)端,所有的模塊都存放在本地硬盤,可以同步加載完成,等待時間就是硬盤的讀取時間。但是,對于瀏覽器,這卻是一個大問題,因為模塊都放在服務(wù)器端,等待時間取決于網(wǎng)速的快慢,可能要等很長時間,瀏覽器處于"假死"狀態(tài)。
因此,瀏覽器端的模塊,不能采用"同步加載"(synchronous),只能采用"異步加載"(asynchronous)。這就是AMD規(guī)范誕生的背景。
AMD是"Asynchronous Module Definition"的縮寫,意思就是"異步模塊定義"。它采用異步方式加載模塊,模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句,都定義在一個回調(diào)函數(shù)中,等到加載完成之后,這個回調(diào)函數(shù)才會運行。
模塊必須采用特定的define()函數(shù)來定義。
define(id?, dependencies?, factory)
id:字符串,模塊名稱(可選)
dependencies: 是我們要載入的依賴模塊(可選),使用相對路徑。,注意是數(shù)組格式
factory: 工廠方法,返回一個模塊函數(shù)
如果一個模塊不依賴其他模塊,那么可以直接定義在define()函數(shù)之中。
// math.js define(function (){ var add = function (x,y){ return x+y; }; return { add: add }; });
如果這個模塊還依賴其他模塊,那么define()函數(shù)的第一個參數(shù),必須是一個數(shù)組,指明該模塊的依賴性。
define(["Lib"], function(Lib){ function foo(){ Lib.doSomething(); } return { foo : foo }; });
當(dāng)require()函數(shù)加載上面這個模塊的時候,就會先加載Lib.js文件。
AMD也采用require()語句加載模塊,但是不同于CommonJS,它要求兩個參數(shù):
require([module], callback);
第一個參數(shù)[module],是一個數(shù)組,里面的成員就是要加載的模塊;第二個參數(shù)callback,則是加載成功之后的回調(diào)函數(shù)。如果將前面的代碼改寫成AMD形式,就是下面這樣:
require(["math"], function (math) { math.add(2, 3); });
math.add()與math模塊加載不是同步的,瀏覽器不會發(fā)生假死。所以很顯然,AMD比較適合瀏覽器環(huán)境。
目前,主要有兩個Javascript庫實現(xiàn)了AMD規(guī)范:require.js和curl.js。
CMD規(guī)范CMD (Common Module Definition), 是seajs推崇的規(guī)范,CMD則是依賴就近,用的時候再require。它寫起來是這樣的:
define(function(require, exports, module) { var clock = require("clock"); clock.start(); });
CMD與AMD一樣,也是采用特定的define()函數(shù)來定義,用require方式來引用模塊
define(id?, dependencies?, factory)
id:字符串,模塊名稱(可選)
dependencies: 是我們要載入的依賴模塊(可選),使用相對路徑。,注意是數(shù)組格式
factory: 工廠方法,返回一個模塊函數(shù)
define("hello", ["jquery"], function(require, exports, module) { // 模塊代碼 });
如果一個模塊不依賴其他模塊,那么可以直接定義在define()函數(shù)之中。
define(function(require, exports, module) { // 模塊代碼 });
CMD與AMD區(qū)別注意:帶 id 和 dependencies 參數(shù)的 define 用法不屬于 CMD 規(guī)范,而屬于 Modules/Transport 規(guī)范。
AMD和CMD最大的區(qū)別是對依賴模塊的執(zhí)行時機處理不同,而不是加載的時機或者方式不同,二者皆為異步加載模塊。
AMD依賴前置,js可以方便知道依賴模塊是誰,立即加載;
而CMD依賴就近,需要使用把模塊變?yōu)樽址馕鲆槐椴胖酪蕾嚵四切┠K,這也是很多人詬病CMD的一點,犧牲性能來帶來開發(fā)的便利性,實際上解析模塊用的時間短到可以忽略。
現(xiàn)階段的標(biāo)準(zhǔn)ES6標(biāo)準(zhǔn)發(fā)布后,module成為標(biāo)準(zhǔn),標(biāo)準(zhǔn)使用是以export指令導(dǎo)出接口,以import引入模塊,但是在我們一貫的node模塊中,我們依然采用的是CommonJS規(guī)范,使用require引入模塊,使用module.exports導(dǎo)出接口。
import引入模塊import語法聲明用于從已導(dǎo)出的模塊、腳本中導(dǎo)入函數(shù)、對象、指定文件(或模塊)的原始值。
import模塊導(dǎo)入與export模塊導(dǎo)出功能相對應(yīng),也存在兩種模塊導(dǎo)入方式:命名式導(dǎo)入(名稱導(dǎo)入)和默認(rèn)導(dǎo)入(定義式導(dǎo)入)。
注意:import必須放在文件的最開始.import命令是編譯階段執(zhí)行的,在代碼運行之前,表達式和變量只有在運行時才能得到結(jié)果的語法結(jié)構(gòu)。import命令會被 JavaScript 引擎靜態(tài)分析,先于模塊內(nèi)的其他模塊執(zhí)行(叫做”連接“更合適)所以import中不能含有表達式或者變量,因此無法實現(xiàn)動態(tài)加載.
因此,import和export命令只能在模塊的頂層,不能在代碼塊之中(比如,在if代碼塊之中,或在函數(shù)之中)。
這樣的設(shè)計,有利于編譯器提高效率,但也導(dǎo)致無法在運行時加載模塊。在語法上,條件加載就不可能實現(xiàn)。如果import命令要取代 Node 的require方法,這就形成了一個障礙。因為require是運行時加載模塊,import命令無法取代require的動態(tài)加載功能。
來自阮一峰ES6教程
CommonJS 模塊輸出的是一個值的拷貝,ES6 模塊輸出的是值的引用。
CommonJS 模塊是運行時加載,ES6 模塊是編譯時輸出接口
ES6 模塊的運行機制與 CommonJS 不一樣。JS 引擎對腳本靜態(tài)分析的時候,遇到模塊加載命令import,就會生成一個只讀引用。等到腳本真正執(zhí)行時,再根據(jù)這個只讀引用,到被加載的那個模塊里面去取值。換句話說,ES6 的import有點像 Unix 系統(tǒng)的“符號連接”,原始值變了,import加載的值也會跟著變。因此,ES6 模塊是動態(tài)引用,并且不會緩存值,模塊里面的變量綁定其所在的模塊。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/112484.html
摘要:服務(wù)端使用模塊規(guī)范。所有依賴這個模塊的語句,都定義在一個回調(diào)函數(shù)中,等到加載完成之后,這個回調(diào)函數(shù)才會運行。注意是數(shù)組格式工廠方法,返回一個模塊函數(shù)如果一個模塊不依賴其他模塊,那么可以直接定義在函數(shù)之中。 js中的require、import和export require時代 Javascript社區(qū)做了很多努力,在現(xiàn)有的運行環(huán)境中,實現(xiàn)模塊的效果。 對象寫法 把模塊寫成一個對象,所...
摘要:開篇我叫王彬,現(xiàn)在是百度首頁業(yè)務(wù)部原網(wǎng)頁搜團隊索部前端的實習(xí),兩天前我得知我所在的部門只有兩個,而且要分給策略,這就意味著我要面臨千軍萬馬過獨木橋的秋招。總結(jié)我在百度實習(xí)時接觸到過一個框架,用于百度首頁和首頁的模塊化開發(fā)。 之一:關(guān)于Cmd和Amd 為什么想起來做這樣一個專題呢,答案應(yīng)該是為了勉勵面試筆試秋招中的自己吧!而且也是為了和我一樣的你。 1.開篇 我叫王彬,現(xiàn)在是百度首頁業(yè)務(wù)...
摘要:什么是單頁面應(yīng)用單頁面應(yīng)用是指用戶在瀏覽器加載單一的頁面,后續(xù)請求都無需再離開此頁目標(biāo)旨在用為用戶提供了更接近本地移動或桌面應(yīng)用程序的體驗。流程第一次請求時,將導(dǎo)航頁傳輸?shù)娇蛻舳耍溆嗾埱笸ㄟ^獲取數(shù)據(jù)實現(xiàn)數(shù)據(jù)的傳輸通過或遠(yuǎn)程過程調(diào)用。 什么是單頁面應(yīng)用(SPA)? 單頁面應(yīng)用(SPA)是指用戶在瀏覽器加載單一的HTML頁面,后續(xù)請求都無需再離開此頁 目標(biāo):旨在用為用戶提供了更接近本地...
摘要:什么是單頁面應(yīng)用單頁面應(yīng)用是指用戶在瀏覽器加載單一的頁面,后續(xù)請求都無需再離開此頁目標(biāo)旨在用為用戶提供了更接近本地移動或桌面應(yīng)用程序的體驗。流程第一次請求時,將導(dǎo)航頁傳輸?shù)娇蛻舳耍溆嗾埱笸ㄟ^獲取數(shù)據(jù)實現(xiàn)數(shù)據(jù)的傳輸通過或遠(yuǎn)程過程調(diào)用。 什么是單頁面應(yīng)用(SPA)? 單頁面應(yīng)用(SPA)是指用戶在瀏覽器加載單一的HTML頁面,后續(xù)請求都無需再離開此頁 目標(biāo):旨在用為用戶提供了更接近本地...
閱讀 3274·2021-09-23 11:55
閱讀 2620·2021-09-13 10:33
閱讀 1670·2019-08-30 15:54
閱讀 3101·2019-08-30 15:54
閱讀 2368·2019-08-30 10:59
閱讀 2374·2019-08-29 17:08
閱讀 1808·2019-08-29 13:16
閱讀 3594·2019-08-26 12:25