JS模块化编程-requirejs
amd_and_require.jpg
先来看看下面的代码吧：
……
<script type='text/javascript' src='<%=contextPath%>/dwr/engine.js'> </script>
<script type='text/javascript' src='<%=contextPath%>/dwr/util.js'> </script>
<script type='text/javascript'
src='<%=contextPath%>/dwr/interface/IvmPlanAdjustDwrService.js'> </script>
<script language="JavaScript" src="<%=contextPath%>/application/include/common.js"></script>
<script src="<%=contextPath%>/application/include/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<%=contextPath%>/application/include/floatdiv/js/jquery.nyroModal-1.6.2.pack.js"></script>
<script src="<%=contextPath%>/application/include/dhtmlx/grid/dhtmlxcommon.js"></script>
<script src="<%=contextPath%>/application/include/dhtmlx/grid/dhtmlxgrid.js"></script>
<script src="<%=contextPath%>/application/include/dhtmlx/grid/dhtmlxgridcell.js"></script>
<script src="<%=contextPath%>/application/include/dhtmlx/grid/ext/dhtmlxgrid_splt.js"></script>
<script src="<%=contextPath%>/application/include/dhtmlx/grid/ext/dhtmlxgrid_hmenu.js"></script>
<script src="<%=contextPath%>/application/include/dhtmlx/grid/ext/dhtmlxdataprocessor.js"></script>
<script src="<%=contextPath%>/application/include/dhtmlx/grid/ext/dhtmlxgrid_undo.js"></script>
<script type="text/javascript">
function exit(){
if(!myDataProcessor.getSyncState()){
if(confirm("本页还有数据未保存！需要保存吗？")){
myDataProcessor.sendData();
}else{
return true;
}
}
}
function showDiffer(){
//var rowId = mygrid.getRowId(i);
var ippUuidCellId=mygrid.getColIndexById('ippUuid');
var ippUuid=mygrid.cells(mygrid.getSelectedId(),ippUuidCellId).getValue();
//alert(ippUuid);
$('#projectCompareForm.nyroModal').nyroModal({bgColor: '#CCCCCC',minHeight:'160',closeButton:'<a href="#" class="nyroModalClose" id="closeBut" title="关闭">关闭</a>'});
$("#projectCompareForm").attr("action","<%=request.getContextPath()%>/servlet/IvmPlanAdjustApproveServlet?operate=queryAdjustDetail&ippUuid="+ippUuid);
$("#projectCompareForm").submit();
//$("#projectCompare").load("<%=request.getContextPath()%>/servlet/IvmPlanAdjustApproveServlet?operate=queryAdjustDetail&ippUuid="+ippUuid);
//$("#projectCompare").css("top","200px");
//$("#projectCompare").css("left","100px");
//window.open("<%=request.getContextPath()%>/servlet/IvmPlanAdjustApproveServlet?operate=queryAdjustDetail&ippUuid="+ippUuid, '_blank', 'toolbar=no,menubar=no,location=no,resizable=no,scrollbars=yes,status=yes,menubar=no,height=300,width=1200,top=10,left=50');
}
……
这代码是我本人两三年前和一个同事（目前在阿里）共同完成的，上面的代码只是在同一个jsp页面上所有js代码的一小部分，整个jsp文件1000行以上，80%是js，如果这个系统现在还在运行，有人需要重新升级一下系统的话，这肯定是一大悲剧！！引用如此多的JS库，那么多js代码，注释还相当的少，有谁能看懂?
接下来就告诉大家如何来解决这个问题吧，这里要介绍的工具requirejs即将闪亮登场，在介绍它之前你必须先了解一下:
AMD: The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. This is particularly well suited for the browser environment where synchronous loading of modules incurs performance, usability, debugging, and cross-domain access problems.
AMD:异步模块定义规范（AMD）制定了定义模块的规则，这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应（浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题）。
为什么把英文和中文都写出来呢？ 因为我个人觉得有的时候硬要把一此IT的专用术语翻译成中文来理解有点费劲
它是一群牛B人们定义的规范，具体的内容自己去看吧：
https://github.com/amdjs/amdjs-api/blob/master/AMD.md
我们今天要用的requirejs就是实现了这个规范的一个js库。官方是这么定义requirejs的：
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
我是这样理解的：requirejs就是一个加载js文件和模块的小工具。使用Requirejs可以改善js代码的质量和性能，就是用来解决您在一开始看到的那堆“扯蛋”的代码，哈哈
直入正题吧，我将借用官方的get start带您入门，入门后就只能自己修炼了。
先来看看代码结构
.
├── app
│ ├── main.js
│ └── messages.js
├── app.js
├── index.html
└── lib
├── print.js
└── require.js
app目录下面是我们的程序代码，lib目录下是我们要用的requirejs和会引用到的一些第三方库，来看看代码吧：
index.html
<!DOCTYPE html>
<html>
<head>
<script data-main="app" src="lib/require.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
简单吧，只需要一行js,先加载requirejs，指定data-main，也就是和其它语言中的main方法一样，相当于程序的一个入口。
app.js
// For any third party dependencies, like jQuery, place them in the lib folder.
// Configure loading modules from the lib directory,
// except for 'app' ones, which are in a sibling
// directory.
requirejs.config({
baseUrl: 'lib',
paths: {
app: '../app'
}
});
// Start loading the main app file. Put all of
// your application logic in there.
requirejs(['app/main']);
很简单，对requirejs进行配置，指定模样加载路径等信息，然后直接加载main.js,来看看main.js里有什么：
define(function (require) {
// Load any app-specific modules
// with a relative require call,
// like:
var messages = require('./messages');
// Load library/vendor modules using
// full IDs, like:
var print = require('print');
print(messages.getHello());
});
这里引用了一个自己写的messages模块和一个第三文的print模块，调用相关的方法将相应的信息加印出来。
messages.js 里就是根据AMD的规范定义了一个方法：
define(function () {
return {
getHello: function () {
return 'Hello World';
}
};
});
print.js 也是一样的，这里只是项目目录组织形式上把第三方实现的都放到lib目录下。
define(function () {
return function print(msg) {
console.log(msg);
};
});
怎么样？还可以理解吧？ 最终效果就是在控制台打出“Hello World”。
OK，本文到此就结束了，只是带你入门（或者说只是告诉你有个叫requirejs的东东），其它的全靠你自己了，因为搜索引擎上一搜“requirejs”，会出来很多很多的好教程，我不想再写一个，没什么意义。但是我还是建议您从官网开始你的模块化js编程之旅：http://requirejs.org。
国际范程序必读：
程序员的编辑器-VIM(爱就是爱)
向开源社区贡献您的代码
在github上写博客
DevOps是什么东东？
js依赖管理工具bower
