jquery是web前端开发中最常用的一个js库，其跨平台的特性让开发人员省去了兼容的代码。就个人而言，jquery在dom操作和ajax两处的优势是其他库无可比拟的。

jquery的另外一个强大之处在于其丰富的拓展和插件。通过jquery提供的核心功能，开发者可以开发和发布自己的插件。目前前端的各种开发，几乎都有jquery插件在助力和简化开发过程。然而对于许多人而言，一直处于使用的阶段，没有介入开发的过程。

在项目中随处写下的jquery操作语句，会造成代码的维护困难和重复编码。为了解决这个问题，决定以学习开发插件。通过一个上午的学习，将第一个插件编写完毕。

jQuery插件开发方式主要有三种：

1. 通过$.extend()来扩展jQuery

2. 通过$.fn 向jQuery添加新的方

3. 通过$.widget()应用jQuery UI的部件工厂方式创建

其中第一种主要用于拓展在jquery名字空间下的静态方法，例如内置的 $.log, $.error之类的方法。为了挖掘jquery在dom处理上的强大能力，一般的插件使用第二种方法。

第二种方法的写法同样很简单，直接往里添加代码即可：

$.fn.pluginName = {      // your codes here  }

但是实际中为了不污染全局名字空间，经常将其放在闭包中：

;(function($, window){      $.fn.pluginName = {          // your codes here      };  })(jQuery, window)

第一行开头的分号（;）是为了防止与其他代码压缩合并时，其未添加结尾分号造成的。通过闭包的形式，里面的任何变量都是私有的，从而防止了对全局空间的污染，也达到了提供接口的目的。

为了能够链式调用，要做的第一步是将作用的dom对象返回：

;(function($, window){      $.fn.pluginName = function() {          return this.each(function(){               // your codes here          })      }  })(jQuery, window)

上述语句中，this指代选取的dom对象。由于选择的对象不一定只有一个，所以我们使用了jquery的.each方法。

目标是对表中的链接进行ajax请求，然后动态的将这一行删除。为了达到这个目的，可用如下代码：

;(function($, window){      $.fn.delRow = function() {          return this.each(function(){               $(this).filter('a').on('click', function(){                   var row = $(this).closest('tr');                   var url = $(this).attr('href');                   $.ajax({                        url: url,                        type: 'GET',                        data: {'ajax': 1},                        dataType: 'json'                   }).done(response) {                       if (!response.code) {                            row.fadeOut().remove();                       }                       else {                           window.alert(response.message);                       }                   }).fail(function(xhr, statusCode, error){                       window.alert(error);                   });                     return false;              })          })      }  })(jQuery, window)

插件的实现很简单：当用户点击表上的链接时，不触发默认的跳转操作，而是执行ajax请求，结果返回后将该行删除而无需刷新页面。

将这段js引入，调用的时候使用 $(selector).delRow()即可达到效果。

虽然目的达到了，但是问题还存在：插件里的请求方法等是写死的，如果想改变怎么办？所以希望插件的选项是能配置的。接下来给插件增加可选项。

;(function($, window) {      $.extend({          log: function(message) {              if (window.console && window.console.log) {                  window.console.log(message);              }          }      });        $.fn.delRow = function(options) {          var defaults = {              'ajaxDelete': true,              'type': 'POST',              'requireConfirm': true,              'confirmMessage': '你确认删除此条记录吗？',              'warnMessageElem': $('#message')          };            var settings = $.extend({}, defaults, options);            var handleClick = function() {              var row = $(this).closest('tr');              if (settings.requireConfirm) {                  if (!window.confirm(settings.confirmMessage)) {                      return false;                  }              }              if (settings.ajaxDelete) {                  var url = $(this).attr('href');                  $.ajax({                      url: url,                      type: settings.type,                      data: {'ajax': 1},                      dataType: 'json',                  }).done(function(response) {                      if (!response.code) {                          row.fadeOut().remove();                          settings.warnMessageElem.hide();                      }                      else {                          var html = '<ul>';                          for (x in response) {                              html += '<li>' + response.message.x + '</li>';                          }                          html += '</ul>';                          settings.warnMessageElem.show().html(html);                      }                  }).fail(function(xhr, statusCode, error) {                      $.log('code:' + statusCode);                      $.log('message:' + error);                  }).always(function() {                      $.log('handled!');                  });                  return false;              }              return true;          }                    return this.each(function() {              $(this).on('click', handleClick);          });      }  })(jQuery, window);

我们新增了如下选项：是否ajax请求，是否需要确认，确认信息和请求方法。调用的时候可以采取以下方式：

$(selector).delRow({      'confirmMessage': '删除操作有危险，请您谨慎执行'  });

当用户点击表内链接的时候，则会弹出 “删除操作有危险，请您谨慎执行” 的确认框。

以上便是开发的第一个简单的插件。

参考：

1. http://www.cnblogs.com/wayou/p/jquery_plugin_tutorial.html

2. http://javascript.ruanyifeng.com/jquery/plugin.html

3. http://www.cnblogs.com/cyStyle/archive/2013/05/18/jquery%E6%8F%92%E4%BB%B6%E8%AF%A6%E7%BB%86%E5%BC%80%E5%8F%91.html

原文链接：https://www.qiquanji.com/post/4802.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。