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