jQuery插件格式实例分析

在本篇文章中，我们将深入探究如何编写一个规范的jQuery插件，并给出两个具体的示例，让大家更好地掌握如何使用jQuery开发插件。

基本的jQuery插件格式

一个典型的jQuery插件格式如下所示：

(function($){
  $.fn.myPlugin = function(options){
    // 默认选项
    var defaults = {
      color: 'red',
      fontSize: '12px'
    };
    // 合并用户自定义选项
    var settings = $.extend({}, defaults, options);
    // this代表选择器选择的元素
    return this.each(function(){
      // 在这里实现具体的功能
      $(this).css({
        color: settings.color,
        fontSize: settings.fontSize
      });
    });
  };
})(jQuery);

上面的代码展示了一个基本的jQuery插件的格式，基本思路是将插件函数包装在一个自运行的匿名函数中，这样可以避免变量污染问题。插件名称通过$.fn来进行扩展，在这个案例中插件名为myPlugin。然后是插件函数，通过this关键字来访问选择器选择的元素，并且可以传递参数给插件函数。

示例1：jQuery图片焦点图插件

下面是一个简单的轮播图的实现，可以当作jQuery插件的范例：

(function($){
  $.fn.carousel = function(options){
    var defaults = {
      interval: 3000
    };
    var settings = $.extend({}, defaults, options);
    var iWidth = this.width();
    var iHeight = this.height();
    var iTotal = $('li', this).length;

    // 初始化
    $('li', this).css('position', 'absolute');
    $('li:first', this).css('position', 'relative');

    setInterval(function(){
      $('li:first')
        .animate({
          left: -iWidth
        }, 1000, function(){
          $(this)
            .css('left', 'auto')
            .appendTo($('ul', this).parent());
        });
    }, settings.interval);

    return this;
  };
})(jQuery);

如上所述，在这个例子中我们创建了一个轮播图插件，其名称为carousel。在轮播图中，我们通过修改li元素的定位属性，并通过jQuery animate()函数实现滑动效果。通过设定interval参数即可控制轮播速度。

使用该插件很简单，首先需要引入jQuery库和carousel插件，

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="scripts/carousel.js"></script>

然后在HTML代码中添加相应的元素：

<div id="carousel">
  <ul>
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
  </ul>
</div>

最后，在JavaScript代码中调用插件即可：

$(function(){
  $('#carousel').carousel({
    interval: 3000
  });
});

示例2：jQuery列表展开插件

下面是一个用于展开/收起列表的jQuery插件示例：

(function($){
  $.fn.expandList = function(options){
    var defaults = {
      textMore: '展开',
      textLess: '收起',
      limit: 3
    };
    var settings = $.extend({}, defaults, options);
    var items = $('li', this);
    var count = items.length;

    // 初始化：隐藏多余的列表项
    items.filter(':gt('+(settings.limit-1)+')').hide();
    if(count > settings.limit){
      $('<a href="#" class="expand-list">'+settings.textMore+'</a>')
        .insertAfter(this)
        .on('click', function(event){
          event.preventDefault();
          items.filter(':hidden').show();
          $(this).text(settings.textLess);
        });
    }

    return this;
  };
})(jQuery);

该插件称为expandList，其功能是自动创造一个"展开"按钮，当列表中的项目超过规定数量时，隐藏多余的项目，并在"展开"按钮中提供展开选项。初始显示规定数目的选项。该插件用到了hide()、filter()、insertAfter()、on()和text()等jQuery函数。

使用该插件，需要创建包含列表元素的容器，例如：

<ul id="list">
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  <li>第四项</li>
  <li>第五项</li>
  <li>第六项</li>
</ul>

在JavaScript中，调用expandList插件：

$(function(){
  $('#list').expandList({
    textMore: '显示全部',
    textLess: '收起',
    limit: 3
  });
});

该插件会自动找出list元素中所有的li元素，并隐藏多余的元素，展开按钮和事件处理函数通过插件自己创建，而不需要在HTML代码或JavaScript中进行手动处理。