JS模塊化工具requireJS學習筆記（一）初識requirejs

1、爲何要使用require.js?

一、在大型項目中，每每一個頁面須要加載不少個js文件，而頁面加載的時候，瀏覽器會中止網頁渲染，所以加載文件越多，致使網頁失去響應的時間就會越長；

二、其次，因爲js文件之間存在依賴關係，所以必須嚴格保證加載順序（好比上例的1.js要在2.js的前面），依賴性最大的模塊必定要放到最後加載，當依賴關係很複雜的時候，代碼的編寫和維護都會變得困難。

因此，在開發大型Javascript應用程序的時候，就必須引入模塊化機制。關於前端模塊化的前世此生，能夠參考此博客：http://www.javashuo.com/article/p-glvctrzt-ba.html

2、require.js能幹什麼？

一、RequireJS是遵循AMD規範的模塊化工具, 在導入模塊的時候，會先加載對應的依賴模塊，而後再執行接下來的代碼，同時AMD模塊能夠並行加載全部依賴模塊，防止js加載阻塞頁面渲染，從而很好地提升頁面加載性能：

二、管理模塊之間的依賴性，便於代碼的編寫和維護。

RequireJS的基本思想是，經過define方法，將代碼定義爲模塊；經過require方法，實現代碼的模塊加載。

3、require.js的加載：

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

引用js的過程，爲了不網頁失去響應，咱們能夠將代碼卸載網頁底部進行加載，也能夠採用異步加載，設定async屬性。IE不支持這個屬性，只支持defer，因此把defer也寫上。

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

加載require.js之後，下一步就要加載咱們本身的代碼了。假定咱們的代碼文件時main.js，且與requireJS放置在相同的路徑js文件夾下，能夠寫成下面這樣：

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

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

4、主模塊的寫法

（一）主模塊中依賴的加載

主模塊依賴於其餘模塊，這時就要使用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，而後再運行回調函數。主模塊的代碼就寫在回調函數中。

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

// 若是不依賴其餘模塊，能夠直接在主模塊中寫js代碼

// alert("加載成功！");

// 真正常見的狀況是，主模塊依賴於其餘模塊，這時就要使用AMD規範定義的的require()函數。

require.config({

    // 假如要加載的模塊與主模塊不在一個文件夾，能夠改變基目錄baseUrl爲要加載的模塊目錄
    // baseURL:"",

    paths:{
        "jquery":"jquery-3.2.1.js",
    }

})

（二）模塊的定義與加載

一、define()函數

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

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

關於define函數的詳解，能夠參考此博客：http://www.javashuo.com/article/p-dwkpvvwm-ba.html

假定如今有一個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()函數的第一個參數，必須是一個數組，指明該模塊的依賴性。

//math.js
define(['jquery'], function($) {
    'use strict';
    var add = function (x,y){
        return x+y;
    };
    return{
        add: add
    };
});