JS模塊化開發(requireJS)


使用模塊化開發的好處:
通過 exports 暴露接口。這意味着不需要命名空間了,更不需要全局變量。這是一種徹底的命名沖突解決方案。
通過 require 引入依賴。這可以讓依賴內置,開發者只需關心當前模塊的依賴,其他事情 Sea.js/ Require.js 都會自動處理好。對模塊開發者來說,這是一種很好的 關注度分離,能讓程序員更多地享受編碼的樂趣

實現JS模塊化開發,目前有兩個規范,一個是AMD規范,一個是CMD規范。
RequireJS遵循的是AMD規范。AMD推崇依賴前置。
SeaJS遵循的CMD規范。CMD推崇依賴就近(按需加載)
AMD:API根據使用范圍有區別,但使用同一個api接口
CMD:每個API的職責單一

AMD規范的模塊風格
1、 定義模塊用module變量,它有一個方法declare
2、 declare接受一個函數類型的參數,如稱為factory
3、 factory有三個參數分別為require、exports、module,factory使用返回值和exports導出API. factory如果是對象類型,則將該對象作為模塊輸出

define(function(require, exports, module) {
var base = require('base');
exports.show = function() {
// todo with modulebase
}
});

使用require獲取依賴模塊,使用exports導出API。
除了require之外,AMD還保留了一個關鍵字require。require作為規范保留的全局標識符,可以實現為modile loader.
AMD的庫有RequireJS、curl、Dojo、Nodules等

requireJS和seaJS應該是各有千秋,但是因為我之前的一個項目中使用到了requireJS,所以我選擇對requireJS進行深入研究。
requireJs
(1)實現js文件的異步加載,避免網頁失去響應;
(2)管理模塊之間的依賴性,便於代碼的編寫和維護。

RequireJS用法介紹。
requirejs官網是: http://requirejs.org/
官方下載地址:http://requirejs.org/docs/release/2.1.20/minified/require.js
先下載require.js.

require.config是用來定義別名的,在paths屬性下配置別名。然后通過requirejs(參數一,參數二);參數一是數組,傳入我們需要引用的模塊名,第二個參數是個回調函數,回調函數傳入一個變量,代替剛才所引入的模塊。
require.js的加載
1、在頁面底部加載。
2、<script src="js/require.js" defer async="true" ></script>
async屬性表面這個文件需要異步加載,避免網頁失去響應,IE不支持async,需要使用defer屬性。
加載require.js以后,下一步就要加載我們自己的代碼了。

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

data-main屬性的作用是,指定網頁程序的主模塊。
main.js文件
這里寫圖片描述
引入模塊也可以只寫require()。requirejs通過define()定義模塊,定義的參數上同。在此模塊內的方法和變量外部是無法訪問的,只有通過return返回才行.
require的項目中,所有需要引入的文件都不要寫.js的后綴名,因為requirejs會自動添加.js的后綴名。
define 模塊
這里寫圖片描述
將該模塊命名為math.js保存。
define 定義模塊方法只能用在獨立的js文件中,不能在頁面中直接使用。
否則會報 Mismatched anonymous define() module 錯誤。
沒有依賴
如果定義的模塊不依賴其他模塊,則可以:
這里寫圖片描述
AMD推薦的風格通過返回一個對象做為模塊對象,CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的。
當寫一個沒有任何依賴的模塊,並且只是返回一個對象包含一些功能函數
這里寫圖片描述
循環依賴
在一些情況中,我們可能需要模塊moduleA和moduleA中的函數需要依賴一些應用。這就是循環依賴。
這里寫圖片描述
math.js引入模塊方法
這里寫圖片描述

AMD規范定義的require()函數:

require(['moduleA', 'moduleB', 'moduleC'], 
function (moduleA, moduleB, moduleC){
    // some code here
  });

require()函數接受兩個參數。第一個參數是一個數組,表示所依賴的模塊,上例就是[‘moduleA’, ‘moduleB’, ‘moduleC’],即主模塊依賴這三個模塊;第二個參數是一個回調函數,當前面指定的模塊都加載成功后,它將被調用。加載的模塊會以參數形式傳入該函數,從而在回調函數內部就可以使用這些模塊。
require()異步加載moduleA,moduleB和moduleC,瀏覽器不會失去響應;它指定的回調函數,只有前面的模塊都加載成功后,才會運行,解決了依賴性的問題。
假定主模塊依賴jquery、underscore和backbone這三個模塊,main.js就可以這樣寫:

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
    // some code here
  });

require.js會先加載jQuery、underscore和backbone,然后再運行回調函數。主模塊的代碼就寫在回調函數中。

模塊的加載

主模塊的依賴模塊是[‘jquery’, ‘underscore’, ‘backbone’]。默認情況下,require.js假定這三個模塊與main.js在同一個目錄,文件名分別為 jquery.js,underscore.js和backbone.js,然后自動加載。
使用require.config()方法,我們可以對模塊的加載行為進行自定義。require.config()就寫在主模塊(main.js)的頭部。參數就是一個對象,這個對象的paths屬性指定各個模塊的加載路徑。
這里寫圖片描述
上面的代碼給出了三個模塊的文件名,路徑默認與main.js在同一個目錄(js子目錄)。如果這些模塊在其他目錄,比如js/lib目錄,則有兩種寫法。一種是逐一指定路徑。
這里寫圖片描述
另一種則是直接改變基目錄(baseUrl)。
這里寫圖片描述
如果某個模塊在另一台主機上,也可以直接指定它的網址,比如:
這里寫圖片描述
require.js要求,每個模塊是一個單獨的js文件。這樣的話,如果加載多個模塊,就會發出多次HTTP請求,會影響網頁的加載速度。因此,require.js提供了一個優化工具,當模塊部署完畢以后,可以用這個工具將多個模塊合並在一個文件中,減少HTTP請求數。
在代碼中require一個文件多次,不會導致瀏覽器反復加載,即使反復require它,它也只加載一次。
CDN回退,當CDN加載不正確時,回退到本地相應的庫2,通過require.config實現。
這里寫圖片描述

AMD模塊的寫法

require.js加載的模塊,采用AMD規范。也就是說,模塊必須按照AMD的規定來寫。
具體來說,就是模塊必須采用特定的define()函數來定義。如果一個模塊不依賴其他模塊,那么可以直接定義在define()函數之中。
//math.js
這里寫圖片描述
加載方法如下:
這里寫圖片描述
如果這個模塊還依賴其他模塊,那么define()函數的第一個參數,必須是一個數組,指明該模塊的依賴性。
這里寫圖片描述
當require()函數加載上面這個模塊的時候,就會先加載myLib.js文件。

加載非規范的模塊

理論上,require.js加載的模塊,必須是按照AMD規范、用define()函數定義的模塊。但是實際上,雖然已經有一部分流行的函數庫(比如jQuery)符合AMD規范,更多的庫並不符合.require.js能夠加載非規范的模塊,方法是,在用require()加載之前,要先用require.config()方法定義它們的一些特征。
舉例來說,underscore和backbone這兩個庫,都沒有采用AMD規范編寫。如果要加載它們的話,必須先定義它們的特征。
這里寫圖片描述
require.config()接受一個配置對象,這個對象除了有前面說過的paths屬性之外,還有一個shim屬性,專門用來配置不兼容的模塊。具體來說,每個模塊要定義(1)exports值(輸出的變量名),表明這個模塊外部調用時的名稱;(2)deps數組,表明該模塊的依賴性。
這里寫圖片描述

得到模塊的地址

var path = require.toUrl("./style.css");

JSONP

這里寫圖片描述

require.js插件

require.js還提供一系列插件,實現一些特定的功能。
domready插件,可以讓回調函數在頁面DOM結構加載完成后再運行。
這里寫圖片描述
text和image插件,則是允許require.js加載文本和圖片文件
這里寫圖片描述
類似的插件還有json和mdown,用於加載json文件和markdown文件。

r.js壓縮

Require.js 提供一個腳本 r.js ,可以將所有使用到的模塊壓縮成一個腳本文件,r.js 可以使用node.js 來執行。
在壓縮模塊前,需要寫一個配置文件,說明主模塊名,壓縮后的文件名,哪些模塊不要壓縮
沒有使用 define 定義的模塊都不要壓縮,包括 jquery,backbone 等庫及其插件


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com