共计 969 个字符,预计需要花费 3 分钟才能阅读完成。
一、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>
正文完
发表至: javascript
2019-09-21