04 AMD-RequireJS 模块化

RequireJS 模块化

1. 下载 require.js

• 官网
• github
• 将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(functin() {
  	let msg = 'hello world';
         
      functin getMsg() {
  		return msg.toUpperCase();
  	}
        
  	return {getMsg};
  })
  

• alerter.js

  define(['dataService', 'jquery'], fuction (dataService, $) {
  	let name = 'Mary';
         
      function showMsg() {
  		$('body').css('background', 'gray');
      	alert(dataService.getMsg() + '，' + name);
  	}
  
  	return {showMsg};
  })
  

4. 应用主入口 js：main.js

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

5. 页面使用模块

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

6. 使用第三方基于require.js的框架（jquery）

• 将 jquery 的库文件导入到项目： js/libs/jquery-1.10.1.js

• 在 main.js 中配置 jquery 路径

  paths: {
      // 第三方库
  	"jquery": "libs/jquery-1.10.1",
         
       // 自定义模块
       "alerter": "modules/alerter",
       "dataService": "modules/dataService"
  }
  

• 在 alerter.js 中使用 jquery

  define(['dataService', 'jquery'], function (dataService, $) {
      var name = 'Peter'
      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/angular.js

  js/libs/angular-messages.js

• 在 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"])
    })
  })()