**最近做内推项目，虽然项目不算太大，还是遇到了一些代码组织的问题，说到底还是对整个项目的掌控力不够，为此乐帝专门在网络中搜集了一些jquery代码组织的文章并总结出两种方法来更好组织jquery代码。**
**一、回调函数**
**回调函数的定义：**
**A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.**
回调是将一个函数作为变量，传入另外一个函数。前者将会在后者执行完成后执行。
上述简单的回调例子，说明函数的参数可以是一个函数，这也是jquery回调函数用法的基础了。
~~~
function hideSearchArea(callback) {
$(".search-area-container").hide();
var width = searchArea.width();
searchArea.animate({ "left": -width }, 400, function () {
if (callback) {
callback();
}
});
}
btnSearch.click(function () {
var keyWord = $('#keyWord').val();
var locId = $("#citySelect").val();
if (keyWord == oldSearchData.keyWord && locId == oldSearchData.locId) {
hideSearchArea();
return false;
}//老数据不返回数据
hideSearchArea(function () {
jobList.empty();
pageNum = 1;//清空page数
getInternalRecommendJobAdList(keyWord, locId);//加载搜索项
});//采用回调，省去了传参数的问题
});
~~~
此次内推项目中也用到了回调，在上述代码例子中，回调的好处在于省去了复杂的函数间传参的过程，在click事件中定义的局部变量，直接传入hideSearchArea函数的回调中，省去了多余变量控制参数的传递。
**二、jquery代码组织要点**
- 1.解决消除匿名函数。
- 2.以配置参数为中心。
- 3.将事件监听统一到一个函数内部。
- 4.将整个程序段封装成一个函数，对外只保留唯一接口，便于大型项目代码组织。
**下面通过一个简单的例子看一下代码组织的应用：**
**html结构：**
~~~
<ul id="myFeature">
<li>hi oop</li>
</ul>
~~~
jquery代码：
~~~
var myFeature = {
//首先类的实例属性用this.xxx形式定义，类属性用className.xxx形式定义
//以下各函数与配置对象都为类属性
// 初始化配置Jquery对象参数，并调用事件绑定设定函数
// 类内部，使用_this对对象进行替代，便于标示
init : function(settings) {
_this = myFeature;
_this.config = {
$items : $('#myFeature li'),
$container : $('<div class="container"></div>'),
};
$.extend(_this.config, settings || {});
_this.setup();
},
// 事件绑定设定函数，用于绑定事件，沟通jquery对象与响应事件
setup : function() {
var item = _this.config.$items;
item.each(_this.createContainer)
.click(_this.showItem);
},
//在li下创建div并设置数据
createContainer : function() {
var $i = $(this),
$c = _this.config.$container.clone()
.appendTo($i);
$i.data('container',"hello world");
},
showItem : function() {
_this.$currentItem = $(this);
_this.getContent();
},
getContent : function() {
var txt = _this.$currentItem
.data('container');
$(".container").html(txt);
},
};
$(function(){
myFeature.init();
});
~~~
**从这段代码不难看出，上述代码组织思想。**
- 将用到的DOM对象统一写到配置（config）对象中
- **将事件监听对象统一写到安装函数（setup）中**
- **配置属性及安装函数在初始化函数（init）函数中调用**
- **安装函数事件监听函数采用函数回调方法，调用本类功能函数**
- **在整段程序的入口调用此类的初始化（init）方法**
上述程序有个弊端，那就是在外部可以对类方法进行访问。
****
**对上述方法进一步优化，将整个对象改成一个自执行函数，那么返回值为初始化对象就是对外的唯一接口，内部编排也不用考虑对象引用的问题，本质上仍然是面向过程编程，但代码管理上已经做到了极好的封装。**
**代码如下：**
~~~
var feature = (function() {
var $items = $('#myFeature li'), $container = $('<div class="container"></div>'), $currentItem,
init = function(settings){
setup();
},//初始化函数
setup= function() {
var item = $items.each(createContainer)
.click(showItem);
},//绑定函数
createContainer = function(idx) {
var $i = $(this),
$c = $container.clone()
.appendTo($i);
$i.data('container',"hello world");
},
showItem = function(){
$currentItem = $(this);
getContent();
},
getContent = function() {
var txt = $currentItem
.data('container');
$(".container").html(txt);
};
return {
init : init//对外接口
};
})();
feature.init();//初始化函数
~~~
如上代码所示可以实现，前文所述的四个要点。但考虑到这次内推项目脚本都是针对每个页面单独执行，就没有采用这种组织方式。但整体思路上仍然采用上述方法。即只实现前三个要点，代码实现上用第二种代码写法。
**三、参考资料**
**1.知乎网友：http://www.zhihu.com/question/26348002**
**2.360个人图书馆：http://www.xue163.com/121/6/1212972.html**
**3.csdn网友：http://blog.csdn.net/dananhai381/article/details/6709934**
- 前言
- 前端编程提高之旅（一）----插件
- 前端编程提高之旅（二）----网站常见特效的jquery实现
- 前端编程提高之旅（三）----浏览器兼容之IE6
- 前端编程提高之旅（四）----backbone初体验
- 前端编程提高之旅（五）----写给大家看的css书
- 前端编程提高之旅（六）----backbone实现todoMVC
- 前端编程提高之旅（七）----marionette实现todoMVC
- 前端编程提高之旅（八）----D3.js数据可视化data join解析
- 前端编程提高之旅（九）----延迟对象
- 前端编程提高之旅（十）----表单验证插件与cookie插件
- 前端编程提高之旅（十一）----jquery代码的组织
- 前端编程提高之旅（十二）----position置入值应用
- 前端编程提高之旅（十三）----jquery选择器
- 前端编程提高之旅（十四）----jquery DOM操作
- 前端编程提高之旅（十五）----jquery事件
- 前端编程提高之旅（十六）----jquery中的动画
- 前端编程提高之旅（十七）----jquery中表单、表格和ajax
- 前端编程提高之旅（十八）----移动端web流行交互技术方案研究