jQuery编写widget的一些技巧分享


Posted in Javascript onOctober 28, 2010

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。
Javascript 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
vue之组件内监控$store中定义变量的变化详解
Nov 08 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 Javascript
jQuery timers计时器简单应用说明
Oct 28 #Javascript
jquery ajax abort()的使用方法
Oct 28 #Javascript
BOM与DOM的区别分析
Oct 26 #Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 #Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 #Javascript
基于jquery的给文章加入关键字链接
Oct 26 #Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 #Javascript
You might like
PHP中for循环语句的几种变型
2007/03/16 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
Javascript 实用小技巧
2010/04/07 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
社区敬老月活动实施方案
2014/02/17 职场文书
人大调研汇报材料
2014/08/14 职场文书
资产移交协议书
2016/03/24 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫