模块化开发之AMD规范

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43307658/article/details/89345322

模块化开发之AMD规范

欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

概念

AMD(Asynchronous Module Definition),异步模块定义:它是在浏览器端实现模块化开发的规范。由于该规范不是原生js支持的,使用AMD规范进行开发的时候需要引入第三方的库函数,也就是鼎鼎大名的RequireJS

RequireJS

RequireJS主要解决了两个问题:

  1. 多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器
  2. js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长

定义模块

RequireJS定义了一个define函数,用来定义模块

语法

1
define([id], [dependencies], factory)

参数

  • id:可选,字符串类型,定义模块标识,如果没有提供参数,默认为文件名
  • dependencies:可选,字符串数组,AMD 推崇依赖前置,即当前模块依赖的其他模块,模块依赖必须在真正执行具体的factory方法前解决
  • factory:必需,工厂方法,初始化模块需要执行的函数或对象。如果为函数,它只被执行一次。如果是对象,此对象会作为模块的输出值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// mod1.js
define('mod1',[],function(){
// ...
return {
// ...
}
})

// mod2.js
define('mod2', ['mod1'], function (mod1) {
// ...
return {
// ....
}
})

模块的加载

加载模块需要使用require()函数

语法

1
require([dependencies], function(){})

参数

  • dependencies:字符串数组,该模块的依赖
  • function:Function类型,所依赖的模块都加载成功之后,回调,依赖的模块会以参数的形式传入该函数,从而在回调函数内部就可以使用这些模块
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="require.js"></script>
<script type="text/javascript" src="mod1.js"></script>
<script type="text/javascript" src="mod2.js"></script>
<script type="text/javascript">
require(['mod1','mod2'],function(mod1, mod2){
// ...
});
</script>
</body>
</html>

require()函数加载依赖模块是异步加载,这样浏览器就不会失去响应

AMD模式开发

AMD模式开发的简单三层结构(基础库/UI层/应用层)

  • 定义无依赖的模块
1
2
3
4
5
6
7
8
// base.js
define(function () {
return {
bas: function (sou, tar) {
// ...
}
}
})
  • 定义有依赖的模块
1
2
3
4
5
6
7
8
// ui.js
define(['base'], function (base) {
return {
initPage: function () {
// ...
}
}
})
1
2
3
4
// page.js
define(['data', 'ui'], function (data, ui) {
// ...
})
  • 定义数据对象模块
1
2
3
4
5
// data.js
define({
users: [],
numbers: []
})
  • 具名模块
1
2
3
define('index', ['data','base'], function(data, base) {
// ...
})
  • 包装模块
1
2
3
4
5
6
define(function(require, exports, module) {
var base = require('base');
exports.show = function() {
// todo with module base
}
})

dependencies是可选参数,当用户不提供该参数时,实现 AMD的框架应提供默认值为[“require”,”exports”,“module”]

文章推荐

参考文章

展开阅读全文
博主设置当前文章不允许评论。

OYE - AMD模块化开发思想的实现原理及应用

11-16

hi,大家,一切都别来无恙吧? ^_^rnrn为了推行模块话的开发思想,将刚推出不久的[url=http://www.w3cgroup.com/oye]AMD模块化加载管理器[/url] - [url=http://www.w3cgroup.com/oye/]OYE[/url],拿出来跟大家分享一下,希望能够多尽一份力!rnrn[url=http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition]AMD[/url]是[url=http://wiki.commonjs.org/wiki/CommonJS]CommonJS[/url]规范的一个分支,它更适合在浏览器端进行实现。rnrn[url=http://www.w3cgroup.com/oye/]OYE[/url]是对[url=http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition]AMD规范[/url]的一个实现!rnrn[b]OYE概述[/b]rnrn ✔ 不依赖Script onload事件,更稳定可靠rn ✔ 完美支持具名、匿名模块rn ✔ 支持模块提取完整依赖列表rn ✔ 支持模块循环依赖检测rn ✔ 支持require与define在同一个文档rnrnrn[b]OYE实现原理[/b]rnrn辅助项rn [[当前正在处理的模块名称]], [[请求队列]]rnrndefinern define函数执行时,如果是具名模块,则直接将模块定义体与模块名进行注册;如果是匿名模块,则取[[当前正在处理的模块名称]]为模块名称进行模块注册;最后将[[当前正在处理的模块名称]]置空;rnrnrequirern require函数执行时,如果[[当前正在处理的模块名称]]为空,则发起文件请求,并将本次请求的模块名称置为[[当前正在处理的模块名称]];否则,将本次请求丢到[[请求队列]]rnrn依赖关系rn 采用触发器方式,一个模块准备好后,触发所有依赖它的模块进行检查,看它们是否也准备好rnrnrn[b]应用指引[/b]rnrn[b]开发阶段[/b]rnrn 确认当前项目准备采用模块化的方式进行开发;rn 每个模块定义为匿名模块,并存储为一个独立的JS文件;rn 每个页面最好只引入一个模块,如:首页,可以有一个app/home这样的模块,在这个模块中再去调用其他模块,如:rnrn resource/js/app/home.jsrn define(['common/head','common/foot','app/home/content'], function(head,foot,content)rn return rn init:function()rn head.init();rn foot.init();rn content.init();rn rn ;rn );rnrn 然后,在home页面,我们只要这样去调用即可:rnrn rn rnrn 请注意:rnrn 模块文件home.js与oye.js的目录关系,在oye里,模块名对应模块的路径!rn 如果模块名是以http或https等协议开头的,则视为绝对路径,oye会直接去请求这个URL;rn 否则,都被视为相对路径,相对于oye.js所在的路径而言,而不是相对于当前页面的路径,这个很重要!rnrn 为什么设计成这样?rnrn 因为我们需要覆盖线上线下两种应用场景:rn 线下,即开发阶段,我们的资源文件与项目内容基本上是作为一个项目的整体来开发的;rn 线上,资源文件和项目内容多数情况下会分开部署到不同的域;rnrn 更多具体用法,请参见我们给出的[url=http://www.w3cgroup.com/oye/]OYE DEMO演示[/url]!rnrn[b]项目上线(可选)[/b]rn 如果公司的站点线上与开发阶段完全不一致,则需要考虑以下步骤。rnrn 在BUILD工具中添加提取JS模块依赖列表、合并压缩的功能;实现方式大致如下:rn 通过对模块依赖列表的提取,将各依赖模块的模块名自动添加到提取出来的内容中,即为原来的匿名模块加上模块名称,如:rn (举例)我们通过对app/home提取依赖列表,可以得到:rnrn app/home: http://你的站点路径/resource/js/app/home.jsrn common/head: http://你的站点路径/resource/js/common/head.jsrn common/foot: http://你的站点路径/resource/js/common/foot.jsrn app/home/content: http://你的站点路径/resource/js/app/home/content.jsrnrn 现在,我们的BUILD工具就可以遍历读取这些文件,并将读取的内容做如下替换:rn 将 define( 替换成 define("app/home" ,即将模块名填充进去。rn 将已知的具名模块配置中,添加一条:define.amd.namedModules['模块名'] = true;rn 将提取并修改后的所有内容保存到一个JS文件,如:app/home.min.jsrn 在页面上,引入oye.min.js文件的后面,添加一个对该文件的引入: rnrn[url=http://www.w3cgroup.com/oye/]现在就去体验使用OYE作为模块化开发的便利吧![/url] 论坛

没有更多推荐了,返回首页