模塊化工具require 學習筆記

一：早就據說過模塊化工具require.js的大名，以前也是因爲本身的網頁上引用了諸多的js，並且一堆的js引用放在那裏，一個依賴另外一個，致使我不敢隨意改動各個js的位置，並且有時頁面內容一多起來，js加載也使得原本的html內容出現響應延遲。所以，在網上查事後，便得知解決方法是使用AMD異步模塊-require.js。

 

 

二：瞭解過require.js後，咱們通常都知道它具備以下優勢：

    1，防止js加載阻塞頁面渲染，實現js文件的異步加載，避免網頁失去響應；

    2，使用程序調用的方式加載js，防止出現以下醜陋不堪的一串引用，同時管理模塊之間的依賴性，便於編寫與維護；

         

        <script type="text/javascript" src="a.js"></script>
        <script type="text/javascript" src="b.js"></script>
        <script type="text/javascript" src="c.js"></script>
        <script type="text/javascript" src="d.js"></script>
        <script type="text/javascript" src="e.js"></script>
        <script type="text/javascript" src="f.js"></script>
        <script type="text/javascript" src="g.js"></script>
        <script type="text/javascript" src="h.js"></script>
        <script type="text/javascript" src="i.js"></script>
        <script type="text/javascript" src="j.js"></script>

 

三：先新建一個目錄吧

hl-require/

│  filelist.txt

│  index.html

│  

└─js

    │  app.js

    │  jquery.js

    │  main.js

    │  require.js

    │  

    ├─app

    │      sub.js

    │      

    └─lib

            backbone.js

            canvas.js

            jquery.js

 

1，先去官網下載最新版require.js引入 

 

<script src="js/require.js"></script>

 有人可能會想到，加載這個文件，也可能形成網頁失去響應。解決辦法有兩個，一個是把它放在網頁底部加載，另外一個是寫成下面這樣：

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

async屬性代表這個文件須要異步加載，避免網頁失去響應。IE不支持這個屬性，只支持defer，因此把defer也寫上。

2，加載完require.js後，下一步就是加載咱們本身的代碼了。假定咱們本身的代碼文件是main.js，也在js目錄下。

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

data-main屬性的做用是，指定網頁程序的主模塊。在上例中，就是js目錄下面的main.js，這個文件會第一個被require.js加載。因爲require.js默認的文件後綴名是js，因此能夠把main.js簡寫成main。

 

3，主模塊：上面的main.js，能夠稱之爲「主模塊」意思是整個網頁的入口代碼，全部代碼從這裏開始執行。

      那麼，咱們如何寫main.js。（注意，這裏將會有AMD的規範了。）

      

      若是，咱們的main不依賴任何其餘模塊，那麼能夠直接寫入js代碼。

     

 //main.js
 console.log('hello require!');

　　

     可是，若是僅僅這樣來使用，咱們就不必使用require.js了。真正常見的狀況是，主模塊依賴於其餘模塊，這時就要使用AMD規範定義的的require()函數。

     

     格式爲：

    

  

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

 

   實際的例子：

   假定主模塊依賴jquery、underscore和backbone這三個模塊，main.js就能夠這樣寫：

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

 

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

 

*****可是要注意的是，第一個參數以數組的寫法，是默認狀況下，裏面的各個模塊要和main模塊在同一個目錄，若是不是在同一個目錄，能夠用paths設置一下*****

4，模塊的加載：

上一節最後的示例中，主模塊的依賴模塊是['jquery', 'underscore', 'backbone']。默認狀況下，require.js假定這三個模塊與main.js在同一個目錄，文件名分別爲 jquery.js，underscore.js和backbone.js，而後自動加載。

使用require.config()方法，咱們能夠對模塊的加載行爲進行自定義。require.config()就寫在主模塊（main.js）的頭部。參數就是一個對象，這個對象的paths屬性指定各個模塊的加載路徑。

這個對象的paths屬性指定各個模塊的加載路徑。

 

上面的代碼給出了三個模塊的文件名，路徑默認與main.js在同一個目錄（js子目錄）。若是這些模塊在其餘目錄，好比js/lib目錄，則有兩種寫法。一種是逐一指定路徑。

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": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
　　});

　　

require.js要求，每一個模塊是一個單獨的js文件。這樣的話，若是加載多個模塊，就會發出屢次HTTP請求，會影響網頁的加載速度。所以，require.js提供了一個優化工具，當模塊部署完畢之後，能夠用這個工具將多個模塊合併在一個文件中，減小HTTP請求數。

上面尤爲要注意添加baseUrl後的寫法，baseUrl直接更改的是基目錄，從根目錄開始。js/lib

而若是沒有使用baseUrl，則各個模塊的地址是相對與主模塊的地址的。

而後就開始加載調用

 

其中依賴的一個backbone模塊是

 

最後咱們在瀏覽器中看下index.html的效果

alert()的同時網頁內容能顯示，說明是異步加載。

 

 

 

 

5，AMD模塊的寫法：

   說完主模塊  'main.js'，接着咱們來講說依賴的其餘模塊。

 

   require.js加載的模塊，採用AMD規範。也就是說，模塊必須按照AMD的規定來寫。

   具體來講，就是模塊必須採用特定的define()函數來定義。若是一個模塊不依賴其餘模塊，那麼能夠直接定義在define()函數之中。

   假定如今有一個math.js文件，它定義了一個math模塊。那麼，math.js就要這樣寫：

假定如今有一個math.js文件，它定義了一個math模塊。那麼，math.js就要這樣寫：

 

// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

　　

加載方法以下：

// main.js
require(['math'], function (math){
　　alert(math.add(1,1));
});

　　

若是這個模塊還依賴其餘模塊，那麼define()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。

define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

 

當require()函數加載上面這個模塊的時候，就會先加載myLib.js文件。

 

6，加載非規範的模塊

  

理論上，require.js加載的模塊，必須是按照AMD規範、用define()函數定義的模塊。可是實際上，雖然已經有一部分流行的函數庫（好比jQuery）符合AMD規範，更多的庫並不符合。那麼，require.js是否可以加載非規範的模塊呢？回答是能夠的。這樣的模塊在用require()加載以前，要先用require.config()方法，定義它們的一些特徵。舉例來講，underscore和backbone這兩個庫，都沒有采用AMD規範編寫。若是要加載它們的話，必須先定義它們的特徵。

require.config({
　　　　shim: {
　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},
　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}
　　　　}
　　});

 

require.config()接受一個配置對象，這個對象除了有前面說過的paths屬性以外，還有一個shim屬性，專門用來配置不兼容的模塊。具體來講，每一個模塊要定義（1）exports值（輸出的變量名），代表這個模塊外部調用時的名稱；（2）deps數組，代表該模塊的依賴性。

好比，jQuery的插件能夠這樣定義：

shim: {
　　　'jquery.scroll': {
　　　　　deps: ['jquery'],
　　　　　exports: 'jQuery.fn.scroll'
　　　}
　}