一、AMD规范
- AMD(Asynchronous Module Definition,异步模块定义)指定一种机制,在该机制下模块和依赖可以异步加载。
语法
define(id?,dependencies?.factory)
- id:指定义中模块的名字(可选),如果没有提供该参数,模块的名字 应该默认为模块加载器请求指定的脚本的名字。
- depndencies :当前模块依赖的,已被模块定义的模块标识的数组字面量。
factory:一个需要进行实例化的函数或者对象。
示例
define('modal',['jQuery','dialog'],function(){
$('.xxx').show()
Dialog.open()
})
二、RequireJS介绍
-
RequireJS是一个JavaScript模块加载器。
-
RequireJS遵循AMD规范,用于解决命名冲突和文件依赖的问题。
-
RequireJS加载模块化脚本将提高代码的加载速度和质量。
使用RequireJS的好处
1、声明不同js文件之间的依赖。
2、可以按需、并行、延时载入js库。
3、可以让我们的代码以模块化的方式组织。
三、使用方法。
Demo栗子目录结构:
目录结构在html中添加<script>标签:
<script data-main="./js/app.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
data-main:配置文件(文件入口),一般命名为config.js。
src:Requirejs地址。
配置config.js
requirejs.config({
baseUrl: 'js',
paths: {
app: 'app'
},
});
requirejs(['app'], function (app) {
app.init();
});
baseUrl :用于加载模块的根路径。在配置这个属性后,以后的文件都是在这个路径下查找内容了。
paths:用于一些常用库或者文件夹路径映射,方便后面使用,省得每次都要输入一长串路径。(js 文件的后缀可以省略)
define : 定义模块。
require:加载模块
更多请查阅官方文档
app.js
// 因为用到了hello和hello2,所以需引入['hello','hello2']
define(['hello','hello2'], function(x,y) { //hello的参数x ,hello2的参数y
var app = {
init:function(){
x.init() //hello
y.init() //hello2
console.log('这里是app')
}
}
return app //把app返回出去,对应的config.js里面。
});
config.js
requirejs.config({
baseUrl: 'js', //用于加载模块的根路径。在配置这个属性后,以后的文件都是在这个路径下查找内容了。
paths: {
app: 'app'
},
});
requirejs(['app'], function (app) {
app.init();
});
hello.js
// 因为用到了jQuery所以需要引入
define(['jQuery'], function() {
var a = {
init:function(){
console.log($('.box').html())
console.log("hello")
}
}
return a //把a给返回出去
});
hello2.js
// 因为用到了jQuery所以需要引入
define(['jQuery'], function() {
var b = {
init:function(){
$('.box').append( "<p>段落</p>" )
console.log("hello2")
}
}
return b //把b给返回出去
});
jQuery.js 省略可自行下载
大概流程图.png
网友评论