介绍

什么是插件？

　　插件我们见得很多了，比如浏览器上我们会安装一些去除广告的插件、美化页面的插件等等。 在前端，我们也常常写一些jquery插件来使用。来添加我们常常写的一些功能，方便使用。

 

为什么要使用jquery插件？

　　jQuery 库是专为加快 JavaScript 开发速度而设计的。通过简化编写 JavaScript 的方式，减少代码量。使用 jQuery 库时，您可能会发现您经常为一些常用函数重写相同的代码。如果这样的话，这可能就是您需要编写自定义 jQuery 插件的一个原因。

　　简单的说： 当你重复使用jquery编写代码时，就说明你可以把这段代码编写成jquery插件了。

　　

普通js插件的一个例子

下面就是一个js插件font.js，我们在使用的时候往往是先引入jquery，然后在引入这个插件（其实这个是没有必要遵从这个顺序的，因为这个不是jquery插件）。

快速创建jquery插件_目标对象

下面我们来看看font.js是怎么来定义这个插件的。 



// JavaScript Document
; (function (win, doc) {
//动态设置font-size值
var h, setUnitA;
win.addEventListener('resize', function () {
    clearTimeout(h);
    h = setTimeout(setUnitA, 300);
}, false);
win.addEventListener('pageshow', function (e) {
    if (e.persisted) {
        clearTimeout(h);
        h = setTimeout(setUnitA, 300);
    }
}, false);

setUnitA = function () {
    doc.style.fontSize = doc.clientWidth / 32 + 'px';
}
setUnitA();

})(window, document.documentElement);


注：实际上这不能说是一个jquery插件，因为我们看到这里并没有传入jquery，所以这就是一个普通的插件，方便我们的重复使用。

即这个js文件用于在移动端适配文字，使得显示正常。

ok！ 这就是一个jquery插件了。 

问题1： 插件的最前面为什么要使用分号；作为结束呢？

解释1：这个很好理解：js代码结束的时候，最后一句是允许不加分号的（比如一个函数的最后一句）。如果某个js代码这么做了，那么把它跟另外一个js脚本拼在一起的时候，原来是“最后一句”的，变成了不是最后一句，于是就出现语法错误了。另外，仅包含分号的语句，和C语言一样，表示一个空语句，完全是符合语法的，所以也不会有错。

解释2：

快速创建jquery插件_目标对象_02

也就是说这是为了合并压缩js时不会出错才这么设计的。

 

 

问题2：这个插件定义的形式是怎么样的？

　　我们可以看到这时一个匿名的立即执行的函数。 匿名： 这个插件是为了完成一项功能，它并不需要被其他函数调用。 立即执行：目的是避免变量命名冲突的问题。

 

 

问题3： 对于这个插件中立即执行的函数，传入的参数是什么意思？

　　因为这个立即执行函数是封闭的，所以需要通过传递参数来调用相关的对象。 这里传入了window和document.documentElement供内部使用。 当然，如果这里定义的是一个jquery插件，那么我们就可以传入$或者是jquery了。

 

问题4： 这里是如何实现控制字体大小的呢？

　　非常简单： 就是在载入页面和调整窗口大小的时候，动态设置根元素（html）的值，然后在css中使用rem进行布局，这样就可以完成移动端的适配了。 

 

 

开始jquery插件

　　​



;(function($) {
  $.fn.accordion = function(options) {
    var settings = $.extend({}, {open: false}, options);
    return this.each(function() {
      var dts = $(this).children('dt');
      dts.click(onClick);
      dts.each(reset);
      if(settings.open) $(this).children('dt:first-child').next().show();
    });

    function onClick() {
      $(this).siblings('dt').each(hide);
      $(this).next().slideDown('fast');
      return false;
    }

    function hide() {
      $(this).next().slideUp('fast');
    }

    function reset() {
      $(this).next().hide();
    }
  }
})(jQuery);


　　ok！ 这就是一个jquery插件了！

  • 第一个分号同样是为了解决压缩到一个文件时可能导致的问题的。
  • 同样是一个立即执行的匿名函数，并且在调用的时候传入了一个jQuery作为参数。这样就可以在其中使用jquery了，所以这就是一个名副其实的jquery插件了。
  • jquery的fn就是扩展插件所必须的，它相当于js中的prototype，所以还是非常重要的~ 
  • 这里使用了var settings = $.extend({}, {open: false}, options); ​​$.extend​​ 方法参数是一个目标对象和 2 个或多个合并对象。在本示例中，目标对象是一个空 object literal，充当合并对象容器。目标将成为一个包含合并对象值的单一对象（在该案例中是 ​​settings​​ 变量）。第 2 个参数是一个包含默认插件属性的 object literal。第 3 个参数是用户定义的 options 参数。要在一个 HTML 元素上使用 accordion 插件传递 options，如果用户传递的options中也包含了open，那么就会覆盖默认的。
  • 可以看到，在这个插件中我们return了这个对象，这样我们调用了这个扩展的插件之后就可以使用链式调用了。 
  • 当然，在参数方面我们不仅可以传递jquery，也可以定义其他的如window、document.documentElement等。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

结束