JQuery的最佳实践
使用JQuery不仅要泛泛的去用，还要去不断结合自己的业务的写一些插件，才能理解JQuery API设计的风格 simple and consistent.
1.开发插件所参考的典型模板
//
// create closure
//
(function($) {
//
// plugin definition
//
$.fn.hilight = function(options) {
debug(this);
// build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
// iterate and reformat each matched element
return this.each(function() {
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
});
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
//
// private function for debugging
//
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
//
// define and expose our format function
//
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
//
// plugin defaults
//
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
//
// end of closure
//
})(jQuery);
2.很多人喜欢在javascript中或者在后端服务器response输出中把html标记和数据混杂一起，然后输出到div中，这样非常难维护。
比较好的做法是使用javascript模板（参加JQuery JTemplate插件)：
1)在DIV中写入模板文件，并隐藏DIV $("#divID").hidden()
2) 通过DIV ID获取模板定义，解析并绑定数据，
3）生成html，重新写到DIV中： $("#divID").html(templateResult);
4）显示DIV $("#divID").show()
具体例子参见:
前端工程师如何提高设计的功力(三)基于JQuery的分层设计
用jQuery和jTemplates插件实现客户端分页的表格展现
3.尽可能的提供默认参数，尽可能的满足80%的需求
1
2var defaults = {
3 length: 300,
4 minTrail: 20,
5 moreText: "more",
6 lessText: "less",
7 ellipsisText: ""
8 };
9
10 var options = $.extend(defaults, options);
4.使用JQuery的selector中，尽量加上上下文限制遍历的空间，不仅提搞速度，更重要的是避免不必要的错误。
$('input, textarea, select,', this)
5.建立一个完备的log 体系
jQuery.fn.log = function (msg) {
console.log("%s: %o", msg, this);
return this;
};
$(root).find('li.source> input:checkbox').log("sources to uncheck").removeAttr("checked");
6.关注JQuery的自定义事件
jQuery中几个自定义的事件：
（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
});
（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
//每次点击时轮换添加和删除名为selected的class。
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
$("p").trigger("click"); //触发所有p元素的click事件
（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：
$("p").bind("click", function(){.text());}); //为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件
7.利用jQuery 内置的CSS选择器selectors来提高效率.
如$(":input ") 的到页面上所有tag 是input的Form控件。
如果在加上[attribute=value] 就更方便了如：$（" input[name='firstName']") 是查找DOM name是firstName的Form控件.
//下面是得到多选下拉框的所有的选择的值，放入到map中。
jQuery('option:selected', this).each( function() {
a.push({name: n, value: this.value});
});
8. return flase 来阻止事件冒泡, 如：屏蔽select下拉框的滚轮事件
$(document).ready(function(){
$("select").each(function(){
$(this).bind("mousewheel",function(){
return false;
});
});
});
本文来源于http://www.blogjava.net/oneeyewolf
联系客服
