编写优秀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插件实现图片延迟加载技术(懒加载)
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
随机推荐
- Intel SP处理机以及AMD处理器的一些对比资料
1. EPYC 与 intel的CPU对比 2. Intel SP处理器参数: 3. AMD处理器参数 4. Intel SP处理器部分参数2 5. Intel SP处理器简单说明 6. intel ...
- Angular $interval
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...
- K3CLOUD替代方案
路径 [生产制造]->[工程数据]->[替代方案]->[替代方案] 应用场景 实际业务处理中,由于订单取消.工程变更.客户需求变化.预测或计划不准确等原因造成原材料库存积压.呆滞,使 ...
- TMainMenu - 隐藏与显示菜单
//隐藏与显示菜单 Self.Menu := nil; {隐藏菜单} Self.Menu := MainMenu1; {显示菜单}
- Highcharts之3D柱状图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- ZJOI2019 Day1游记
退役吧垃圾 考的再烂还是要把自己捡起来 如果不想让自己的OI生涯就到这里止步的话 就给我滚去拿剩下的300分吧 浙江省前十六,学校前五,day1比别人差一百多分.如果这样还能进省队的话,我就成为传说了 ...
- NOIP2018滚粗记
NOIP2018滚粗记 day 0 上午,说是可以休息,然后睡到快9点起来吃个早饭去了机房.刷了几个板子就十二点了 下午大概就是看别人总结,颓知乎,完全没心思写代码. 晚上不要求,然后在寝室颓了一下, ...
- [转载]使用VS2015搭建Lua开发环境
参考原文请看: Lua学习笔记1:Windows7下使用VS2015搭建Lua开发环境(一) Lua学习笔记2:Windows7下使用VS2015搭建Lua开发环境(二) 本篇主要分以下几个部分: 一 ...
- [代码]--C#action和func的使用
以前我都是通过定义一个delegate来写委托的,但是最近看一些外国人写的源码都是用action和func方式来写,当时感觉对这很陌生所以看起源码也觉得陌生,所以我就花费时间来学习下这两种方式,然后发 ...
- mybatis There is no getter for property named '*' in 'class java.lang.String
1.原因 server层 xxxx.get("1234") map <if test="aaa != null and aaa.id != null and ...