官方网址: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()重新赋值。
提供给VC调用的函数(大部分为事件执行之后的回调),在config.js定义一个初始化对象,然后在各模块里进行相应赋值,如初始化对象:- Var vcCallback={
- refreshList:function(){}, //刷新列表数据
- refreshUserInfo:function(){} //刷新用户数据
- }
在require()代码里对其重写,如:vcCallback.refreshList=createView;