require.js使用教程
- 下載require.js, 并引入
- 官網(wǎng): http://www.requirejs.cn/
- github : https://github.com/requirejs/requirejs
- 將require.js導(dǎo)入項(xiàng)目: js/libs/require.js
- 創(chuàng)建項(xiàng)目結(jié)構(gòu)
|-js
|-libs
|-require.js
|-modules
|-alerter.js
|-dataService.js
|-main.js
|-index.html
- 定義require.js的模塊代碼
- dataService.js
define(function () { let msg = 'atguigu.com' function getMsg() { return msg.toUpperCase() } return {getMsg} }) - alerter.js
define(['dataService', 'jquery'], function (dataService, $) { let name = 'Tom2' function showMsg() { $('body').css('background', 'gray') alert(dataService.getMsg() + ', ' + name) } return {showMsg} })
- 應(yīng)用主(入口)js: main.js
(function () {
//配置
require.config({
//基本路徑
baseUrl: "js/",
//模塊標(biāo)識(shí)名與模塊路徑映射
paths: {
"alerter": "modules/alerter",
"dataService": "modules/dataService",
}
})
//引入使用模塊
require( ['alerter'], function(alerter) {
alerter.showMsg()
})
})()
- 頁(yè)面使用模塊:
<script data-main="js/main" src="js/libs/require.js"></script>
- 使用第三方基于require.js的框架(jquery)
- 將jquery的庫(kù)文件導(dǎo)入到項(xiàng)目:
- js/libs/jquery-1.10.1.js
- 在main.js中配置jquery路徑
paths: { 'jquery': 'libs/jquery-1.10.1' } - 在alerter.js中使用jquery
define(['dataService', 'jquery'], function (dataService, $) { var name = 'xfzhang' function showMsg() { $('body').css({background : 'red'}) alert(name + ' '+dataService.getMsg()) } return {showMsg} })
- 使用第三方不基于require.js的框架(angular/angular-messages)
- 將angular.js和angular-messages.js導(dǎo)入項(xiàng)目
- js/libs/angular.js
- js/libs/angular-messages.js
- 在main.js中配置
(function () { require.config({ //基本路徑 baseUrl: "js/", //模塊標(biāo)識(shí)名與模塊路徑映射 paths: { //第三方庫(kù) 'jquery' : 'libs/jquery-1.10.1', 'angular' : 'libs/angular', 'angular-messages' : 'libs/angular-messages', //自定義模塊 "alerter": "modules/alerter", "dataService": "modules/dataService" }, /* 配置不兼容AMD的模塊 exports : 指定導(dǎo)出的模塊名 deps : 指定所有依賴的模塊的數(shù)組 */ 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"]) }) })() - 頁(yè)面:
<form name="myForm"> 用戶名: <input type="text" name="username" ng-model="username" ng-required="true"> <div style="color: red;" ng-show="myForm.username.$dirty&&myForm.username.$invalid">用戶名是必須的</div> </form>
