RequireJS學習

RequireJS是一個JavaScript文件和模塊加載器。除了能夠在瀏覽器中使用外，還能夠用Node或Rhino等Server端環境。

最新版能夠在這裏下載。

基本用法

假設你的工程目錄結構以下：

• project

  • index.html

  • js

    - lib
          - jquery.js
      - app
          - sub_app.js
          - app.js

首先，將requirejs.js放入js/lib目錄。

• project

  • index.html

  • js

    - lib
          - jquery.js
          - require.js
      - app
          - sub_app.js
          - app.js

而後，在index.html中引入<script>用來加載require.js。

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

在app.js中，使用require方法加載其餘腳本

requirejs.config({
    // 默認從js/lib目錄加載
    baseUrl: 'js/lib',
    // 若是模塊ID以app開頭，則從js/app目錄加載
    // paths相對於baseUrl設定
    // 不要指定".js"後綴，由於paths能夠是一個目錄
    paths: {
        app: '../app',
        jquery: 'jquery.min',
    }
});
 
// app入口
require(['app/sub_app'], function (sub) {
    sub.hello();
});

在sub_app.js中定義一個module

// define相對於baseUrl設定
define(['jquery'], function ($) {
    return {
        log: function (msg) {
            if (window.console && console.log) {
                console.log(msg);
            } else {
                alert(msg);
            }
        },
        hello: function () {
            this.log("Hello, I'm powered by jQuery " + $().jquery + "!");
        }
    };
});

如今，打開瀏覽器的控制檯，應該能看到咱們自定義的module成功使用jQuery輸出了下面這句話：

Hello, I'm powered by jQuery 1.8.3!