一直對JS都是一知半解,最近遇到這方面問題,所以在網上學習了一下,現(xiàn)在還沒有完全明白,先貼出筆記;

第一章 JavaScript模塊化編程

(一):模塊的寫法

一 原始寫法

// 模塊就是實現(xiàn)特定功能的一組方法;只要把不同的函數(shù)(以及記錄狀態(tài)的變量)簡單地放在一起,就算是一個模塊;

function m1(){

// ...

}

function m2(){

// ...

}

// 上面的函數(shù)m1()和m2(),組成一個模塊;使用時直接調用就行;

// 缺點:"污染"了全局變量; 無法保證不與其他模塊發(fā)生變量名沖突,而且模塊成員之間看不出直接關系;

二 對象寫法

// 把模塊寫成一個對象,所有的模塊成員都放到這個對象里面;

var module = new Object({

_count:0,

m1:function(){

// ...

},

m2:function(){

// ...

}

});

// 上面的函數(shù)m1()和m2(),都封裝在module對象里;使用時直接調用這個對象的屬性;

module.m1();

// 但是,這樣的寫法會暴露所有模塊成員,內部狀態(tài)可以被外部改寫;

module._count = 4;

三 立即執(zhí)行函數(shù)寫法

var module = (function(){

var _count = 0;

var m1 = function(){

// ...

};

var m2 = function(){

};

return {

m1:m1,

m2:m2

};

})();

// 使用上面的寫法,外部代碼無法讀取內部的_count變量;

console.info(module._count); // undefined;

// 上面的寫法就是JavaScript模塊的基本寫法;

四 放大模式

1

2

3

4

5

6

7

8

// 如果模塊很大,必須分成幾個部分,或者一個模塊需要繼承另一個模塊,這時就有必要采用"放大模式";

var module = (function(mod){

mod.m3 = function(){

// ...

};

return mod;

})(module);

// 上面的代碼為module模塊添加了一個新方法m3(),然后返回新的module模塊;

五 寬放大模式

1

2

3

4

5

6

7

// 在瀏覽器環(huán)境中,模塊的各個部分通常都是從網上獲取的,有時無法知道哪個部分會先加載;

// 如果采用上一節(jié)的寫法,第一個執(zhí)行的部分有可能加載一個不存在的空對象,這時就要采用"寬放大模式";

var module = (function(mod){

// ...

return mod;

})(window.module || {});

// 與"放大模式"相比,"寬放大模式"就是"立即執(zhí)行函數(shù)"的參數(shù)可以是空對象;

六 輸入全局變量

1

2

3

4

5

6

7

// 獨立性是模塊的重要特點,模塊內部最好不與程序的其他部分直接交互;

// 為了在模塊內部調用全局變量,必須顯式地將其他變量輸入模塊;

var module = (function($,YAHOO){

// ...

})(jQuery,YAHOO);

// 上面的module模塊需要使用jQuery庫和YUI庫,就把這兩個庫(其實是兩個模塊)當作參數(shù)輸入module;

// 這樣做除了保證模塊的獨立性,還使得模塊之間的依賴關系變得明顯;

第二章 JavaScript模塊化編程(二):AMD規(guī)范

一 模塊的規(guī)范

// 目前,通行的JavaScript模塊規(guī)范共有兩種:CommonJS和AMD;

二 CommonJS

// node.js將javascript語言用于服務器端編程,這標志"JavaScript模塊化編程"正式誕生;

// node.js的模塊系統(tǒng),就是參照CommonJS規(guī)范實現(xiàn)的;

在CommonJS中,有一個全局性方法require(),用于加載模塊;

var math = require('math'); // 加載模塊;

math.add(2,3); // 調用模塊方法=>5;

三 瀏覽器環(huán)境

// 上一節(jié)的代碼在瀏覽器中運行會有很大的問題;

var math = require('math');

math.add(2,3);

// 問題:必須在require('math')等math.js加載完成,才會執(zhí)行math.add(2,3);

// 所以瀏覽器的模塊,不能采用"同步加載",只能采用"異步加載";==>AMD;

四 AMD

AMD(Asynchronous Module Definition)異步模塊定義;

// 采用異步加載模塊,模塊的加載不影響它后面語句的運行,所有依賴這個模塊的語句,都定義在一個回調函數(shù)中,

// 等加載完成之后,這個回調函數(shù)才會運行;

// AMD也采用require()語句加載模塊,但是它要求兩個參數(shù):

require([module],callback);

// module:是一個數(shù)組,里面的成員就是要加載的模塊;

// callback:是加載成功之后的回調函數(shù);

require(['math'],function(math){

math.add(2,3);

});

// math.add()與math模塊加載不是同步的,瀏覽器不會發(fā)生假死;所以,AMD比較適合瀏覽器環(huán)境;

第三章 JavaScript模塊化編程(三):require.js的用法

一 為什么使用require.js

// 需要依次加載多個js文件;

// 缺點:

// 1.加載的時候,瀏覽器會停止網頁渲染,加載文件越多,網頁失去響應的時間就會越長;

// 2.由于js文件之間存在依賴關系,因此必須嚴格保證加載順序,當依賴關系很復雜的時候,代碼的編寫和維護都會變得困難;

// 所以require.js解決了這兩個問題:

// 1.實現(xiàn)js文件的異步加載,避免網頁失去響應;

// 2.管理模塊之間的依賴性,便于代碼的編寫和維護;

二 require.js的加載

1.加載require.js

<script scr="js/require.js" defer async="true"></script>

// async屬性表明這個文件需要異步加載,避免網頁失去響應;IE不支持這個屬性,只支持defer,所以把defer也寫上;

2.加載main.js

<script src="js/require.js" data-main="js/main"></script>

// data-main屬性的作用是,指定網頁程序的主模塊=>main.js,這個文件會第一個被require.js加載;

// 由于require.js默認的文件后綴名是js,所以可以把main.js簡寫成main;

三 主模塊main.js的寫法

1.如果main.js不依賴任何其他模塊,可以直接寫入JavaScript代碼;

// main.js

alert('加載成功!');

2.如果main.js依賴于模塊,這時就要使用AMD規(guī)范定義的require()函數(shù);

// main.js

require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){

// ...

})

// require()函數(shù)接收兩個參數(shù):

// 參數(shù)一:數(shù)組,表示所依賴的模塊,即主模塊依賴的三個模塊;

// 參數(shù)二:回調函數(shù),當前面指定的模塊都加載成功后,它將被調用;加載的模塊會以參數(shù)形式傳入該函數(shù),從而在回調函數(shù)內部可以使用這些模塊;

// require()異步加載模塊,瀏覽器不會失去響應;它指定的回調函數(shù),只有前面的模塊都加載成功后,才會運行,解決了依賴性的問題;

實例:

require(['jquery','underscore','backbone'],function($,_,Backbone){

// ...

});

四 模塊的加載

// 使用require.config()方法,可以對模塊的加載行為進行自定義;

// require.config()就寫在主模塊(main.js)的頭部;

// 參數(shù)就是一個對象,這個對象的paths屬性指定各個模塊的加載路徑;

// 設定以下三個模塊的文件默認和main.js在用一個目錄;

require.config({

paths:{

"jquery":"jquery.min",

"underscore":"underscore.min",

"backbone":"backbone.min"

}

});

// 如果加載的模塊和主模塊不在同一個目錄,就要逐一指定路徑;

require.config({

paths:{

"jquery":"lib/jquery.min",

"underscore":"lib/underscore.min",

"backbone":"lib/backbone.min"

}

});

// 或者直接改變基目錄(baseUrl)

require.config({

baseUrl:"js/lib",

paths:{

"jquery":"jquery.min",

"underscore":"underscore.min",

"backbone":"backbone.min"

}

});

// 如果模塊在另一臺主機上,也可以直接指定它的網址

require.config({

paths:{

"jquery":""

}

});

// require.js要求,每個模塊是一個單獨的js文件;這樣的話,如果加載多個模塊,就會發(fā)出多次HTTP請求,會影響網頁的加載速度;

// 因此,require.js提供了一個優(yōu)化工具,當模塊部署完畢以后,可以用這個工具將多個模塊合并在一個文件中,減少HTTP請求數(shù);

五 AMD模塊的寫法

// require.js加載的模塊,采用AMD規(guī)范,也就是說,模塊必須按照AMD的規(guī)定來寫;

// 具體來說,就是模塊必須采用特定的define()函數(shù)來定義;如果一個模塊不依賴其他模塊,那么可以直接定義在define()函數(shù)中;

// 在math.js中定義math模塊

// math.js

define(function(){

var add = function(x,y){

return x+y;

};

return {

add:add

};

});

// 在main.js中加載math模塊

require(['math'],function(math){

alert(math.add(1,1));

});

// 如果這個模塊還依賴其他模塊,那么define()函數(shù)的第一個參數(shù),必須是一個數(shù)組,指明該模塊的依賴性;

// math.js

define(['myLib'],function(myLib){

function foo(){

myLib.doSomething();

}

return {

foo:foo

};

});

// 當require()函數(shù)加載上面這個模塊的時候,就會先加載myLib.js文件;

六 加載非規(guī)范的模塊

// 加載非規(guī)范的模塊,在用require()加載之前,要先用require.config()方法,定義它們的一些特征;

require.config({

shim:{

'underscore':{

exports:'_'

},

'backbone':{

deps:['underscore','jquery'],

exports:'Backbone'

}

}

});

// require.config()接收一個配置對象,這個對象除了有前面說過的paths屬性之外,還有一個shim屬性,專門用來配置不兼容的模塊;

// (1).定義deps數(shù)組,表明該模塊的依賴性;

// (2).定義exports值(輸出的變量名),表明這個模塊外部調用時的名稱;

比如:jQuery的插件

shim:{

'jquery.scroll':{

deps:['jquery'],

exports:'jQuery.fn.scroll'

}

};

七 require.js插件

1.domready:可以讓回調函數(shù)在頁面DOM結構加載完成之后運行;

require(['domready!'],function(doc){

// called once the DOM is ready;

})

2.text和image:允許require.js加載文本和圖片文件;

define(['text!review.txt','image!cat.jpg'],function(review,cat){

console.log(review);

document.body.appendChild(cat);

});

更多信息請查看IT技術專欄