所谓 jQuery 插件,怎样开发一个 jQuery 插件
简单来说,所谓 jQuery 插件就是扩展在 jQuery 原型对象上的一个方法。通过扩展 jQuery 对象,每次调用 jQuery 对象的时候,对象里面都包含了我们自己所添加的那个方法。
一般插件的设计目的都是为了能在选择器所选择的结果集上做某些事情,本质上和 jQuery 自带的fadeOut
和addClass
之类的方法没什么区别。
制作好自己的插件后,可以在自己的项目中私用,如果你愿意的话,也可以免费公开给其它人使用。而且,现在互联网上的免费插件也非常的多。另外,制作一个属于自己的 jQuery 插件的门槛真的很低。
如何制作一个插件
一个典型的插件制作方法如下:
(function($){$.fn.myNewPlugin =function() {return this.each(function(){// do something});};}(jQuery));
不要被上面的代码迷惑,制作 jQuery 插件的关键点就是扩展 jQuery 的原型对象,其实也就是下面这行代码:
$.fn.myNewPlugin =function() {/* do something */}
然后再将其封装在一个自执行函数中:
(function($){//...}(jQuery));
其实也就是创建一个私有的作用域来扩展 jQuery,在这个作用域中可以随意使用 $
符号,而不用担心和其它 JavaScript 库中的 $
产生冲突。
所以,真正意义上的插件代码就是以下部分:
$.fn.myNewPlugin =function() {return this.each(function(){// do something});};
其中的 this
关键字,指向的是调用这个插件的 jQuery 对象。
var somejQueryObject = $('#something');$.fn.myNewPlugin =function() {alert(this=== somejQueryObject);};somejQueryObject.myNewPlugin();// alerts 'true'
一个典型的 jQuery 对象通常包含许多 DOM 元素,所以说 jQuery 对象也被看做是 DOM 对象集。因此,如果要对对象集中的每个元素作处理,就要借助于 jQuery 的 each()
方法:
$.fn.myNewPlugin =function() {return this.each(function(){});};
和其它大多数 jQuery 方法一样,jQuery 的 each()
方法返回的也是一个 jQuery 对象,所以我们才可以使用 $(...).css().attr()...
这种广受喜爱的链式操作。为了使我们的插件也支持链式操作,插件也要返回 jQuery 对象。通过 each()
方法,可以对 jQuery 结果集中的 DOM 元素逐个进行处理,下面是个示例:
(function($){$.fn.showLinkLocation =function() {return this.filter('a').each(function(){$(this).append(' ('+ $(this).attr('href') +')');});};}(jQuery));// Usage example: $('a').showLinkLocation();
此小插件的功能就是将每个超链接的地址,在超链接后面也显示出来:
<!-- 插件调用前: --><ahref="page.html">Foo</a><!-- 插件调用后: --><ahref="page.html">Foo (page.html)</a>
其实,这个插件的代码还可以再优化一下:
(function($){$.fn.showLinkLocation =function() {return this.filter('a').append(function(){return' ('+this.href +')';});};}(jQuery));
我们使用一个匿名的回调函数作为 append
方法的参数,并且这个回调函数的返回值即为超链接的地址,和上面例子中使用 attr
方法不一样,此示例中使用了 DOM 内置的 API,通过元素的 href
属性来取得相关的值。
这里还有另外一个插件的例子,这个例子中并没有使用 each()
做循环,而是直接调用了 jQuery 的其它方法:
(function($){$.fn.fadeInAndAddClass =function(duration, className) {return this.fadeIn(duration,function(){$(this).addClass(className);});};}(jQuery));// Usage example: $('a').fadeInAndAddClass(400,'finishedFading');
什么时候才需要自己写插件
有时候我们需要用一小段代码实现某功能,并且这个功能在其它很多地方都可能被复用,那么这时可以考虑将这个功能写成插件。
大多数插件都仅仅是在 $.fn
命名空间下添加方法而已,jQuery 确保在此方法中使用的 this
都是指向调用该方法的 jQuery 对象。反过来,编写插件的时候,也要确保插件方法返回的也是这个对象。
下面又是一个简单的 jQuery 插件示例:
// 定义插件(function($){$.fn.hoverClass =function(c) {return this.hover(function() { $(this).toggleClass(c); });};})(jQuery);// 调用插件 $('li').hoverClass('hover');
要想了解更多关于 jQuery 插件开发的方法,可以参考 Mike Alsup 撰写的 A Plugin Development Pattern 一文,文中详细介绍了一款名为 $.fn.hilight
插件的开发方法。
该插件的设计模式如下:
//// create closure//(function($) {//// plugin definition//$.fn.hilight =function(options) {debug(this);// build main options before element iterationvar opts = $.extend({}, $.fn.hilight.defaults, options);// iterate and reformat each matched elementreturn this.each(function() { $this= $(this);// build element specific optionsvar o = $.meta ? $.extend({}, opts, $this.data()) : opts;// update element styles $this.css({backgroundColor: o.background,color: o.foreground});var markup = $this.html();// call our format function markup = $.fn.hilight.format(markup); $this.html(markup);});};//// private function for debugging//functiondebug($obj) {if(window.console && window.console.log) window.console.log('hilight selection count: '+ $obj.size());};//// define and expose our format function//$.fn.hilight.format =function(txt) {return'<strong>'+ txt +'</strong>';};//// plugin defaults//$.fn.hilight.defaults = {foreground:'red',background:'yellow'};//// end of closure//})(jQuery);
如果有兴趣,可至原文深度阅读。
via http://jqfundamentals.com/#chapter-8
http://www.akasuna.com/2012/03/12/what-is-a-jquery-plugin-and-how-to-develop-a-jquery-plugin
转载于:https://blog.51cto.com/bzjbest/1260037
所谓 jQuery 插件,怎样开发一个 jQuery 插件相关推荐
- flutter 获取定位_从头开发一个Flutter插件(二)高德地图定位插件
在上一篇文章从头开发一个Flutter插件(一)开发流程里具体介绍了flutter插件的具体开发流程,从创建项目到发布.接下来将会为Flutter天气项目开发一个基于高德定位sdk的flutter定位 ...
- php变量在html调用函数调用,PHP_如何在html标记中调用的函数里传递对象,最近使用jquery结合Ajax开发一个 - phpStudy...
如何在html标记中调用的函数里传递对象 最近使用jquery结合Ajax开发一个中小型网站应用.在后台管理中要使用Ajax调用系统功能,根据Ajax的返回结果,使用jQuery对前台页面进行操作. ...
- 怎样自己开发一个wordpress插件?
wordpress之所以这么受欢迎,就是因为它有非常大的可扩展性.因为wordpress的可扩展性,我们不仅可以开发出各种各样的wordpress主题模板,而且可以开发出功能强大的wordpress插 ...
- 使用 WordPress 插件模板开发高质量插件
WordPress 插件样板是标准化的,有组织的,面向对象的基础,用于构建高品质的 WordPress 插件.样板遵循编码标准和文件标准,所以你不必自己学习这些,根据注释编写代码即可. 官方网站 ...
- 如何从零开始开发一个 Chrome 插件?
什么是浏览器插件? 简单来说浏览器插件,是浏览器上的一种工具,可以提供一些浏览器没有的功能,帮你做一些有趣的事情.开发者可以根据自己的喜欢,去实现一些功能.插件基于Web技术(html.css.js) ...
- 前端拓展:如何开发一个 Chrome 插件?
什么是浏览器插件? 简单来说浏览器插件,是浏览器上的一种工具,可以提供一些浏览器没有的功能,帮你做一些有趣的事情.开发者可以根据自己的喜欢,去实现一些功能.插件基于Web技术(html.css.js) ...
- 如何开发一个浏览器插件
参考文章 Chrome 平台 API 一天学会Chrome插件开发 30分钟开发一款抓取网站图片资源的浏览器插件 manifest.json参数详解 Content Security Policy 入 ...
- 开发一个chrome插件:将百度搜索热点屏蔽掉!
每次百度搜索,搜索结果的右边总是出现些乱七八糟的搜索热点(推的都是些什么玩意,高校替课和我有毛关系,几个悲伤的热点我用星号顶掉了). 强迫症想把它隐藏掉,我用的是chrome浏览器,受adb ...
- php 插件化开发模式,JavaScript_JavaScript插件化开发教程(六),一,开篇分析
今天这篇文章 - phpStudy...
JavaScript插件化开发教程(六) 一,开篇分析 今天这篇文章我们说点什么那?嘿嘿嘿.我们接着上篇文章对不足的地方进行重构,以深入浅出的方式来逐步分析,让大家有一个循序渐进提高的过程.废话少说, ...
最新文章
- Python 能做什么?
- Android应用自动更新功能实现使用AsyncTask!
- wxWidgets:wxRearrangeDialog类用法
- 深入理解分布式消息队列
- Android之在后台不显示activity方法
- dwr 登录实现 (入门知识)
- 过年战胜熊孩子骚扰的终极攻略,拿走不谢!
- 阿里官宣AI框架大牛贾扬清加盟,任职技术VP
- 初次远程做Linux Iptables规则注意事项
- SpringCloud-服务的消费者(rest+ribbon)
- 乞讨式的助人为乐不该提倡,换下铺被拒的律师是自作自受
- java验证手机号格式
- 我男友是个学霸,你们输给DOTA,我输给代码……
- [python][转载]opencv-python横向纵向拼接图片
- 中国最大的“隐形首富”,掌舵中国最大汽车集团,身价高达760亿
- 计算机图形学三(补充):重心坐标(barycentric coordinates)详解及其作用
- linux三剑客有什么区别,学习Linux三剑客
- 博弈论——2.4古诺模型练习题
- 逆水寒服务器维护中7月4日,【图片】《逆水寒》2019年7月4日更新公告【逆水寒ol吧】_百度贴吧...
- EAS客户端提示找不到第三方类可能的原因
热门文章
- hihoCoder 1549 或运算和
- WebJars 进行 css js 资源文件管理
- Mybatis 基础 定义别名,属性配置
- Windows2012R2 Hyper-v3.0 高可用群集安装及配置(Live Migration)
- openSUSE-openOffice无法输入中文
- Windows2003 IIS6.0启用Gzip功能
- python困难_Python开发总感觉困难重重,可能是你没用上这些开发工具
- Memcached Java客户端2.6.1发布
- 案例:使用jquery的ajax load方法更新局部页面并应用NProgress库实现顶部进度条
- Linux查看CPU相关信息