requireJs笔记
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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()又一次赋值。
提供给VC调用的函数(大部分为事件运行之后的回调),在config.js定义一个初始化对象。然后在各模块里进行对应赋值,如初始化对象:Var vcCallback={ refreshList:function(){}, //刷新列表数据 refreshUserInfo:function(){} //刷新用户数据 }
在require()代码里对其重写,如:vcCallback.refreshList=createView;
以上是关于requireJs笔记的主要内容,如果未能解决你的问题,请参考以下文章