jQuery编写widget的一些技巧分享

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。

赞 (0)

相关推荐

  • jQuery基础学习技巧总结第1/4页

    一.简介 1.1.概述          随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度. jQuery是继prototype之后的又一个优秀的Javascript框架.它是由 John Resig 

  • 分享15个大家都熟知的jquery小技巧

    帮助提高你jQuery应用的15个大家都熟知的jquery小技巧,分享给大家 回到顶部按钮 图片预加载 判断图片是否加载完 自动修补破损图像 Hover切换class类 禁用输入 停止正在加载的链接 toggle fade/slide 简单的手风琴 使两个DIV同等高度 在浏览器标签/新窗口打开外部链接 根据文本获取元素 可见变化的触发 Ajax调用错误处理 链式操作 1.回到顶部按钮 利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画. //

  • jQuery实用技巧第1/2页

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

  • jquery操作复选框(checkbox)的12个小技巧总结

    1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项$('input:checkbox').each(function() {        if ($(this).attr('che

  • 关于jQuery新的事件绑定机制on()的使用技巧

    今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔

  • jquery常用技巧及常用方法列表集合

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

  • 关于jQuery UI 使用心得及技巧

    关于jQuery UI 使用心得及技巧

    1 jQuery UI 2 为我所用 2.1 Tabs 2.2 Accordion 2.2.1 使用基本的Accordion 2.2.2 实现打开多个标签 2.2.3 Accordion的嵌套 3 给插件应用主题--Theme Roller 3.1 更改配色 3.2 更改图标 4 相关连接 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码.直到jQuery的出现,让开发人员从一大堆繁琐的js代码中解脱,取而代之几行jQuery代

  • jquery div 居中技巧应用介绍

    very short version: [html] 复制代码 代码如下: $('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'}); $('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('

  • jQuery操作表格（table）的常用方法、技巧汇总

    以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 复制代码 代码如下: $('#table1 tr').hover(function(){    $(this).children('td').addClass('hover')}, function(){    $(this).children('td').removeClass('hover')}); 方法二: 复制代码 代码如下: $("#table1 tr:gt(0)").hover(function()

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

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

  • jQuery的12招常用技巧分享

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

  • JavaScript编码小技巧分享

    三元操作符 如果使用if...else语句,那么这是一个很好节省代码的方式. const x = 20; let big; if (x > 10) { big = true; } else { big = false; } //这样写... const big = x > 10 ? true : false; Short-circuit Evaluation 分配一个变量值到另一个变量的时候,你可能想要确保变量不是null.undefined或空.你可以写一个有多个if的条件语句或者Short

  • jquery编写Tab选项卡滚动导航切换特效

    jquery编写Tab选项卡滚动导航切换特效

    本文实例为大家分享jquery编写Tab选项卡切换特效,供大家参考,具体内容如下 效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换tab. js: $(document).ready(function(){ $('.switch-tab>li').click(function(){ var s=

  • ES6/JavaScript使用技巧分享

    在编写JavaScript代码的时候存在的一些方法和技巧,虽然有时候条条大路都通向罗马,但是也许总会有那么一条最短的路径可走.本文将一些都知道却不怎么用的小技巧分享给大家 一些小技巧 1.new Set() 数组的去重,在'潜意识'里面感觉就应该去循环然后对比去重,其实在ES6中新增提供了新的数据结构Set,用他可以轻松去重数组,比如: let arr = [1,1, 2, 2, 3, 3]; let set = new Set(arr); // let newArr = Array.from(

  • 高效jQuery选择器的5个技巧实例分析

    本文实例讲述了高效jQuery选择器的5个技巧.分享给大家供大家参考,具体如下: 顾名思义,jQuery专注于查询(queries).库的核心允许你使用CSS选择器语法,以及通过在集合上执行函数,来查找DOM元素. jQuery使用浏览器原生API方法获取DOM集合.现代浏览器支持getElementsByClassName, querySelector以及querySelectorAll(可以解析CSS语法).然而,老版本的浏览器可能只提供getElementById以及getElementB

  • jQuery编写QQ简易聊天框

    本文实例为大家分享了jQuery编写QQ简易聊天框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>QQ简易聊天框</title> <link rel="stylesheet" href="css/chat.css" >

  • MySQL性能优化技巧分享

    MySQL性能优化 在互联网公司MySQL的使用非常广泛,大家经常会有MySQL性能优化方面的需求.整理了一些在MySQL优化方面的实用技巧. Schema与数据类型优化 整数通常是标识列最好的选择,因为它们很快并且可以使用AUTO_INCREMENT 完全"随机"的字符串(如:MD5().SHA1()或者UUID()等产生的字符串)会任意分布在很大的空间内,会导致INSERT以及一些SELECT语句变的很慢 如果希望查询执行得快速且并发性好,单个查询最好不要做太多的关联查询(互联网公

  • 17条提高工作效率的Python技巧分享

    目录 1.引言 2.技巧总结 2.1.处理用户的多个输入 2.2.处理多个条件语句 2.3.判断数字奇偶性 2.4.交换变量 2.5.反转字符串 2.6.判断字符串是否为回文串 2.7.尽量使用 Inline if statement 2.8.删除list中的重复元素 2.9.找到list中重复最多的元素 2.10.list 生成式 2.11.使用*args传递多个参数 2.12.在循环时处理下标 2.13.拼接list中多个元素 2.14.将两个字典进行合并 2.15.使用两个list生成一个

  • Python中隐藏的五种实用技巧分享

    目录 1. ... 对象 2.解压迭代对象 3.展开的艺术 4.下划线 _ 变量 5.多种用途的else 循环 异常处理 1. ... 对象 没错,你没看错,就是 "..." 在Python中 ... 代表着一个名为 Ellipsis 的对象.根据官方说明,它是一个特殊值,通常可以作为空函数的占位符,或是用于Numpy中的切片操作. 如: def my_awesome_function():     ... 等同于: def my_awesome_function():     Ell

随机推荐