Skip to content

requirejs简单应用 #18

@lucian55

Description

@lucian55

#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();
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions