文章目录
RequireJS 模块化
1. 下载 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"]) }) })()