4_AMD-RequireJS模块化

AMD-RequireJS模块化

1. 下载require.js, 并引入

• 官网: http://www.requirejs.cn/
• 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 // 模块1
    define(function () {
      let msg = 'hello world'
      function getMsg() {
        return msg.toUpperCase()
      }
      return {getMsg}
    })


// alerter.js  // 模块2
    define(['dataService', 'jquery'], function (dataService, $) {
      let name = 'Tom2'
      
      function showMsg() {
        // $('body').css('background', 'gray')
        alert(dataService.getMsg() + ', ' + name)
      }
    
      return {showMsg}
    })

4. 应用主(入口)js: main.js

(function () {
    // 配置
    requirejs.config({
        // 基本路径
        baseUrl: "js/",
        // 模块标识名与模块路径映射
        paths: {
            "alerter": "modules/alerter",
            "dataService": "modules/dataService",
        }
    })
        
    // 引入使用模块
    requirejs( ['alerter'], function(alerter) {
      alerter.showMsg()
    })
})()

5. 页面使用模块:

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

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

• 将jquery的库文件导入到项目:

• js/libs/jquery-1.10.1.js

• 在main.js中配置jquery路径

    paths: {
        'jquery': 'libs/jquery-1.10.1'
        //注：jquery要小写
    }

• 在alerter.js中使用jquery

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

---

7. 使用第三方不基于require.js的框架(angular)

• 将angular.js导入项目

js/libs/angular.js

• 在main.js中配置

    (function () {
      require.config({
        //基本路径
        baseUrl: "js/",
        //模块标识名与模块路径映射
        paths: {
          //第三方库
          'jquery' : './libs/jquery-1.10.1',
          'angular' : './libs/angular',
          //自定义模块
          "alerter": "./modules/alerter",
          "dataService": "./modules/dataService"
        },
        /*
         配置不兼容AMD的模块
         exports : 指定与相对应的模块名对应的模块对象
         */
        shim: {
          'angular' : {
            exports : 'angular'
          }
        }
      })
      //引入使用模块
      require( ['alerter', 'angular'], function(alerter, angular) {
        alerter.showMsg()
        console.log(angular);
      })
})()