帮助IT团队快速构建符合jt808协议部标的基于java技术的GPS和视频平台(2379423771@qq.com)

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;
            });
        });
    });


posted on 2008-12-11 19:33 Speed 阅读(4439) 评论(2)  编辑  收藏 所属分类: 前端设计JQuery

评论

# re: JQuery的最佳实践 2008-12-12 10:25 舞命小丢

很有感觉!JQuery的主要扩展方式就是插件了啊!  回复  更多评论   

# re: JQuery的最佳实践 2008-12-16 08:43 淘声依旧

学习  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

导航

留言簿(15)

随笔分类

值得一看的博客

积分与排名

最新评论

阅读排行榜