前端學習 模塊化編程

1 爲何要模塊化？

 在阮一峯的博客中已經闡述得很是清楚了

http://www.ruanyifeng.com/blog/2012/11/require_js.html

 

2 模塊化編程

 模塊化也就是加載js，加載js依賴的管理和使用過程，因爲js存在同步和異步加載模式相應的也就有了同步和異步加載模式，即cmd，amd同步主要用於加載時間很短，好比nodejs的本地加載，而異步加載amd則用於

很耗時間的場景中。這些都是有commonjs規範中制約着。

 

3 AMD的實現

requirejs，和curljs二者都實現了amd加載的方式，實際項目中requirejs使用較多

 

4 requirejs

其實requirejs有一個js目錄的約定吧，他約定咱們的js目錄以下，appjs爲咱們的模塊入口

• www/
  • index.html
  • js/
    • app/
      • sub.js
    • lib/
      • jquery.js
      • canvas.js
    • app.js

1）requirejs加載js模塊

經過require.config配置的paths進行，這裏有一個根目錄即baseUrl，這個很好理解，即js所在的相對根目錄吧。

通paths配置的都不是直接在baseUrl目錄下的js文件，他們多是在本地其餘目錄，頁多是在網絡cdn中 如

paths : {
"jquery" : ["https://cdn.bootcss.com/jquery/2.2.3/jquery.min"],
"BMap":["http://api.map.baidu.com/api?v=2.0&ak=MR2hswnEZnwAQM2jLL6IOF5i"],
"Backbone":["https://cdn.bootcss.com/backbone.js/1.3.3/backbone-min"],
"Underscore":["https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min"]
}

對於非requirejs標準模塊化的好比早期的jquery，backbonejs ，underscroejs等等，經過shim方式來轉換爲標準的模塊即

shim:{
　　"jbox":{
　　　　deps:["jquery"],
　　　　exports:"Jbox"
　　},
　　"BMap":{
　　　　exports:"BMap"
　　},
　　"Backbone":{
　　　　deps:["Underscore","jquery"],
　　　　exports:"Backbone"
　　},
　　"Underscore":{
　　　　exports:"_"
　　}
}

 

這裏能夠理解爲一個js庫可能依賴其餘js庫，好比jquery插件一定依賴juqery，那麼這個模塊向外暴露後的經過exports進行導出，也就是說一個模塊依賴誰，而後向外暴露的命名空間是什麼就能夠了，因此兼容了老的js庫

 

2）標準的模塊

requirejs實現了標準模塊的定義方式，即經過define函數進行如

最簡單的一個

(function($){

　　return {aa:"xxx"};
})(jQuery)

定義一個模塊的時候，模塊也可能依賴其餘庫，經過[""]數組方式申明依賴，經過function的方式定義一個模塊，至於函數有沒有返回，返回的是一個對象，仍是一個函數可依據需求來肯定

 

3）循環依賴

有時候一個模塊a依賴b，反過來b又依賴a，就產生了循環依賴，固然循環依賴通常來講仍是應該在設計上進行解決，那麼若是真的出現了循環依賴了，怎麼辦呢？

好比說在模塊b中，define(["a"],function(a){

　　其實此時a爲undefine，那麼再次加載一次就能夠了

     var a =require(["a"]);

})

4)包加載

有時候js組件是以package形式提供，其中package經過json配置文件是包的元數據文件，它描述了包的屬性，如名稱，版本，做者，維護，地址等等

按照requirejs 的約定包中應當包含一個mainjs文件做爲包的命名空間根文件即入口文件。在requirejs中經過配置的方式來引入包如

這也是官方api使用的說明


5）require插件
require插件包括了domReady，async等等，這個能夠經過github中開源插件說明中找到名下載使用


5 前景
因爲前端的不斷髮展requirejs做爲commonjs規範的一種實現，在某些框架中已經直接包含，或者因爲requirejs配置的複雜性使用了更好的方式解決了模塊化編程require.config({
    "packages": ["cart", "store"] }); require(["cart", "store", "store/util"], function (cart, store, util) { //use the modules as usual. });

 

  參考文檔：

官方：http://www.requirejs.cn/

阮一峯：http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html