jquery插件的写法

2016-11-23

由于各种框架的流行，低版本的IE逐步退出历史舞台，jquery在前端界的地位已经大不如从前了。但并不是所有项目都适用于框架，各种老项目的存在也让jquery难以割舍，jquery仍然是前端开发必不可少的技能。
写这个东西希望可以帮助一些仍不是很懂的同学，也可以整理一下自己的知识体系，这里讲一下jquery最普遍的集中插件的写法。虽然很基础，但也要求你对js的原型链有一定的理解。

jquery的流行离不开两方面，一方面是他对当时各种兼容性问题的解决和方便的dom操作，大大增加了前端开发的效率，另一方面，活跃的社区，各类jquery插件库的流行功不可没。
jquery的插件写法分为两种，由两个接口组成，一个是$.extend,一个是$.fn.extend。$.extend.

$.extend

$.extend在jquery中有两个用处，一个当参数有两个以上时，会被用作对对象进行扩展。我们使用的的是当只有一个参数时，将对jquery本身的命名空间进行扩展。

$.extend({
  add: function() {
    console.log('一个扩展方法')
  }
})
$.example() // 一个扩展方法

这种方式不难理解，其实就是将一个全局的方法，放在$的命名空间上，而不污染其他全局变量，差不多等同于$.example = example,完全就是利用了一下$的命名控件，跟jquery联系并不是特别大。

$.fn.extend

$.fn.extend是最需要了解的插件方法。
我们先不管$.fn.extend,只要知道其实$.fn.extend({add: function(){}})差不多等同于$.fn.add = function(){}，就是往$.fn里面写入一个方法。
而$.fn究竟是什么。在jquery源码中

1
2
3

jQuery.fn = jQuery.prototype = {
  // ...
}

可以知道，其实$.fn就是指向的jquery的原型链。而jQuery即$其实是一个构造函数，我们使用他选择的元素$(‘#id’)是一个构造函数的实例，所以写入到原型链中的add方法中，this就可以取到$(‘#id’)这个实例。这方面不懂的需要去了解js原型链构造函数的基础知识。
现在不是很明白也没关系，反正现在是知道，我可以在add方法里面取到使用这个jquery实例，那我们就可以用此来写插件了。可以在例子中慢慢理解。

写一个简单的tip插件

当鼠标hover上某个元素，然后出现一个提示的tip，这是一个简单而又经常用得到的东西，我们接下来写一个实现这种功能的插件。

插件的使用方法

在写这个插件之前，我们得先想好，究竟该怎么用这个插件。按照一般的插件使用方法：

$('.tip').tip({
  content: '这是一个tip',
  position: 'bottom'
})

我们用$(‘.tip’)找到这个元素，然后用执行一个tip方法，传入一个对象作为参数。以后鼠标hover到这个元素的时候，就会跳出一个tip提示。
这个提示是由一个span元素构成，并且会定位到鼠标hover到的元素的位置。我们还可以增加参数，让使用者选择是出现到下面还是上面。

开始搭架子

$.fn.tip = function (settings) {
  var defaultSettings = {
    content: '',
    position: 'bottom'
  }
  settings = $.extend(defaultSettings, settings);
  var $el = this; // 这里的this将会是调用这个方法的$('') 实例
  return $el;
}

通常一个插件，需要一个自己的默认配置，在使用者没有输入全部参数的时候也能够以默认配置工作，然后用$.extend方法，可以把第二个对象覆写到第一个对象上，达到默认配置和用户配置的合并,最后不要忘了把实例return回去，以方便jquery的链式调用。

插入dom并得到位置

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .tip {
      display: none;
      position: absolute;
      background: #333;
      color: #fff;
      padding: 5px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div style="margin-top:300px;margin-left:300px;">
    <span class="tip1">demo1</span>
    <span class="tip2">demo2</span>
    <span class="tip3">demo3</span>
  </div>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="./index.js"></script>
</body>
</html>

index.js

(function($){
var $tip = $('<span class="tip"></span>');
$('body').append($tip);
$.fn.tip = function (settings) {
  var defaultSettings = {
    content: '', // tip内容
    position: 'bottom' // tip的位置
  }
  settings = $.extend(defaultSettings, settings);
  var $el = this;
  $el.on({
    'mousemove': function() {
      var $this = $(this);  // 取得绑定方法的函数
      var w = $tip.width();
      var h = $tip.height();
      var top = $this.offset().top; 
      var left = $this.offset().left;
      if (settings.position === 'bottom') { // 根据配置中的选项计算top值
        top = top + 20;
      } else if (settings.position === 'top') {
        top = top - 10 - $tip.height();
      }
      left = left + $el.width() / 2 - w / 2;
      $tip.css({  // 给tip赋值高度并显现
        top: top,
        left: left
      }).text(settings.content).addClass('show');
    },
    'mouseout': function() {
      $tip.removeClass('show');
    }
  });
}
})(jQuery) 
$('.tip1, .tip2').tip({
  content: '底部tip'
})
$('.tip3').tip({
  content: '顶部tip',
  position: 'top'
})

一个非常简单的tip插件就完成了。

强化功能

这个插件貌似还不够强大，我们虽然给了使用者一定的settings，让他能够定制位置和内容，但是他现在只能hover出tip，如果他是想点击的时候出tip呢？我们当然也可以在seetings里面加一个配置，然后if else来改变绑定的事件为click。可是使用者还可能有更多奇葩的需求，可能他需要某个输入框验证不通过的时候跳出tip等等。这时候光靠我们自己的配置，很难枚举所有情况，我们应该给使用者更大的定制性，比如外抛一个方法，让他自己去显示和隐藏tip标签。

另一种使用情况

这个时候，他们将这样调用我们的方法。

var demoTip = $('.tip').tip({
  content: '延迟出现的tip',
});
setTimeout(function(){
  demoTip.show();
},1000)
setTimeout(function(){
  demoTip.hide();
},2000)

实现

在这里我们就需要用到原型链了，先定义一个构造函数，$().tip() 返回一个实例，所以使用这个实例的方法其实就放在构造函数的原型链中。

(function($){
  var $tip = $('<span class="tip" style="display:none;position:absolute;"></span>');
  $('body').append($tip);
  var Tip = function(el, settings) {
    var _this = this;
    _this.$tip = $tip;
    _this.$el = $(el); // 取得绑定的元素
    _this.settings = settings;
    this.$el.on({
      'mousemove': function(){
        _this.showTip();  // 调用原型链中的show方法
      },
      'mouseout': function() {
        _this.hideTip();
      }
    })
  }
  $.extend(Tip.prototype, {  // 将需要抛出的方法合并进构造函数的原型链
    showTip: function() {
      var w = this.$tip.width();
      var h = this.$tip.height();
      var top = this.$el.offset().top; 
      var left = this.$el.offset().left;
      if (this.settings.position === 'bottom') { // 根据配置中的选项计算top值
        top = top + 20;
      } else if (this.settings.position === 'top') {
        top = top - 10 - this.$tip.height();
      }
      left = left + this.$el.width() / 2 - w / 2;
      this.$tip.css({  // 给tip赋值高度并显现
        top: top,
        left: left
      }).text(this.settings.content).show();
      return this.$el;  // return元素实例用于链式调用
    },
    hideTip: function () {
      this.$tip.hide();
      return this.$el;
    }
  });
  $.fn.tip = function(settings) {
    var defaultSettings = {
      content: '', // tip内容
      position: 'bottom' // tip的位置
    }
    settings = $.extend(defaultSettings, settings);
    return new Tip(this, settings);  // 返回一个Tip实例
  }
})(jQuery);
var demoTip1 = $('.tip1').tip({
  content: '延迟出现的tip',
});
var demoTip2 = $('.tip2').tip({
  content: '延迟出现的tip2',
  position: 'top'
});
setTimeout(function(){
  demoTip1.showTip();
},1000)
setTimeout(function(){
  demoTip1.hideTip();
},2000);
setTimeout(function(){
  demoTip2.showTip();
},3000);
setTimeout(function(){
  demoTip2.hideTip();
},4000);

这样的话，外抛的方法也可以让使用者自己使用了，使用者可以选择对自己绑定的不同的tip执行不同的方法。插件有用了更大的扩展性，一个简单的jquery插件完成。