首页 jquery 正文

我要投稿

jquery 插件开发-jquery插件开发模式实例解读

bendan520 jquery

2023-08-29 0 1,037 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

jquery插件开发模式实例解读

更新时间：2019年7月20日 16:44:27 作者：trkjoy

本文主要介绍jQuery插件的开发模式，并结合实例详细分析了jQuery插件的三种开发方式及相关操作方法。有需要的同学可以参考以下

本文通过示例介绍jquery插件开发模式。分享给大家，供大家参考，如下：

jQuery插件通常有三种开发方式：

第一种$.extend()比较简单，通常复杂的插件很少能独立开发。第三种是中间开发模式，本文不做介绍。第二种是插件开发中常用的方法，本文重点介绍第二种。

插件开发

插件开发的第二种方法通常定义如下

$.fn.pluginName = function() {
  //your code here
}

插件开发，我们通常采用面向对象的思想

例如定义一个对象

var Haorooms= function(el, opt) {
  this.$element = el,
  this.defaults = {
    'color': 'red',
    'fontSize': '12px',
    'textDecoration':'none'
  },
  this.options = $.extend({}, this.defaults, opt)
}
//定义haorooms的方法
haorooms.prototype = {
  changecss: function() {
    return this.$element.css({
      'color': this.options.color,
      'fontSize': this.options.fontSize,
      'textDecoration': this.options.textDecoration
    });
  }
}

$.extend({},this.defaults,opt) 有 {} 主要是创建一个新对象并保持该对象的默认值。

$.fn.myPlugin = function(options) {
  //创建haorooms的实体
  var haorooms= new Haorooms(this, options);
  //调用其方法
  return Haorooms.changecss();
}

直接调用这个插件如下

$(function() {
  $('a').myPlugin({
    'color': '#2C9929',
    'fontSize': '20px'
  });
})

上述开发方式存在的问题

里面的开发方式有一个严重的问题，就是定义了一个全局的Haorooms，对于插件兼容性等方面都不好。如果Haorooms在其他地方使用，你的代码将是可悲的！现在我们把代码包裹在里面jquery 插件开发，用一个自调用的匿名函数包裹起来，这样就不会出现这个问题了！包括js插件的开发，也是如此。我们使用一个自调用的匿名函数来包装我们编写的代码，就是这样！封装方法如下：

(function(){
})()

用之前的包上去，就可以了。

还有一个问题。我们在研究大牛的代码时，经常会听到“;”，这是为了防止代码合并等不必要的错误。

比如我们随意定义一个函数：

var haoroomsblog=function(){
}
(function(){
  })()

由于haoroomsblog的函数前面没有分号，导致代码错误。为了防止这种情况发生，一般都是这样写的！

;(function(){
  })()

将你的插件代码包裹在里面jquery 插件开发，它就是一个简单的插件。（注意js插件和jquery插件都是这样）

还有一个问题

将您的插件包装在

;(function(){
  })()

基本上可以说是完美的。并且为了让你开发的插件能够得到更广泛的使用和更好的兼容性，你还应该考虑到使用插件的人的一些特殊做法。比如有的同学为了防止jquery和zeptojs冲突，给jquery加上“$”前缀。改成了“jQuery”，还有同学改了默认文档等方法。为了让你的插件在修复此类问题后能够正常运行，我们的方法是将代码包装如下：

;(function($,window,document,undefined){
  //我们的代码。。
})(jQuery,window,document);

可以防止里面的一些情况！

总体框架

在编写自己的 jQuery 插件之前，很自然地要研究一下别人编写的插件。虽然写jQuery基本上已经有了一个大概的框架。好的，稍后我们来模拟一下这个框架。

(function($){
$.fn.yourName = function(options){
//各种属性、参数
}
var options = $.extend(defaults, options);
this.each(function(){
//插件实现代码
});
};
})(jQuery);

有了这个，我们就可以把东西放在上面了。

名称、参数和属性

好不容易开始独自闯荡江湖之后，他必须要有一个响当当的名字，这样才能在江湖上行走时尊贵而威严。不信，听听《中国牙科保卫战队》吧！因此，我们这里必须有一个响亮的名字，而且必须简单、明确、权威。所以，决定了，它叫“tableUI”！

参数和属性也很简单，无非就是三个类的名字。只需调用它：evenRowClass、oddRowClass 和 activeRowClass。

因此，我们将上半身填充在框架里面。

(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
//实现代码
});
};
})(jQuery);

这是关键点：

var options = $.extend(defaults, options);

这句话看起来很漂亮，虽然它是将多个对象合并为一个。这里是，如果调用的时候写了新的参数，就使用你的新参数，如果没有，就使用默认的参数。想了解更多的可以参考jquery的官方文档：

我们先从下半身开始

好了，上半身做好了，我们来补下半身。无非就是找到基数行和素数行（感谢jQuery提供了tr:even这样的写法，让事情变得极其简单），然后添加对应的类。之后，只需将 mouseover 和 mouseout 绑定到所有 tr 即可。下体代码如下：

(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
//添加奇偶行颜色
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
//添加活动行颜色
$(thisTable).find("tr").bind("mouseover",function(){
$(this).addClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options.activeRowClass);
});
});
};
})(jQuery);

最重要的一步！

其实有同学认为这样做就算了。而相反，我们还有最重要的一步要完成，那就是我们必须写下插件的名称、版本号、完成日期、作者、作者的联系方式、出生日期、三围...等等。插件上方。因为只有这样这个插件才足够专业。

/*
* tableUI 0.1
* Date: 2010-03-30
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示
*/
(function($){
$.fn.tableUI = function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
//添加奇偶行颜色
$(thisTable).find("tr:even").addClass(options.evenRowClass);
$(thisTable).find("tr:odd").addClass(options.oddRowClass);
//添加活动行颜色
$(thisTable).find("tr").bind("mouseover",function(){
$(this).addClass(options.activeRowClass);
});
$(thisTable).find("tr").bind("mouseout",function(){
$(this).removeClass(options.activeRowClass);
});
});
};
})(jQuery);

至此，你开发的插件就很完美了！

对jQuery相关内容比较感兴趣的读者可以查看本站专题：《jQuery扩展方法总结》、《jQuery常用插件及用法总结》、《jQuery切换效果及方法总结》、《jQuery遍历算法与方法总结》《jQuery常见经典特效总结》《jQuery动画特效使用总结》《jQuery选择器使用总结》

希望这篇文章对您的 jQuery 编程有所帮助。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!