总结
requireJS。这翻译成中国"必须js"。说白了就是装js文件与。如何装好了？。这是继AMD标准化的模块化装。除了AMD另一种规范称为CMD规范。跟随CMD兼容模块加载。的淘宝首席架构师”玉伯“写的SeaJS了，并且这货听说还能载入css文件。似乎非常niubility! 可是今天讲的是requireJS,至于二者的优缺点请參考：http://www.zhihu.com/question/20342350,后来发现最火的答案竟然是seaJS的作者写的，看来作者还是非常在乎别人对SeaJS的评价。
ok,回到原题，有人会问为什么要使用基于模块的形式载入js文件呢？我的答案是不一定要用这样的形式，使用这样的形式是因人而异，因项目而异的，假设做大型站点的话，使用模块的形式会比較规范。维护也比較easy，架构也比較清晰。反正多学点东西没坏处。并且如今非常多的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做样例吧，首先建立一个例如以下结构的project文件夹：
├── 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官方网站查看很多其他的细节和原则。
版权声明：本文博客原创文章，博客，未经同意，不得转载。