requireJS简单入门学习
概要
requireJS，翻译成中文即"需要js"，说白了就是加载js文件用的。怎么加载呢？，即遵循AMD规范的模块化加载。除了AMD规范还有一个叫做CMD规范，遵循CMD规范的模块加载器，比较有名的应该是国内的淘宝首席架构师”玉伯“写的SeaJS了，而且这货听说还能加载css文件，似乎很niubility! 但是今天讲的是requireJS,至于二者的优缺点请参考：http://www.zhihu.com/question/20342350,后来发现最火的答案居然是seaJS的作者写的，看来作者还是很在乎别人对SeaJS的评价。
ok,回到原题，有人会问为什么要使用基于模块的形式加载js文件呢？我的答案是不一定要用这种形式，使用这种形式是因人而异，因项目而异的，如果做大型网站的话，使用模块的形式会比较规范，维护也比较容易，架构也比较清晰，反正多学点东西没坏处。而且现在很多的js前端框架也开始支持兼容模块化的加载方式了，比如大名鼎鼎的，作为一个PE无人不知的Jquery,还有Node,Dojo,等。下面来看看jquery-ui的一个button组件的一小段代码，就知道怎么回事了。
<pre name="code" class="html">(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([
"jquery",
"./core",
"./widget"
], factory );
} else {
// Browser globals
factory( jQuery );
}
}(function( $ ) {
//your plugin code
//你的插件or模块代码
});
这是一种兼容的方法，如果你使用了AMD加载器（如requireJS）的话，define的类型就是function,然后就会按照AMD的规范来定义此插件（模块），关于如何按AMD规范来定义插件，请参考：http://requirejs.org/docs/api.html#define。如果你没有使用加载器的话则按照一般的方法定义，这样的话就可以按照普通的方法正常使用了。
现在我们应该知道，requireJS只能正确加载按照AMD规范定义的插件，通过只要对普通的插件进行简单的修改即可，不过现在越来越多的插件开始兼容AMD规范了。好了，现在来看看如何使用requireJS来加载插件吧。
一个小例子
那就用jquery-UI做例子吧，首先建立一个如下结构的工程目录：
├── index.html ├── js │ ├── app.js │ ├── jquery-ui │ │ ├── accordion.js │ │ ├── autocomplete.js │ │ ├── button.js │ │ ├── core.js │ │ ├── datepicker.js │ │ ├── dialog.js │ │ └── ... │ ├── jquery.js │ └── require.js我们可以看到，所有js文件都放在了js目录中，jquery.js和require.js直接位于js目录中，并且所有的jquery UI的文件都位于jquery-ui目录中。app.js则包含我们的主要代码。
不过你也可以使用其他的目录结构，不过可能需要进行一些配置修改，这样requireJS才知道如何找到这些依赖的文件，可以参考change some configuration
现在这些文件都准备好了，如何使用它们呢？请看index.html中的代码：
<!doctype html>
<html lang="en">
<head>
...
</head>
<body>
<script src="js/require.js" data-main="js/app"></script>
</body>
</html>
我们只需要加载require.js文件即可，注意这里只能加载这个一个文件，否则会报错的，详细请参考：http://requirejs.org/docs/errors.html#mismatch。这里还需要注意data-main属性，这里是js/app.js，这里的意思是等reuire.js加载完后会自动执行app.js中的代码。不信的话，可以在app.js中加一条console.log();测试一下。
/* app.js */ console.log( "loaded" );
下面就可可以app.js使用require()这个函数来加载你想要的js文件了，如：
require([ "jquery-ui/autocomplete" ], function( autocomplete ) {
...
});这样就会异步加载
jquery-ui/autocomplete.js和它所依赖的js文件（jquery.js,jquery-ui/core.js,jquery-ui/wedget.js等）。
当这些依赖的文件全部加载完成后，就会执行后面的回调函数。
下面是使用jquery-UI中的一个例子：
require([ "jquery-ui/autocomplete" ], function( autocomplete ) {
autocomplete({ source: [ "One", "Two", "Three" ] }, "<input>" )
.element
.appendTo( "body" );
});你也可以吧jquery加载进来，这样就可以像使用jquery那样使用了：
require([ "jquery", "jquery-ui/autocomplete" ], function( $ ) {
$( "<input>" )
.autocomplete({ source: [ "One", "Two", "Three" ]})
.appendTo( "body" );
});
ok,终于把这个例子介绍完了，尽管很粗糙，但是有个印象就行了，毕竟是入门，如果需要更深入的研究可以到reqiureJS官网查看更多细节和原理。