编写优秀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插件实现图片延迟加载技术(懒加载)
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
随机推荐
- C# 枚举值 (二) 多属性 操作
很多时候,我们的枚举值可能需要中英文, 那么可以使用下面的方法: 下面这个类,包含2部分. 1 BaseDescriptionAttribute特性的重载 2 枚举的操作类 EnumOperate n ...
- Sublime text3 插件LiveReload 实现实时预览
1.首先要安装插件LiveReload Sublime text3. 菜单 preferences->packages control,输入install.. 回车,输入LiveReload回车 ...
- 07 zabbix之map拓扑标签中macro应用
zabbix之map拓扑标签中macro应用 请先预习网地图map : 请点击 macro官方文档介绍 : 请点击 1. Map labels(拓扑图标签)主要注意以下Macros(宏): MAC ...
- 自学工业控制网络之路1.4-典型的现场总线介绍CAN
返回 自学工业控制网络之路 自学工业控制网络之路1.4-典型的现场总线介绍CAN 1991年3月,发布了CAN技术贵干v2.0,包含了A.B两部分.CAN2.0A给出报文标准格式,CAN2.0B给出了 ...
- Android 安装 卸载 更新 程序
安装程序的方法: .通过Intent机制,调出系统安装应用,重新安装应用的话,会保留原应用的数据. 1. String fileName =Environment.getExternalStorage ...
- JDK源码分析(5)Vector
JDK版本 Vector简介 /** * The {@code Vector} class implements a growable array of * objects. Like an arra ...
- 部署kubernetes1.8.4+contiv高可用集群
原理和架构图参考上一篇,这里只记录操作步骤.由于东西较多,篇幅也会较长. etcd version: 3.2.11 kube version: 1.8.4 contiv version: 1.1.7 ...
- POSIX 线程取消点的 Linux 实现
http://blog.csdn.net/stevenliyong/article/details/4364039 原文链接:http://blog.solrex.cn/articles/linux- ...
- CDQZ.OPENJUDGE DataStructure22
我觉得这是很重要的一些题目.它们都在这里:硕巨结构 Challenge 0:给定数列,单点修改,单点查询修改.煞有介事,不过一数组耳. Challenge 1:给定数列,单点修改,单点查询第k次操作后 ...
- P1099 树网的核
NOIP 2007 提高第四题. 啊......我还是看了题解才做出来的. 这题乍一看毫无头绪,但是我们spy on一下,暗中观察发现:n才300!随便打暴力水过去啊! 然后,这破题怎么暴力?感觉我的 ...