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 相关文章推荐
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
通过原生vue添加滚动加载更多功能
Nov 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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
php之可变函数的实例详解
2017/09/13 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
详解A标签中href=""的几种用法
2017/08/20 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
为什么相对PHP黑python的更少
2020/06/21 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
情人节单身感言
2015/08/03 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
JavaScript实现栈结构详细过程
2021/12/06 Javascript