AMD规范

坚强是说给别人听的谎言 提交于 2020-01-12 02:44:03

AMD规范的总结整理

学习参考网址:http://www.ruanyifeng.com/blog/2012/11/require_js.html
1、什么是AMD
AMD规范全称是Asynchronous Module Definition,即异步模块加载机制。它完整描述了模块的定义,依赖关系,引用关系以及加载机制。
AMD对应的就是很有名的RequireJS
2、require.js的使用
a、去requirejs官网下载最新版本
b、引用

<script src="js/require.js" data-main="js/main"></script>
//data-main属性的作用是,指定网页程序的主模块,它会在require.js加载完成后首个加载

c、语法

 define([id], [dependencies], factory)
参数:
id:可选,字符串类型,定义模块标识,如果没有提供参数,默认为文件名
dependencies:可选,字符串数组,AMD 推崇依赖前置,即当前模块依赖的其他模块,模块依赖
必须在真正执 行具体的factory方法前解决
factory:必需,工厂方法,初始化模块需要执行的函数或对象。如果为函数,它只被执行一次。如果是对象,此对象会作为模块的输出值。

3、模块的写法
一般情况下主模块都会依赖于其他模块,此时则需要使用AMD规范定义的的require()函数

 require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
                // 代码
 });

require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是[‘moduleA’, ‘moduleB’, ‘moduleC’],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。

加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

例子:假定主模块main.js依赖jquery、underscore和backbone这三个模块,就可以这样写:

 require(['jquery', 'underscore', 'backbone'], function (Backbone){
   // 代码
 });

require.js会先加载jQuery、underscore和backbone,然后再运行回调函数。主模块的代码就写在回调函数中。

4、通常情况下不同功能的模块存放在不同路径下,在调用时要严格按照路径加载,此时可以通过require.config()方法来配置各个模块的加载路径,在引用时只需要加载配置文件即可(配置时默认为js文件,不用加.js后缀)

 require.config({
   paths: {
     "jquery": "lib/jquery.min",
     "underscore": "lib/underscore.min",
     "backbone": "lib/backbone.min"
   }
 });

上面是逐一指定路径的模式,还有一种是直接改变基目录(baseUrl,此路径参照于引入这个js文件的html页面的相对路径,路径配置错误会导致加载时找不到对应js文件而出错

require.config({
   baseUrl: "js/lib",
   paths: {
     "jquery": "jquery.min",
     "underscore": "underscore.min",
     "backbone": "backbone.min"
   }
 });

require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义
(1)exports值(输出的变量名),表明这个模块外部调用时的名称;
(2)deps数组,表明该模块的依赖性。
5、AMD模块的写法

   define(['jquery'], function () {
   // 方法
   function myFunc(){};
   // 暴露公共方法
   return myFunc;
   });
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!