requirejs简单应用

@liushaozhen 2016-06-26 09:10:32发表于 iuap-design/blog

#1.requirjs的引用

<script src='http://design.yyuap.com/static/requirejs/require.js' data-main='main'></script>
为了防止页面失去响应,可以将这个script标签写到页面的最下边,或者写成如下
<script src="http://design.yyuap.com/static/requirejs/require.js" data-main='main'></script>
说明:data-main='入口文件文件路径'。requirejs默认的文件名是.js,所以可以省略.js后缀
#2.主模块,入口文件main.js的写法

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){});
参数说明:第一个参数是一个数组,表示依赖的模块。第二个参数是一个回调函数,当前边指定的模块被加载完成时候,这个回调函数被调用,加载的模块会传进这个回调函数。
还可以使用require.config()对模块加载的行为进行定义,require.config()写在main.js开头。

 require.config({
        paths:{
            'moduleA':'moduleA的路径',
            'moduleB':'moduleB的路径'
                }
        })

上边的写法,moduleA和moduleB都和main.js在同一个文件夹下,如果不在同一个文件夹下,可以指定在require.config()中设置baseUrl。
#3.自定义模块的写法:

define(id, dependencies, factory);
参数说明:id:可选参数,用来定义模块的标识,如果没有提供该参数,为文件名(去掉拓展名);
dependencies:是一个当前模块依赖的模块名称数组
factory:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值
#4.使用实例

// 定义模块 myModule.js
define(['dependency'], function(){
var name = 'lsz';
function printName(){
    console.log(name);
}
return {
    printName: printName
};
});
// 加载模块
require(['myModule'], function (my){
    my.printName();
});