requireJs笔记

官方网址：http://www.requirejs.org/

中文版翻译：http://makingmobile.org/docs/tools/requirejs-api-zh/

插件作用：对于JS模块文件进行管理，动态加载，项目完成时合并压缩模块。

一、基本用法：

1、外链文件，data-main中为外链的文件名，无需加后缀：

<script data-main="js/main" src="require.js"></script>

2、页面直接写入代码（可将data-main设为require.config配置文件）：

require.config({  
    baseUrl:'./js',
    paths: {  
        "a": "other/a",  
        "b": "other/b",  
        "c": "some/c",  
        "d": "some/d"
    },
    waitSeconds: 150
});

//依赖加载（外层先加载）
require(["a","c","d","b"], function() {  
		a();
		c();
		d();
		b();
});

二、语法摘要（详细语法参见官方API）

1、引用插件内函数

Test.js:

define({
	test:function(msg) {
        alert("test" + msg);
    },
	userName: "111"
});

Requirjs引用：

require(["test"], function (a) {  //a按顺序对应加载的文件
    a.test("asdf");
});

2、require函数外部调用内部定义的函数，需等require内文件都加载完成了才有效

3、文件依赖加载(当前插件依赖jquery,需等jquery加载完成后才会执行)

define(['jquery'],function($){
    var returnVar = {
        userName: "111",
        aa: function(){}
    }
    return returnVar;
});

4、插件引用外部函数

function callE(msg){
	alert('e'+msg)
}
function callF(msg){
	alert('f'+msg)
}

Require配置：

require.config({
    baseUrl:'./js',
    paths: {  
        "e": "other/e",  
        "f": "other/f"
    },
	config:{  //外部函数赋值
		'e': {   //e指对应加载的模块名
			size: 'eee',
			cal:callE
		},
		'f':{
			size: 'fff',
			cal:callF
		}
	},
    waitSeconds: 150
})

插件引用：

define(function(require, exports, module){
	
	function aa(){
		module.config().cal('123e');
	}
	var m={
		aa:aa
	}
	return m;
})

5、jsonp服务，JSONP的callback参数为"callback"，因此"callback=define"告诉API将JSON响应包裹到一个"define()"中。

require(["http://example.com/api/data.json?callback=define"],
    function (data) {
        //data将作为此条JSONP data调用的API响应
        console.log(data);
    }
);

JSONP的这种用法应仅限于应用的初始化中。一旦JSONP服务超时，其他通过define()定义了的模块也可能得不得执行，错误处理不是十分健壮。

6、shim: 为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。

requirejs.config({
    shim: {
        'jquery.colorize': {
            deps: ['jquery'],
            exports: 'jQuery.fn.colorize'
        },
        'jquery.scroll': {
            deps: ['jquery'],
            exports: 'jQuery.fn.scroll'
        },
        'backbone.layoutmanager': {
            deps: ['backbone']
            exports: 'Backbone.LayoutManager'
        }
    }
});

7、paths备错配置

requirejs.config({
    //为了在IE中正确检错，强制define/shim导出检测
    enforceDefine: true,
    paths: {
        jquery: [
           'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min',
            //若CDN加载错，则从如下位置重试加载
            'lib/jquery'
        ]
    }
});

8、DOM Ready

在DOM加载完成后执行requeire内代码，domReady插件需另外加载。

require(['domReady!'], function (doc) {
    //本函数会在DOM ready时调用。
    //注意'domReady!'的值为当前的document
});

9、错误捕获

requirejs.onError = function (err) {
    console.log(err.requireType);
    if (err.requireType === 'timeout') {
        console.log('modules: ' + err.requireModules);
    }
    throw err;
};

三、r.js模块合并压缩

需在目录中放置r.js,同时有一个合并规则配置文件

例如build.js:

({
    appDir: './',
    baseUrl: './js',
    dir: './dist',
    modules: [
        {
            name: 'config'         //页面中data-main引入文件
			exclude:['other/b']    //不合并压缩的文件
        },{
            name: 'config2'
        },{
            name: 'main'
        }
    ],
    fileExclusionRegExp: /^(r|build)\.js$/,
    optimizeCss: 'standard',
    removeCombined: true,
    paths: {
		a:'empty:',     //empty:指不被压缩合并，单独请求
		b:'other/b',
		c:'some/c',
		d:'some/d',
		e:'other/e',
		f:'other/f'
    }
})

r.js依赖于nodejs环境，使用方法：进入文件所在目录，运行node r.js -o build.js

四、项目实例

项目背景：VC内嵌网页项目，需与VC进行简单数据交互

代码设计：

1、  独立文件配置文件路径，在require.js之前独立引用加载

Config.js:

//将配置作为全局变量"require"在require.js加载之前进行定义，它会被自动应用。下面的示例定义的依赖会在require.js,一旦定义了require()之后即被加载
var require={  
    baseUrl:'./js',
    paths: {  
        "a": "other/a",  
        "b": "other/b",  
        "c": "some/c",  
        "d": "some/d" 
    },
    waitSeconds: 150
}

2、  页面引入文件（模块文件使用代码）

<scriptdata-main="test6" src="require.js"></script>

3、  按功能划分模块及目录

4、  提取接口。

把需要引用的VC定义的函数，在config.js里通过config.cal()重新赋值。

Var vcCallback={
	refreshList:function(){},   //刷新列表数据
	refreshUserInfo:function(){}   //刷新用户数据
}

在require()代码里对其重写，如：vcCallback.refreshList=createView;