[Javascript]RequireJS

RequireJS是一個javascript 的 Module Loader，好處是可以將Javascript模組化

以下這段範例，必須考慮到套件與套件之間相依性的問題手動進行順序的調整

<script src="jquery.js"></script>
<script src="jqueryUI.js"></script>
<script src="jqueryPlugin.js"></script>

使用RequireJS後就可以避開這些狀況，更有效的管理外部引用的Javascript套件

使用方法
專案架構

Project
	index.php
	require.js
	js/
	lib/

require RequireJS
引入

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

如果怕要存取許多套件會讓網頁卡住，可以調整成async讀入

<!-- defer for IE -->
<script src="js/require.js" defer async="true" ></script>

include main.js

引入時可以同時定義讀取自己寫的main.js

<!-- 可省略.js副檔名 -->
<script src="require.js" data-main="js/main"></script>

main.js

alert(123);

如果有跳出alert就代表運作成功了，只要在main.js使用require函式就可以引入套件

以引入jQuery、Underscore.js、Backbone.js為例使用require.js

main.js

//注意，這邊的jquery、underscore、backbone是檔案名稱
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
    //測試jQuery是否引入
    alert($);
});

注意：這邊有一點要注意，因為underscore和backbone並不是按照AMD(Asynchronous Module Definition)標準開發，因此單純直接使用require是無法取得物件的
詳細取得物件的做法下面會提到

利用require.config定義引入的套件路徑

main.js

require.config({
    //定義path根目錄路徑
    baseUrl : "js/lib",
    //記得拿掉.js副檔名
    paths : {
        "jquery" : "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min",
        "underscore" : "Underscore/underscore.min",
        "backbone" : "../backbone.min"
    },
    //在開發時會遇到cache狀況，可以加個時間參數排除cache(官網用法)
    urlArgs: "bust=" + (new Date()).getTime()
});


require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
    alert($);
});

自訂AMD套件
在RequireJS中要引入自己寫的套件，必須要參照AMD標準來開發

say.js(custom module)

define(function() {
    var hello = function () {alert("Hello");}
    var no = function () {alert("No~~~~~~~");}

    return {
        Hello : hello,
        No    : no
    }
});

main.js

require(['say'], function (say){
    say.Hello();
    say.No();
});

依附其他套件的AMD套件
如果開發的套件有依附在其他套件上(例如jQuery)，可以先讓jQuery引入後再引入自行開發的套件
say.js

define(['jquery'],function($) {
    var jq = function () {alert($);}

    return {
        jq : jq
    }
});

main.js

require(['say'], function (say){
    say.jq();
});

jQuery plugin
hello.js

define(['jquery'],function($) {
    $.fn.hello = function(){
        return this.each(function(key,value){
            alert(key + " " + value);
        });
    };
});

main.js

require.config({
    paths : {
        'jquery' : 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min',
        'hello' : 'hello'
    },
});

require(['jquery','hello'], function ($){
    $([1,2,3]).hello();
});

引入非AMD標準的套件
上面有提到，underscore和backbone並不是按照AMD標準開發，因此需要另外設定才能取得引入的物件

main.js

require.config({
    paths : {
        "jquery" : "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min",
        "underscore" : "underscore",
        "backbone" : "backbone"
    },

    //定義套件的物件特徵
    shim: {
        'underscore':{
            exports: '_'
        },
        'backbone': {
            //Dependency
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        }
    }
});


require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
    console.log(_);
});

Backbone.js實例
main.js

require.config({
    paths : {
        'jquery'        : 'lib/jquery.min',
        'underscore'    : 'lib/underscore.min',
        'backbone'      : 'lib/backbone.min',
        'view'          : 'view'
    },
    //Define Shim
    shim: {
        'underscore' : {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        }
    }
});


require(['jquery', 'underscore', 'backbone', 'view'], function ($, _, Backbone, view){
    new view();
});

view.js

define(['jquery','underscore','backbone'],function($, _, Backbone) {
    return Backbone.View.extend({});
});