> For the complete documentation index, see [llms.txt](https://jen-hsuan-hsieh.gitbook.io/javascript-node-js/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jen-hsuan-hsieh.gitbook.io/javascript-node-js/chapter1/13chang-yong-qian-duan-tao-jian/131requirejs.md).

# 1.3.1.RequireJS

## 1.Introduction

* RequireJS用於client端的模塊管理, 實現動態加載或異步加載, 模塊管理遵守[AMD規範](https://github.com/amdjs/amdjs-api/wiki/AMD)

## 2.用法

* define: 定義模塊, RequireJS要求每個模塊要放在一個獨立的文件中, 模塊可分為兩種:
  * 1.獨立模塊
    * 如果被定義的模塊不需要依賴其他模塊, 則可以用define方法生成
      * 將對象寫成一個[函數](https://jenhsuan.gitbooks.io/javascript-node-js/content/chapter1/1236han-shu-chen-shu-ju-yu-han-shu-biao-shi-shi.html), 該函數的回傳值就是輸出的模塊. 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](http://requirejs.org/docs/api.html#defsimple)
* [RequireJS和AMD规范](http://javascript.ruanyifeng.com/tool/requirejs.html)
* [AMD規範](https://github.com/amdjs/amdjs-api/wiki/AMD)