1.3.1.RequireJS

1.Introduction

• RequireJS用於client端的模塊管理, 實現動態加載或異步加載, 模塊管理遵守AMD規範

2.用法

• define: 定義模塊, RequireJS要求每個模塊要放在一個獨立的文件中, 模塊可分為兩種:

  • 1.獨立模塊

    • 如果被定義的模塊不需要依賴其他模塊, 則可以用define方法生成

      • 將對象寫成一個函數, 該函數的回傳值就是輸出的模塊. e.g.,

        define(function () {
           return {
              method1: function() {},
              method2: function() {},
          };
        });

  • 2.非獨立模塊

    • 如果被定義的模塊需要依賴其他模塊, 則define必須採用以下方式:

      • 第1個參數: 定義模塊名稱, 是相對於require.js的路徑

      • 第2個參數: 此模塊所需要使用到的模塊

      • 第3個參數: 函數的參數內容需要對應到第2個參數陣列, 該函數的回傳值就是輸出的模塊, 供其他模塊調用

        • e.g.,

          define('login/LogInReact',
            [
                'react',
                'react-dom',
                'strings',
                'knockout',
                'koMapper',
                'LogonService',
                'GAUTH',
            ], function (React, ReactDOM, strings, ko, koMapper, LogonService, GAUTH) {
                var self = this;
                self.init = function (containerId, component, userNameProp, gAuthHostUrlProp, garminOAuthClientIdProp, localeProp, gAuthCSSUrlProp, ssoRedirectUrlProp, languageCodeProp, guidProp) {
                };
                return self;
            })

• require: 調用模塊

  • 第1個參數: 要調用的模塊, 可以是複數

  • 第2個參數: 函數的參數內容需要對應到第1個參數陣列

    • e.g.,

      require(['login/LogInReact'], function (LogInReact) {
        var userName = getCookie("UserName");
        var guid = getParameterByName("guid");
        var gAuthHostUrl = "@gAuthHostUrl";
        var OAuthClientId = "@OAuthClientId";
        var locale = "@locale";
        var gAuthCSSUrl = "@gAuthCSSUrl";
        var ssoRedirectUrl = "@ssoRedirectUrl";
        var languageCode = "@languageCode";
      
        LogInReact.init('#LogInBoxWidget', LogInReact.LoginComponent, userName, gAuthHostUrl, OAuthClientId, locale, gAuthCSSUrl, ssoRedirectUrl, languageCode, guid);
      });

  • 另一種作法: 將require方法用在define方法内部

    • e.g.,

      define(function ( require ) {
        var isReady = false, foobar;
      
        require(['foo', 'bar'], function (foo, bar) {
            isReady = true;
            foobar = foo() + bar();
        });
      
        return {
            isReady: isReady,
            foobar: foobar
        };
      });

3.參考資料

• RequiredJS

• RequireJS和AMD规范

• AMD規範