首页 > 代码库 > RequireJS
RequireJS
除开官方文档外 这篇博客挺好的 https://www.ibm.com/developerworks/cn/web/1209_shiwei_requirejs/
一般看完会有个疑问 define和require 区别是什么
define总共有三步 参考http://www.adobe.com/devnet/html5/articles/javascript-architecture-requirejs-dependency-management.html
Loads the specified dependencies
Calls the callback function
Registers the return value from the callback function as the module
require就是前2个，也就是说require不注册新模块，只是用别的模块。
来一个最基本的
<!DOCTYPE html><html><head> <title>My Sample Project</title> <!-- data-main 属性告诉 require.js 在 require.js 加载之后异步加载 js/main2.js --> <!--这个main2.js是主要文件 它依赖于各种其他模块 --> <!--PS 这里隐式说明了baseUrl是js这个文件夹--> <script data-main="js/main2" src="js/require.js"></script> <script type="text/javascript" src=‘js/ano.js‘></script></head><body><h1>My Sample Project</h1></body></html>
PS:data-main中的文件时异步加载的 所以开始解析ano.js的时候 main2不一定加载完成了
再看看一个完整的例子
require.config({ baseUrl: "./js", paths: { "common": "../common", "jquery":"../commonLib/jquery2.1.1" //实际路径是 bathUrl + paths 配置的路径 }});//define中碰到了jquery 实际上依赖的就是 上面配置的路径 即js/../commonLib/jquery2.1.1//PS jquery这个模块的名字必须是 jquery(全小写) define([‘jquery‘,"helper/util", ‘common/common1/common11‘],function( $,util, common11){ console.log(‘main1‘); console.log($); util.getName(); common11.getName();});
[‘xx‘] 方括号中的内容实际上就是文件路径 只不过对于jQuery 这个值必须是jquery 也就算是说jquery文件路径必须是
baseUrl/jquery 也就是js/jquery.js 不过一般jquery都不会直接在js下
本例子中jquery在和js同级目录下的commonLib中 因为我前面有个config 所以会依照config中的路径去寻找
模块应该在怎么写呢？
define([‘lib/jquery‘,‘lib/zepto‘],function($,$$){ console.log($); //undefined jquery默认模块名字只能是jquery 所以必须通过path 将模块名jquery映射为jquery文件实际路径 console.log($$); console.log(‘helper util‘); return { getName:function(){ console.log(‘helper util‘); } }});
这个模块将被上面的文件引用 上面定义了baseUrl是js 因此该模块依赖的文件实际路径是 js/lib/zepto
很惊讶！竟然不写模块名，因为可以省略。因为模块名也要和路径一致，所以可以省略。
要加的话 也一定是 helper/util
RequireJS