amd规范&require.js

218 阅读1分钟

AMD是一种为浏览器环境设计的一种异步模块加载规范,

AMD规范全称是Asynchronous Module Definition,即异步模块加载机制。从它的规范描述页面看,AMD很短也很简单,但它却完整描述了模块的定义,依赖关系,引用关系以及加载机制。从它被requireJS,NodeJs,Dojo,JQuery使用也可以看出它具有很大的价值,没错,JQuery近期也采用了AMD规范。  作为一个规范,只需定义其语法API,而不关心其实现。

AMD规范简单到只有一个API,即define函数:
  define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
  其中:
  module-name: 模块标识,可以省略。
  array-of-dependencies: 所依赖的模块,可以省略。
  module-factory-or-object: 模块的实现,或者一个JavaScript对象。

require.js

遵循AMD规范,是一种小巧的js模块载入框架,可以运行在浏览器以及node环境下,实现模块化加载。

优点:

1、防止js加载阻塞页面渲染

2、使用程序调用的方式加载js,实现异步加载,按需加载

基本API

定义三个变量:

1、define:定义一个模块

a.js

define(function(){
    function fun1(){
      alert("it works");
    }

    fun1();
})

2、require===require.js,一般使用require更简短:加载依赖模块,并执行加载完后的回调函数

通过define函数定义了一个模块,然后再页面中使用:

require(["js/a"]);

来加载该模块(

注意require中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义

),require API的第二个参数是callback,一个function,是用来处理加载完毕后的逻辑,如:

require(["js/a"],function(){
    alert("load finished");
})