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函数中的程序')} } })
Comments | NOTHING