初步認識瞭解require與AMD模式

require能夠被理解爲一個工具庫，主要做用於把客戶端代碼分割爲各模塊從而實現了模塊化管理，便於代碼的編寫與維護；其次實現了異步或動態加載解決了網頁加載阻塞

它的模塊管理遵循AMD規範（Asynchronous Module Definition - 異步加載模塊規範）；所謂AMD規範，就是爲了解決模塊化編程帶來的代碼加載前後順序問題，以及常規爲解決該阻塞問題方式帶來的各類附加問題

核心是經過define方法將無序混亂代碼分割爲有序的模塊，經過require方法實現代碼的模塊加載

須要載入的文件：require

載入require實現模塊化編程

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

這樣就能夠開始了：js文件夾下存放着require文件和demo文件夾，demo文件夾下存放着main文件；data-main屬性指定的文件main.js存放着程序主代碼

頁面會本身加載main.js，注意該加載爲異步加載且不會引發阻塞

定義模塊的define方法

獨立模塊

define({
    create : function (){},
    update : function (){},
    read : function (){},
    delete : function (){}
});

這是一個定義了擁有CURD4個方法的獨立新模塊，還能夠這樣寫

define(function (){
    return{
        create : function (){},
        update : function (){},
        read : function (){},
        delete : function (){}
    };
});

第二種方法更自由，還能夠初始化一些代碼；對象變成了函數，函數的返回值即模塊

非獨立模塊

define(['image', 'text'], function (img, txt){
    return{
        get : function (){
            img.geturl();
            txt.getext();
        }
    };
});

參數以數組形式定義了一個依賴image模塊和text模塊的新模塊，image和text分別表明一樣被定義爲模塊的image.js文件和text.js文件，回調中的參數則分別對應加載的模塊

新模塊中get方法調用了image模塊的geturl方法和text模塊的getext方法

define(function (require){
    var img = require('image');
    var txt = require('text');

    return{
        get : function (){
            img.geturl();
            txt.getext();
        }
    };
});

好處是導入模塊過多的時候，視覺上不會蛋疼

加載模塊的require方法

異步加載

require(['image', 'text'], function (img, txt){
    return true;
});

書寫格式和define同樣

動態加載

define(function (require){
    var status = false;
    require(['image', 'text'], function (img, txt){
        status = true;
    });

    return status;
});

這是一個新的獨立模塊，定義模塊的define方法內部動態加載了2個模塊，加載完成後設置了一個狀態值並返回

define(['html'], function (html){
    var hm = new html();
    require(['image', 'text'], function (img, txt){
        hm.set({
            img : img,
            txt : txt
        });
    };

    return hm.send();
});

這是一個新的非獨立模塊，加載了一個依賴模塊html，定義模塊的define方法內部動態加載了2個模塊，加載完成後改變html模塊的set對象並返回html模塊的send對象

第三參數

require(['image', 'text'], function (img, txt){
    return true;
}, function (err){
    return false;
});

回調用於處理錯誤，參數爲接受到的error對象

配置require的config方法

paths

require.config({
    paths : {
        jquery : 'public/jquery'
    }
});

paths參數指定各模塊位置

require(['jquery'], function ($){
    return true;
});

加載已配置了路徑的jquery模塊

shim

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

有些庫AMD模式不兼容，須要指定shim屬性的值來幫助require加載非AMD規範庫
underscore、backbone就是非AMD規範庫，shim指定它們依賴關係及輸出符_、Backbone

AMD模式

定義模塊的define方法和調用模塊的require方法，合稱爲AMD模式

該模式的定義模塊方法清晰且不會污染全局環境，可以清楚的顯示依賴關係；容許異步加載模塊，也能夠根據須要動態加載模塊

轉：大白兔——初步認識瞭解require與AMD模式