AMD-RequireJS模塊化

require.js使用

1. 下載require.js, 並引入

• 官網: https://requirejs.org/
• github: https://github.com/requirejs/requirejs
• 將require.js導入項目: js/libs/require.js

2. 創建項目結構

|-js
  |-libs
    |-require.js
  |-modules
    |-alerter.js
    |-dataService.js
  |-main.js
|-index.html

3. 定義require.js的模塊代碼

• dataService.js

  define(function () {
    let msg = 'I am dataService.js';
  
    function getMsg() {
      return msg.toUpperCase();
    }
  
    return {getMsg};
  });
  

• alerter.js

  define(['dataService'], function (dataService) {
    let name = 'I am alerter.js';
  
    function showMsg() {
      alert(dataService.getMsg() + ', ' + name);
    }
  
    return {showMsg};
  });
  

4. 應用主入口: main.js

(function () {
  //配置
  require.config({
    //基本路徑
    baseUrl: "js/",
    //模塊標識名與模塊路徑映射
    paths: {
      "alerter": "modules/alerter",
      "dataService": "modules/dataService"
    }
  });
  //引入使用模塊
  require( ['alerter'], function(alerter) {
    alerter.showMsg();
  });
})();

5. 頁面使用模塊:

data-main="js/main"
src="js/libs/require.js"

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

---

6. 使用第三方基於require.js的框架(jquery)

• 將jquery的庫文件jquery-1.10.1.js導入到項目:

  |-js
    |-libs
      |-require.js
      |-jquery-1.10.1.js
    |-modules
      |-alerter.js
      |-dataService.js
    |-main.js
  |-index.html
  

• 在main.js中配置jquery路徑"jquery": "libs/jquery-1.10.1"

      paths: {
        "alerter": "modules/alerter",
        "dataService": "modules/dataService",
        "jquery": "libs/jquery-1.10.1"
      }
  

• 在alerter.js中使用jquery $('body').css({background : 'red'});

  define(['dataService', 'jquery'], function (dataService, $) {
      var name = 'zhangsan';
      function showMsg() {
          $('body').css({background : 'red'});
          alert(name + ' '+dataService.getMsg());
      }
      return {showMsg};
  });
  

---

7. 使用第三方不基於require.js的框架(angular/angular-messages)

• 將angular.js和angular-messages.js導入項目

  |-js
    |-libs
      |-require.js
      |-jquery-1.10.1.js
      |-angular.js
      |-angular-messages.js
    |-modules
      |-alerter.js
      |-dataService.js
    |-main.js
  |-index.html
  

• 在main.js中配置

  (function () {
    require.config({
      //基本路徑
      baseUrl: "js/",
      //模塊標識名與模塊路徑映射
      paths: {
        //第三方庫
        'jquery' : 'libs/jquery-1.10.1',
        'angular' : 'libs/angular',
        'angular-messages' : 'libs/angular-messages',
        //自定義模塊
        "alerter": "modules/alerter",
        "dataService": "modules/dataService"
      },
      /*
       配置不兼容AMD的模塊
       exports : 指定導出的模塊名
       deps  : 指定所有依賴的模塊的數組
       */
      shim: {
        'angular' : {
          exports : 'angular'
        },
        'angular-messages' : {
          exports : 'angular-messages',
          deps : ['angular']
        }
      }
    });
    //引入使用模塊
    require( ['alerter', 'angular', 'angular-messages'], function(alerter, angular) {
      alerter.showMsg();
      angular.module('myApp', ['ngMessages']);
      angular.bootstrap(document,["myApp"]);
    });
  })();