标签：
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模块代码
});
如今我们应该知道。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>
/* app.js */ console.log( "loaded" );
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" );
});
版权声明：本文博客原创文章，博客，未经同意，不得转载。
标签：
原文地址：http://www.cnblogs.com/gcczhongduan/p/4744803.html
