JQuery系列(8) - JQuery插件开发
所谓“插件”,就是用户自己新增的jQuery实例对象的方法。由于该方法要被所有实例共享,所以只能定义在jQuery构造函数的原型对象(prototype)之上。对于用户来说,把一些常用的操作封装成插件(plugin),使用起来会非常方便。
插件的编写
原理
本质上,jQuery插件是定义在jQuery构造函数的prototype对象上面的一个方法,这样做就能使得所有jQuery对象的实例都能共享这个方法。因为jQuery构造函数的prototype对象被简写成jQuery.fn对象,所以插件采用下面的方法定义。
jQuery.fn.myPlugin = function() { // Do your awesome plugin stuff here };
更好的做法是采用下面的写法,这样就能在函数体内自由使用美元符号($)。
;(function ($){ $.fn.myPlugin = function (){ // Do your awesome plugin stuff here }; })(jQuery);
上面代码的最前面有一个分号,这是为了防止多个脚本文件合并时,其他脚本的结尾语句没有添加分号,造成运行时错误。
有时,还可以把顶层对象(window)作为参数输入,这样可以加快代码的执行速度和执行更有效的最小化操作。
;(function ($, window) { $.fn.myPlugin = function() { // Do your awesome plugin stuff here }; }(jQuery, window));
需要注意的是,在插件内部,this关键字指的是jQuery对象的实例。而在一般的jQuery回调函数之中,this关键字指的是DOM对象。
(function ($){ $.fn.maxHeight = function (){ var max = 0; // 下面这个this,指的是jQuery对象实例 this.each(function() { // 回调函数内部,this指的是DOM对象 max = Math.max(max, $(this).height()); }); return max; }; })(jQuery);
上面这个maxHeight插件的作用是,返回一系列DOM对象中高度最高的那个对象的高度。
大多数情况下,插件应该返回jQuery对象,这样可以保持链式操作。
(function ($){ $.fn.greenify = function (){ this.css("color", "green"); return this; }; })(jQuery); $("a").greenify().addClass("greenified");
上面代码返回this对象,即jQuery对象实例,所以接下来可以采用链式操作。
对于包含多个jQuery对象的结果集,可以采用each方法,进行处理。
$.fn.myNewPlugin = function() { return this.each(function() { // 处理每个对象 }); };
插件可以接受一个属性对象参数。
(function ($){ $.fn.tooltip = function (options){ var settings = $.extend( { 'location' : 'top', 'background-color' : 'blue' }, options); return this.each(function (){ // 填入插件代码 }); }; })(jQuery);
上面代码使用extend方法,为参数对象设置属性的默认值。
实例
下面是一个将a元素的href属性添加到网页的插件。
(function($){ $.fn.showLinkLocation = function() { return this.filter('a').append(function(){ return ' (' + this.href + ')'; }); }; }(jQuery)); // 用法 $('a').showLinkLocation();
从上面的代码可以看到,插件的开发和使用都非常简单。
定义插件的方式除了上面说的用$.fn
来定义,还有另外一种方式来定义插件,那就是使用$.fn.extend
方法。类似下面的写法:
(function($){$.fn.extend({ changeStyle:function(option){ var defaultSetting = { colorStr:"green",fontSize:12};var setting = $.extend(defaultSetting,option);this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px"); return this; }}); }(jQuery));
PS:
$.extend
方法和$.fn.extend
方法都可以用来扩展jQuery
功能,通过阅读jQuery
源码我们可以发现这两个方法的本质区别:
$.extend
方法是在jQuery
全局对象上扩展方法;
$.fn.extend
方法是在$
选择符选择的jQuery
对象上扩展方法。
所以扩展jQuery
的公共方法一般用$.extend
方法,定义插件一般用$.fn.extend
方法。
插件的发布
编写插件以后,可以将它发布到jQuery官方网站上。
首先,编写一个插件的信息文件yourPluginName.jquery.json。文件名中的yourPluginName表示你的插件名。
{"name": "plugin_name", "title": "plugin_long_title", "description": "...", "keywords": ["jquery", "plugins"], "version": "0.0.1", "author": { "name": "...", "url": "..." }, "maintainers": [ { "name": "...", "url": "..." } ], "licenses": [ { "type": "MIT", "url": "http://www.opensource.org/licenses/mit-license.php" } ], "bugs": "...", // bugs url "homepage": "...", // homepage url "docs": "...", // docs url "download": "...", // download url "dependencies": { "jquery": ">=1.4" } }
上面是一个插件信息文件的实例。
然后,将代码文件发布到Github,在设置页面点击“Service Hooks/WebHook URLs”选项,填入网址http://plugins.jquery.com/postreceive-hook,再点击“Update Settings”进行保存。
最后,为代码加上版本,push到github,你的插件就会加入jQuery官方插件库。
git tag 0.1.0 git push origin --tags
以后,你要发布新版本,就做一个新的tag。
参考
【1】阮一峰 http://javascript.ruanyifeng.com/jquery/plugin.html
【2】简书 http://www.jianshu.com/p/518d424d4994
转载于:https://www.cnblogs.com/ybtools/p/6897408.html
JQuery系列(8) - JQuery插件开发相关推荐
- jquery系列之-Jquery数组操作大全个人总结
1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥 ...
- jQuery小测试系列之jQuery基础知识
日期:2012-4-17 来源:GBin1.com 这是jQuery小测试系列第一部分:基础知识. 来源:jQuery小测试系列之jQuery基础知识
- JQuery系列(4) - AJAX方法
jQuery对象上面还定义了Ajax方法($.ajax()),用来处理Ajax操作.调用该方法后,浏览器就会向服务器发出一个HTTP请求. $.ajax方法 $.ajax()的用法主要有两种. $.a ...
- jQuery系列之目录汇总
一:jQuery基础系列: jQuery温习篇---强大的JQuery选择器 jQuery之工具函数 jQuery之筛选函数 jQuery1.4.2新特性(翻译) jQuery Ajax 回顾 jQu ...
- jquery系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery系列教程2-style样式操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程6-ajax的应用全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程5-动画操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
- jquery系列教程4-事件操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
最新文章
- 临时内核页表的建立过程
- IOS中UIViewController的创建
- TS基础2(泛型、枚举、元组)-学习笔记
- C#LeetCode刷题之#66-加一(Plus One)
- autohotkey编写windows脚本实现test.lab试验数据快速导出
- √GMAP.NET 地图
- Premiere教程,认识 Pr 以及电脑配置
- Asp.Net母版页元素ID不一致的体现
- Android-两种方式实现走马灯效果
- matlab低通滤波器库函数代码_【转】Matlab中模拟低通滤波器的函数
- 智慧工厂数字孪生建设方案
- AI人工智能概念(机器学习,深度学习,强化学习)
- 查看电脑无线网 wifi密码
- 如何规避采购风险?五种有效的采购风险防范措施
- 父子盒子边距塌陷之为什么设置margin-top父子盒子会一起移动
- ROC、PR曲线、AUC值
- mount --bind作用与用法
- 多旋翼无人机ROSC++开发例程(一):环境配置
- Carbon 语言【中文入门教程】
- 机器学习中误差的定义,以及过拟合现象的介绍
热门文章
- Hibernate:SQL查询 addScalar()或addEntity()
- 会话管理-2.1.Session介绍
- mysql 之mvcc多版本控制
- Windows 7系统垃圾清理自写程序
- 某计算机系大二级共有5个班,2016年计算机二级考试MS Office题库及答案
- acwing算法题--完全背包问题
- C++ vector的内部实现原理及基本用法
- 前端 python java三者哪个比较容易就业_前端和后端(Java)开发哪个难?,哪个学习容易一点?...
- xampp去运行php文件_从0开始构建一个属于你自己的PHP框架
- .NET弹出对话框小结