国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[面試專題]JS中模塊AMD,CMD,import

xinhaip / 1807人閱讀

摘要:服務(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) {
  // 模塊代碼
});

注意:帶 id 和 dependencies 參數(shù)的 define 用法不屬于 CMD 規(guī)范,而屬于 Modules/Transport 規(guī)范。

CMD與AMD區(qū)別

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 模塊輸出的是值的引用。
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

相關(guān)文章

  • [面試專題]JS模塊AMD,CMD,import

    摘要:服務(wù)端使用模塊規(guī)范。所有依賴這個模塊的語句,都定義在一個回調(diào)函數(shù)中,等到加載完成之后,這個回調(diào)函數(shù)才會運行。注意是數(shù)組格式工廠方法,返回一個模塊函數(shù)如果一個模塊不依賴其他模塊,那么可以直接定義在函數(shù)之中。 js中的require、import和export require時代 Javascript社區(qū)做了很多努力,在現(xiàn)有的運行環(huán)境中,實現(xiàn)模塊的效果。 對象寫法 把模塊寫成一個對象,所...

    dreamans 評論0 收藏0
  • 面試系列】之一:關(guān)于CmdAmd

    摘要:開篇我叫王彬,現(xiàn)在是百度首頁業(yè)務(wù)部原網(wǎng)頁搜團隊索部前端的實習(xí),兩天前我得知我所在的部門只有兩個,而且要分給策略,這就意味著我要面臨千軍萬馬過獨木橋的秋招。總結(jié)我在百度實習(xí)時接觸到過一個框架,用于百度首頁和首頁的模塊化開發(fā)。 之一:關(guān)于Cmd和Amd 為什么想起來做這樣一個專題呢,答案應(yīng)該是為了勉勵面試筆試秋招中的自己吧!而且也是為了和我一樣的你。 1.開篇 我叫王彬,現(xiàn)在是百度首頁業(yè)務(wù)...

    lordharrd 評論0 收藏0
  • 前端面試題(3)現(xiàn)代技術(shù)

    摘要:什么是單頁面應(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):旨在用為用戶提供了更接近本地...

    EasonTyler 評論0 收藏0
  • 前端面試題(3)現(xiàn)代技術(shù)

    摘要:什么是單頁面應(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):旨在用為用戶提供了更接近本地...

    trigkit4 評論0 收藏0

發(fā)表評論

0條評論

xinhaip

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<