jQuery插件开发入门教程

2018年1月24日22:12:23 发表评论 23

jQuery插件是基本jQuery的二次开发,所谓jQuery“插件”,就是用户根据需求把常用的操作用jQuery封装成的插件,这样的话,之后再使用就会更加的方便。

jQuery插件开发入门教程

一、jQuery插件写法

我们可以通过下面的方法来定义一个jQuery插件:

  1. jQuery.fn.myPlugin = function() {
  2.   // 这是写插件功能
  3. };

但是我们一般是采用下面的写法,这样可以很好的解决其他库和jQuery的冲突,加上美元符号$,前面加;是防止多个脚本文件合并时,其它脚本没有添加分号造成运行错误的问题。

  1. ;(function ($){
  2.   $.fn.myPlugin = function (){
  3.     // 这里写插件功能
  4.   };
  5. })(jQuery);

有时,我们还可以将顶层对象(window)作为参数传入,因为这样可以加快代码执行速度和执行更有效的最小化操作。

  1. ;(function ($, window) {
  2.   $.fn.myPlugin = function() {
  3.     // Do your awesome plugin stuff here
  4.   };
  5. }(jQuery, window));

定义插件之前,最好是先侦测一下运行环境,因为jQuery在浏览器环境和服务器环境都可以使用,加入下面代码的判断:

  1. if (typeof module === "object" && typeof module.exports === "object") {
  2.   // CommonJS版本
  3. else {
  4.   // 浏览器版本
  5. }

二、jQuery插件实例

下面我们来写一个简单的JQuery插件的实例,就是将一个a元素的href属性添加到网页,这样一个小功能的jQuery插件,具体实现代码如下:

  1. (function($){
  2.     $.fn.showLinkLocation = function() {
  3.         return this.filter('a').append(function(){
  4.             return ' (' + this.href + ')';
  5.         });
  6.     };
  7. }(jQuery));
  8. // 用法
  9. $('a').showLinkLocation();

三、jQuery插件发布

你编写一个插件之后,可以将你的插件上传到jQuery官方网站上,但是我们首先得编写一个插件的信息文件xx.jquery.json。xx表示你插件的名称,json文件实例模板如下 :

  1. {
  2.   "name""plugin_name",
  3.   "title""plugin_long_title",
  4.   "description""...",
  5.   "keywords": ["jquery""plugins"],
  6.   "version""0.0.1",
  7.   "author": {
  8.     "name""...",
  9.     "url""..."
  10.   },
  11.   "maintainers": [
  12.     {
  13.       "name""...",
  14.       "url""..."
  15.     }
  16.   ],
  17.   "licenses": [
  18.     {
  19.       "type""MIT",
  20.       "url""http://www.opensource.org/licenses/mit-license.php"
  21.     }
  22.   ],
  23.   "bugs""..."// bugs url
  24.   "homepage""..."// homepage url
  25.   "docs""..."// docs url
  26.   "download""..."// download url
  27.   "dependencies": {
  28.     "jquery"">=1.4"
  29.   }
  30. }

将插件代码上传到Github,在项目设置页面找到服务,添加一个服务,填写http://plugins.jquery.com/postreceive-hook,保存一下,最后将你的插件代码加上版本,push到github,这样的话你的插件就会加入到jQuery官方网站的插件库里。

你以后每更新一次插件,都会有新的tag,非常的实用方便。

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: