Asynchronous Module Definition
2011年最早在社区出现的,程序员自己定义的 前端 模块化开发方式
因为是非官方的开发模式,就必须要先加载一个外部js文件
require.js 其中封装了 AMD 开发模式的程序
执行步骤
1.先导入一个 外部 require.js 文件
2.定义 独立模块 --- 只是自己的程序,没有其他其他模块
在代码中使用 define() 方法 来定义 模块程序
就是一个程序,没有依赖其他内容,有导出
define(function{定义的程序 return 暴露的数据})
3.定义 依赖模块 --- 要依赖其他程序,才能执行
定义一个模块,但是我要依赖其他模块
define() 方法来定义模块程序
同时通过参数,来加载依赖的模块文件
define(['依赖文件1路径','依赖文件2路径','依赖文件3路径'] , function(){定义的程序 return 暴露的数据})
解决问题:
1.解决了 全局变量污染
2.解决了 模块文件依赖
产生问题:
1.文件顺序
2.前置依赖 --- 必须要记住
如果执行一个文件时.需要依赖多个文件.这些文件会先加载
会先将所有的依赖文件都加载完.再执行 function(){} 中定义的程序
文件执行时间会过长,但是一旦加载完成.之后的执行会很方便
AMD 总结 :
1.define() 负责定义模块
require() 负责 整合 执行模块
2.实际只需要加载有一个 最终的 require() 文件就可以了
其他的模块,需要哪个,require() 就会加载哪个
3.问题:前置加载
c.js文件中,通过require() 加载 了 文件 a.js 和 b.js
如果 a.js 和 b.js 没有执行完,不会执行之后的程序
加载c.js文件,会很卡,加载结束之后,运行就很流畅
实例
htmla.jsb.jsc.js
<script src="./require.js"></script>
<script src="./c.js"></script>
<script>
/*
a.js:7 我是 a.js 文件中执行的程序
a.js:10 1
a.js:10 2
a.js:10 3
b.js:8 这是b.js中,执行程序
b.js:10 Object
af1: ƒ af1()
af2: ƒ af2()
bool: true
num: 100
__proto__: Object
c.js:7 我是c.js中的程序
c.js:8 Object Object
af1: ƒ af1() bf1: ƒ ()
af2: ƒ af2() bf2: ƒ ()
bool: true bool: false
num: 100 num: 200
__proto__: __proto__: Object
*/
</script>// 我是一个独立的模块
define(function(){
let num = 100;
let bool = true;
// 不用定义函数,可以直接定义需要执行的程序
console.log('我是 a.js 文件中执行的程序');
for(var i = 1 ; i<=3; i++){
console.log(i);
}
// 也可以定义一些需要的方法函数
function af1(){
console.log( '我是 a.js 文件中 af1函数中的程序' )
}
function af2(){
console.log( '我是 a.js 文件中 af2函数中的程序' )
}
// 通过 return 对象 来导出 数据和程序
return {
num,
bool,
af1,
af2,
}
})// 我是 一个 模块B 我要加载使用依赖 a.js 中的程序
// console.group() 一个 一个 "组" 的形式 输出内容
// 要配合 console.groupEnd() "组"结束
// 这里的 m1 自动存储 a.js 中 return 之后 返回的内容
define(['./a.js'] , function(m1){
console.group('这是b.js中,执行程序')
console.log(m1);
console.groupEnd()
// 定义 模块B 自己的内容
return {
num:200,
bool:false,
bf1:function(){console.log('我是b.js文件中,bf1函数中的程序')},
bf2:function(){console.log('我是b.js文件中,bf2函数中的程序')}
}
})// c.js文件是 整合文件
// 加载之前两个依赖文件,执行程序
// m1 存储的是 a.js return 返回的内容
// m2 存储的是 b.js return 返回的内容
require( ['./a.js' , './b.js'] , function(m1,m2){
console.group('我是c.js中的程序');
console.log(m1,m2);
console.groupEnd();
} )
Comments | NOTHING