核心提示:1.引言在上一篇博客中我们提到,虽然我们自己实现了模块化编程,但是还是有两个严重的缺点js文件是同步下载,当我们js文件过大时会出现页面假死现象 实现模块化编程我们缺少一个规范,就是告诉大家模块应该怎...
1.引言
在上一篇博客中我们提到,虽然我们自己实现了模块化编程,但是还是有两个严重的缺点
js文件是同步下载,当我们js文件过大时会出现页面假死现象 实现模块化编程我们缺少一个规范,就是告诉大家模块应该怎么去写。当前比较出名的模块化规范有CMD规范,CommonJS规范,AMD规范,但是在此处我们主要去介绍AMD规范,AMD规范的全称为:Asynchronous Module Definition(异步模块定义),名称告诉我们两个信息,1 异步去加载模块,2.规定了模块定义的规范
2.AMD规范
在AMD规范中有两个全局函数,一个是require,一个是define,其中require用于加载模块,define用于定义模块,require函数中有两个参数,第一个是模块的名称数组,第二个是加载模块成功之后的回调函数。用法为:require([module], callback)比如:
require(['dojo/dom'], function (dom) { dom.byId("btn"); });
当前实现了AMD规范函数库主要有:dojo,requirejs,在此处我们主要用dojo为例,简单的介绍一下AMD规范。
首先我们加载dojo.js文件(在线的CDN)<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>我们利用define定义一个模块
define(function(){ return { deal: function () { alert(10); } }; });
我们定义了一个模块,其中有一个deal方法
如果我们想require引入我们的模块,首先我们需要配置一下,告诉dojo,你js模块所在的位置,所以我们使用dojoConfig来配置var dojoConfig = { packages: [{ name: "js", location: location.pathname.replace(/\/[^/]*$/, '') + '/js' }] };
注意dojoConfig必须在dojo.js加载之前,因为dojo.js要读取dojoConfig的配置信息
利用require来加载模块require(["js/myModule","dojo/domReady!"],function(myModule){ myModule.deal() })
注意domReady是一个插件,如果加载这个插件,也就意味着等待dom渲染结束之后在执行require函数,类似与window.onload事件
3.dojo简单介绍
前面简单的介绍了一个AMD规范,那么现在我们以模块的思想去看Dojo,其实Dojo便是用AMD规范创建了一系列的模块(一系列的js文件),然后将相似的模块进行分类,然后分为:dojo,dojox,dijit等一些列的子部分,结合我们下载的图片来看:
现在大家有点理解AMD规范了吗?