AMD_CMD_RequireJS_模塊化

1. 為什么要使用模塊化?

1.解決命名沖突
2.解決文件依賴問題
3.模塊的版本管理。通過別名等配置,配合構(gòu)建工具,可以比較輕松地實(shí)現(xiàn)模塊的版本管理。
4.提高可維護(hù)性。模塊化可以讓每個文件的職責(zé)單一,非常有利于代碼的維護(hù)。
5.前端性能優(yōu)化。通過異步加載模塊,這對頁面性能非常有益。
6.跨環(huán)境共享模塊。CMD 模塊定義規(guī)范與 Node.js 的模塊規(guī)范非常相近。可以很方便實(shí)現(xiàn)模塊的跨服務(wù)器和瀏覽器共享。
7.提高代碼可讀性,代碼解耦,提高復(fù)用性
參考:玉伯也射雕github

2. CMD、AMD、CommonJS 規(guī)范分別指什么?有哪些應(yīng)用

CommonJS
1.Node應(yīng)用由模塊組成,采用CommonJS模塊規(guī)范。
根據(jù)這個規(guī)范,每個文件就是一個模塊,有自己的作用域。在一個文件里面定義的變量、函數(shù)、類,都是私有的,對其他文件不可見

2.CommonJS規(guī)范規(guī)定,每個模塊內(nèi)部,module變量代表當(dāng)前模塊。這個變量是一個對象,它的exports屬性(即module.exports)是對外的接口。加載某個模塊,其實(shí)是加載該模塊的module.exports屬性,加載模塊使用require 方法,該方法讀取一個文件并執(zhí)行,如果請求的模塊不能返回,那么 require 必須拋出一個錯誤。

3.CommonJS模塊的特點(diǎn)如下:
所有代碼都運(yùn)行在模塊作用域,不會污染全局作用域。
模塊可以多次加載,但是只會在第一次加載時運(yùn)行一次,然后運(yùn)行結(jié)果就被緩存了,以后再加載,就直接讀取緩存結(jié)果。要想讓模塊再次運(yùn)行,必須清除緩存。
模塊加載的順序,按照其在代碼中出現(xiàn)的順序

js標(biāo)準(zhǔn)教程

/*
模塊定義model.js
*/ 

function printName(){
    console.log('a');
}
function sayHello(){
    console.log("hello" );
}
module.exports = {
    printName: printName,
    sayHello: sayHello
}
/*
加載模塊
*/
var nameModule = require("./model.js")
nameModule.printName() //"a"
nameModule.sayHello() //"hello"

AMD
1.define和require這兩個定義模塊、調(diào)用模塊的方法,合稱為AMD模式。它的模塊定義的方法非常清晰,不會污染全局環(huán)境,能夠清楚地顯示依賴關(guān)系,主要用于瀏覽器端。

2.AMD模式可以用于瀏覽器環(huán)境,并且允許非同步加載模塊,也可以根據(jù)需要動態(tài)加載模塊

3.requireJS主要解決兩個問題:
a. 多個js文件可能有依賴關(guān)系,被依賴的文件需要早于依賴它的文件加載到瀏覽器
b. js加載的時候?yàn)g覽器會停止頁面渲染,加載文件越多,頁面失去響應(yīng)時間越長

4.語法:
define(id?, dependencies?, factory);
require([dependencies], function(){});

//定義模塊 myModule.js
define(['dependency'],function(){
    //定義方法,并return 出去
    var name = 'xx'
    function PrintName(){
        console.log(name);
    }
    return {
        PrintName:PrintName
    }
})
//加載模塊
require(['mod'],function(my){
    my.PrintName();
})

/*
define(id?, dependencies?, factory);

A. id: 定義中模塊的名字,可選;如果沒有提供該參數(shù),模塊的名字應(yīng)該默認(rèn)為模塊加載器請求的指定腳本的名字。。
B. 依賴dependencies:是一個當(dāng)前模塊依賴的,已被模塊定義的模塊標(biāo)識的數(shù)組字面量。 定的參數(shù)個數(shù)調(diào)用工廠方法。
C. 工廠方法factory,模塊初始化要執(zhí)行的函數(shù)或?qū)ο蟆H绻麨楹瘮?shù),它應(yīng)該只被執(zhí)行一次。如果是對象,此對象應(yīng)該為模塊的輸出值。

require([dependencies], function(){});

A. 第一個參數(shù)是一個數(shù)組,表示所依賴的模塊
B. 第二個參數(shù)是一個回調(diào)函數(shù),當(dāng)前面指定的模塊都加載成功后,它將被調(diào)用。加載的模塊會以參數(shù)形式傳入該函數(shù),從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊
require()函數(shù)在加載依賴的函數(shù)的時候是異步加載的,這樣瀏覽器不會失去響應(yīng),它指定的回調(diào)函數(shù),只有前面的模塊都加載成功后,才會運(yùn)行,解決了依賴性的問題。
*/

CMD
CMD(Common Module Definition)是 SeaJS推廣過程中產(chǎn)生的。在 CMD 規(guī)范中,一個模塊就是一個文件。
define(id?, deps?, factory)
A. 一個文件一個模塊,所以經(jīng)常就用文件名作為模塊id
B. CMD推崇依賴就近,所以一般不在define的參數(shù)中寫依賴,在factory中寫
factory有三個參數(shù) function(require, exports, module)
require 是 factory 函數(shù)的第一個參數(shù),require 是一個方法,接受 模塊標(biāo)識 作為唯一參數(shù),用來獲取其他模塊提供的接口
Exports:exports
是一個對象,用來向外提供模塊接口
Module:module
是一個對象,上面存儲了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法

//定義模塊 myModule.js
define(function(require, exports, module){
    var $ = require("jquery.js")
    $("div").addClass("active")
})

//加載模塊
seajs.use(['myModule.js'], function(my){

})

3. 使用 requirejs 完成企業(yè)建站功能包括:

1. 首屏大圖為全屏輪播
2. 有回到頂部功能
3. 圖片區(qū)使用瀑布流布局(圖片高度不一),下部有加載更多按鈕,點(diǎn)擊加載更多會加載更多數(shù)據(jù)(數(shù)據(jù)在后端 mock)
4. 使用 r.js 打包應(yīng)用

企業(yè)建站模塊化_效果預(yù)覽

gitHub_代碼預(yù)覽

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容