RequireJS实例分析
随着JS越来越庞大，已经不仅仅是以前复制粘贴做特效的时代了，JS越来越偏向于业务逻辑与应用。恰逢Node的流行，JS在web开发中占有越来越重要的地位。由于JS代码庞大，文件数目多，传统的使用<script src=""></script>会带来很多性能的问题，因此requirejs可以为我们提供两种解决思路： 1 模块化组织JS 2 异步加载JS文件 有了这两种解决办法，能有效的帮助我们解决前端代码库的组织难题。 本文下面就模拟一个小例子，由于并没有应用实践，因此命名很戳，还请见谅。 关于Require.js在多页面应用的实践，可以参考：multipage
层次组织
/public
|------require.js、config.js、index.html
|-------lib/
|-------a.js、b.js
|-------orthers/
|-------c.js
文件功能
require.js:
其中requirejs的核心代码就是require.js文件，可以从官方网站上下载：
config.js:
用于配置requirejs的相关内容，可以设置文件目录，加载模块命名匹配，以及一些依赖关系等等。
index.html：
我们的测试页面或者网址首页。
/lib/a.js和/lib/b.js 以及 /others/c.js
是测试的模块js文件。
代码详情
index.html
<doctype html>
<html>
<meta http-quiv="Content-Type" content="text/html;charset=UTF-8">
<script data-main="config" src="require.js"></script>
</html>
<body>
<h1>This is test for RequireJS</h1>
<script type="text/javascript">
alert("index");
</script>
</body>其中，data-main指定主要的配置文件；src为requirejs的文件。
config.js
require.config({
// baseUrl:'/',
paths:{
"a":"lib/a",
"b":"lib/b",
"c":"others/c"
}
});
require(['a','b','c'],function(a,b,c){
a.hello();
b.hello();
c.hello();
});baseUrl指定所有文件的主要目录，paths配置模块名字以及其匹配的加载路径。
当有需要使用某些模块时，就可以通过require([xxx],function(xxx){xxx});的方式使用。
a.js
define([], function() {
return {
hello: function() {
alert("hello, a");
}
}
});b.js
define([], function() {
return {
hello: function() {
alert("hello, b");
}
}
});c.js
define([], function() {
return {
hello: function() {
alert("hello, c");
}
}
});模块化文件，一般是一个功能是一个文件。文件的名字，就是上面requireconfig中配置的模块名字。require加载文件时，会自动加上.js后缀。
当某些模块依赖其他模块时，可以通过define([xxx],function(xxx){yyy});的方式添加依赖关系，require会在异步加载后，自动调整次序。
当访问index.html时，会先加载require.js然后把需要加载的文件都通过appendChild的方式，添加到index.html的底部。
因此会先弹出index对话框，当执行config.js的后半部分代码时，会依次使用a.js b.js c.js，因此也会依次弹出三个对话框。
这就是简单的模块化组织架构，如果需要参考实例项目，可以学习测试样例的源码，它主要为elasticsearch提供前端UI。
参考
【1】阮一峰requirejs：http://www.ruanyifeng.com/blog/2012/11/require_js.html
【2】requirejs中文文档：http://www.requirejs.cn/
腾讯云开发者
