一、AMD规范
异步， 用于浏览器端，依赖require.js
1、基本语法
暴露模块：
// 定义没有依赖的模块
define(function(){
return 模块
})
// 定义有依赖的模块
define(['module1','module2'],function(m1,m2){
return 模块
})引入使用模块：
requirejs(['module1','module2'],function(m1,m2){
使用m1/m2
})代码演示：
// 无依赖模块 dataService.js
define(function(){
let name = 'dataService.js'
function getName() {
return name
}
return {
getName
}
})// 有依赖的模块 alerter.js
define(['dataService','jquery'],function(dataService,$){
let msg = 'alerter.js'
function showMsg() {
$('body').css('color','red')
console.log(msg, dataService.getName())
}
return {
showMsg
}
})// 主模块 main.js
(function(){
// 配置引用路径
requirejs.config({
baseUrl:'./',
paths:{
dataService:'./dataService',
alerter:'./alerter',
jquery:'./lib/jquery', // 第三方库
angular:'./lib/angular'
},
// angular不支持amd暴露，因此需要配置，将angular对象暴露出来
shim:{
angular:{
exports:'angular'
}
}
})
// 引用模块 无需再暴露用requirejs
requirejs(['alerter'],function(alerter){
alerter.showMsg()
})
})();注意jquery插件最后，自定义了模块，因此模块名称必须是jquery
<!-- 主页面 index.html -->
<body>
<script data-main="./app.js" src="require.js"></script>
</body>
发表回复