jQuery编写widget的一些技巧分享_jquery

1、在编写widget的时候,一般我们需要绑定一些事件,最好将这些widget的绑定事件加上当前widget的命名空间。如果同一个jQuery对象,使用了两个widget,而两个widget都绑定了相同的事件名称,可能会出现问题。在销毁widget的时候,去除绑定事件也很方便,只需要unbind(”.namespace“)就可以了。
2、在写jQuery的时候,因为jQuery对象是支持连写的。譬如:$(obj).css("height","20px").attr("title","abc")....
3、在编写的时候可以利用javascript的原生方法来避免switch。

复制代码 代码如下:

switch(a)
{
  case "aa":
    this._set_aa();
    break;
  case "bb":
    this._set_bb();
    break;
  case "cc"
    this._set_cc();
    break;
}

上面的代码可以用下面的代码替换

复制代码 代码如下:

this["_set_"+a]();

4、尽量缓存jQuery对象,和各种变量。这样可以提高脚本的性能
5、采用变量缓存this指针,在最小化代码的时候this可以被最小化掉。
6、最好将css类名取一致的名称,然后定义变量保存起来。在使用的时候直接采用变量,这样就算css名称有调整,只需要改变变量缓存的值即可。同时代码在最小化的时候也能减小体积。
7、setOption的时候,如果一个option是复杂对象,而不是简单的值对象,最好不要简单的this.options[key]=value.而在这之前需要将value和以前的option的值做一个extend,然后在赋值,这样可以保留复杂对象原有的部分值。比如:

复制代码 代码如下:

var a = {width:120,height:200};
var c={width:200};
a=c;
a=$.extend(a,c);

其结果是第一个a将是{width:20},会丢失掉height:200;而下面的那个将继续保留原始的height:200。

时间: 2024-10-01 09:51:28

jQuery编写widget的一些技巧分享_jquery的相关文章

jQuery的12招常用技巧分享_jquery

1.关于页面元素的引用 通过jQuery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jQuery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jQuery对象才能使用jQuery定义的方法.注意dom对象和jQuery对象是有区别的,调用方法时要注意操作的是dom对象还是jQuery对象.普通的dom对象一般可以通过$()转换成jQuery对象. 如:$(document.get

jQuery焦点图切换特效代码分享_jquery

本文实例讲述了jQuery焦点图切换特效.分享给大家供大家参考.具体如下: 这是一款网易保健品商城网站的jQuery焦点图代码,界面简洁.时尚.大方,通用性比较强,实现过程很简单. 运行效果图:      -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" href="css/zzsc.css

jQuery三级下拉列表导航菜单代码分享_jquery

本文实例讲述了jQuery三级下拉列表导航菜单.分享给大家供大家参考.具体如下: jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js,可无限极分类,可智能判断是否有下级菜单,鼠标经过上次菜单显示下级菜单. 运行效果图:             -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery三级下拉列表导航菜单代码如下 <head> <meta

jquery图片轮播特效代码分享_jquery

本文实例讲述了jquery图片轮播特效.分享给大家供大家参考.具体如下: 这是一款仿淘宝首页jquery轮播焦点图,基于jquery实现仿淘宝网首页正中间小焦点图特效. 运行效果图:         -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片轮播特效代码如下 <!DOCTYPE html> <head> <meta http-equiv=

jQuery平滑旋转幻灯片特效代码分享_jquery

本文实例讲述了jQuery平滑旋转幻灯片特效.分享给大家供大家参考.具体如下: 这一款基于jQuery实现平滑旋转幻灯片代码,效果超酷,场面相当震撼:图片大小和颜色自定义请修改jQuery-jcImgScroll.js. 运行效果图:               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. js关键代码: <script src="js/jQuery-1.7.1.j

jQuery手机拨号界面特效代码分享_jquery

本文实例讲述了jQuery手机拨号界面特效.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的手机拨号界面特效源码,是一款个性的phone网页版手机拨号界面样式代码.点击界面上数字按键可实时显示手机拨号效果,点击底部拨号键可模拟拨号通话的效果. 运行效果图:                         -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery

基于jquery步骤进度条源码分享_jquery

基于jQuery网页步骤流程进度条代码里面包含两款不同效果的jQuery步骤进度条特效.效果图如下: 在线预览       源码下载 html代码: <div class="step_context test"></div> 当前步骤: 第<input type="text" value="5" id="currentStepVal" />步 <button onclick="

15个jquery常用方法、小技巧分享_jquery

1.获取td的行标和列标 复制代码 代码如下: $(this).prop('cellIndex') 2.判断是否是回车按下 复制代码 代码如下: var myEvent = event || window.event;  var key = myEvent.keyCode;  if(key == 13){     //此时为回车按下          } 3.全选和反选 复制代码 代码如下: $("#selectall").click(function(){     if($(&quo

14个有用的Jquery技巧分享_jquery

1.通过方法返回Jquery对象实例 用 var someDiv = $('#someDiv').hide();  代替 var someDiv = $('#someDiv');  someDiv.hide(); 2.使用find来查找 用 $('#someDiv').find('p.someClass').hide();   代替 $('#someDiv p.someClass').hide();因为可以不必触发Jquery的Sizzle引擎,同时在写选择符的时候尽量让您的选择符简单同时优化最