前端设计思路之require.js的使用

zmminer 2014-11-18

AMD(Asynchronous Module Definition)规范提出了一种基于模块化的异步加载javascript代码的机制,它推荐开发人员将javascript代码封装进一个个模块,对全局对象的依赖变成了对其他模块的依赖,无需再声明一大堆的全局变量。通过延时和按需加载来解决各个模块的依赖关系。

CommonJS的AMD规范中只定义了一个全局的方法:

define(id?,dependencies?,factory);该方法用来定义一个javascript模块,开发人员可用这个方法来将部分功能封装在define方法体内。

id:标示该模块的标识,为可选参数。

dependencies:是一个字符串array,标示该模块依赖其他所有模块标识

factory:一个用于执行该模块的方法,它可以使用前面dependencies里面声明的其他依赖模块的返回值作为参数,若该方法有返回值,当该模块被其他模块依赖时,返回值就是该模块的输出。

require.js的作用:

1.引入需要使用的命名空间(顺便加个别名也可);

2.将自己的代码放到命名空间中,避免全局污染;

下面我们来看一下requireJS的具体写法,新建一个独立的myRequire.test.js文件,输入下面的代码;

define(['myRequire.core'],function(xxx){

      return{

           MyTest : function (){alert('hello world!');}

     }

});

 引入命名空间: ‘myRequire.core’,并起一个别名:xxx

 将自己的代码放入define中,避免全局化的冲突。

3.在定义好模块后我们该如何使用呢?require.js提供了一个函数,require()
require函数加载依赖并执行回调,与define不同的是,它不会把回调注册成模块:

require(['jquery'],function($){
    //这个函数加载依赖后执行回调代码
    console.log($);
});

相关推荐