编写优秀jQuery插件技巧
1. 把你的代码全部放在闭包里面
这是我用的最多的一条。但是有时候在闭包外面的方法会不能调用。
不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面。 而方法可能应该放在Prototype方法内部。
/注意为了更好的兼容性,开始前有个分号
;(function($){ //此处将$作为匿名函数的形参
/*这里置放代码,可以使用$作为jQuery的缩写别名*/
})(jQuery); //这里将jQuery作为实参传递给匿名函数了
<script>
//插件编写
;(function(){
$.fun.extend({
"color":function(value){
return this.css('color',value);
}
});
})(jQuery); //插件应用
$(function(){
alert($('div').color('red'));
});
</script> <div class='a'>red</div>
<div style="color:blue">blue</div>
$.fn.extend
$.fn就是jQuery的原型,$.fn等于jQuery.prototype,$是jQuery的别名。$.fn.extend方法的作用是用于扩展jQuery实例对象,也就是我们从页面中获得的jQuery对象。
插件:一个函数
(function($) { $.fn.pluginName = function(options) { // 代码在此处运行 return this;
} })(jQuery);
上面的代码中的函数可以像其他的jQuery函数那样通过$('#element’).pluginName()来调用。注意,我是如何把“return this”语句加进去的;这小片的代码通过返回一个原来元素的集合(包含在this当中)的引用来产生链式调用的效果,而这些元素是被一个jQuery对象所包裹的。你也应该注意,“this”在这个特定的作用域中是一个jQuery对象,相当$(‘#element’)。
根据返回的对象,我们可以总结出,在上面的代码中,使用$(‘#element’).pluginName()的效果和使用$(‘#element’)的效果是一样的。在你的即时执行函数作用域中,没必要用$(this)的方式来把this包裹到一个jQuery对象中,因为this本身已经是被包装好的jQuery对象。
http://www.runoob.com/w3cnote/jquery-10-skill.html
编写优秀jQuery插件技巧的更多相关文章
- 编写优秀jQuery插件的10个技巧
前言:在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行 ...
- 近期十大优秀jQuery插件推荐
当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时,jQuery可以扩展你的视野.本文将推荐从jQuery网站的Plugin频道中推选出的近期十款优秀jQuery插件. 1.jQuery U ...
- 2013年优秀jQuery插件
今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip ...
- 【jQuery基础学习】08 编写自定义jQuery插件
目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...
- 编写jQuery 插件
编写jQuery Plugin,要设置默认值,并允许用户修改默认值,或者运行是传入其他值. 最终,我们得出编写一个jQuery插件的原则: 给$.fn绑定函数,实现插件的代码逻辑: 插件函数最后要 r ...
- 详细图解jQuery对象,以及如何扩展jQuery插件
详细图解jQuery对象,以及如何扩展jQuery插件 早几年学习前端,大家都非常热衷于研究jQuery源码.我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来 ...
- 前端基础进阶(十一):详细图解jQuery对象,以及如何扩展jQuery插件
早几年学习前端,大家都非常热衷于研究jQuery源码.我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来JavaScript居然可以这样用!” 虽然随着前端的发 ...
- Lazy Load, 延迟加载图片的 jQuery 插件.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 使用jquery插件实现图片延迟加载技术(懒加载)
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
随机推荐
- pandas分组group
Pandas对象可以分成任何对象.有多种方式来拆分对象,如 - obj.groupby(‘key’) obj.groupby([‘key1’,’key2’]) obj.groupby(key,axis ...
- pip和conda到底有什么不一样?
今天看到我的foreman开始报错去询问才发现.我们的python包管理工具已经从pip整体迁移到了conda..最近的迁移真的非常多..前端也在迁移打包
- Sql保留两位小数方法
2.176544保留两位小数 1.select Convert(decimal(18,2),2.176544) 结果:2.18 2.select Round(2.176544,2) 结果:2.180 ...
- Check failed: status == CUBLAS_STATUS_SUCCESS (11 vs. 0) CUBLAS_STATUS_MAPPING_ERROR
I0930 21:23:15.115576 30918 solver.cpp:281] Learning Rate Policy: multistepF0930 21:23:17.263314 310 ...
- 英国电信反悔华为是唯一真正的5G供应商
导读 英国电信反悔华为是唯一真正的5G供应商 英国电信的一位发言人表示,该公司目前正「从我们自 2006 年以来实施的网络架构原则中,从我们的 3G 和 4G 网络核心提取华为设备」. 英国电信已经不 ...
- BZOJ3175[Tjoi2013]攻击装置——二分图最大独立集
题目描述 给定一个01矩阵,其中你可以在0的位置放置攻击装置.每一个攻击装置(x,y)都可以按照“日”字攻击其周围的 8个位置(x-1,y-2),(x-2,y-1),(x+1,y-2),(x+2,y- ...
- 解析 Android Things 技术原理
2012 年 6 月,由 IoT-GSI(Global Standards Initiative on Internet of Things)发布的白皮书“ITU-T Y.4000/Y.2060”[1 ...
- 机器学习工作流程第一步:如何用Python做数据准备?
这篇的内容是一系列针对在Python中从零开始运用机器学习能力工作流的辅导第一部分,覆盖了从小组开始的算法编程和其他相关工具.最终会成为一套手工制成的机器语言工作包.这次的内容会首先从数据准备开始. ...
- [luogu3801]红色的幻想乡
题目描述 经过上次失败后,蕾米莉亚决定再次发动红雾异变,但为了防止被灵梦退治,她决定将红雾以奇怪的阵势释放. 我们将幻想乡看做是一个n*m的方格地区,一开始没有任何一个地区被红雾遮盖.蕾米莉亚每次站在 ...
- 添加AD RMS role时,提示密码不能被验证The password could not be validated
"The password could not be validated" when attempting to provision an AD RMS server. Sympt ...