jquery 插件开发_开发jQuery插件简介-CSDN博客

jquery 插件开发

本文由Mark Brown和Julian Motz进行了同行评审。 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态！

您以前可能已经处理过交互式组件，例如滑块，画廊或交互式表单。尽管您可能逐个站点地创建它们，但是节省时间的一个好方法是将您的功能构建为jQuery插件来加快开发速度。

jQuery插件可让您定义一次功能，然后根据需要将其放入您的项目中，从而使您的启动和运行速度更快。

我们将研究如何构建自己的jQuery插件。我们将立即查看您需要了解的所有方面，以帮助您启动并运行构建插件。

我们将使用我创建的名为fancytoggle的插件来展示插件的不同部分。它是一个简单的插件，用于切换诸如列表项之类的嵌套元素的可见性，以为诸如FAQ之类的内容创建手风琴式小部件。总体思路与插件的概念有关，但是此示例应帮助您了解其在实践中的工作方式。

请参阅CodePen上的SitePoint（ @SitePoint ）的Pen FancyToggle 。

插件方法：优势

这里的核心概念是创建可扩展的东西，您可以将其添加到项目中以提供快速功能。 jQuery的插件功能简化了构建可重用代码的过程。

这些插件的优点之一是，它们使开发人员可以定义几个可用于自定义功能的选项。您可以创建多个选项来更改插件的整体操作方式，或者可以定义一些选项来为用户提供更多的样式或布局控制。使用插件时，此选择将取决于您。

开发jQuery插件

让我们完成注册新jQuery插件所需的步骤。我们将使用示例插件fancyToggle ，以便您可以看到它们如何组合在一起。

用$ .fn创建函数

jQuery插件通过使用您要调用的名称来注册一个函数来触发插件来工作（例如，当您想要返回宽度/高度时，您调用jQuery的内置.width()或.height()函数）

我们将函数附加到jQuery的$.fn对象，以使其可用于全局$对象。这将注册我们的函数，并使其在对象或选择上被调用。

//registering our function
$.fn.fancytoggle = function(){
  // ...
};

这里的所有都是它的！现在，您有了一个可以从jQuery的$对象调用的新方法。现在，它什么也不会做，但是您可以在任意位置调用此方法，例如在选择器上：

//Call fancytoggle on this element
$('.my-element').fancytoggle();

您可以使用$.fn注册$.fn ，但是最好的做法是避免注册多个函数，除非插件执行明显不同的任务。

多个集合和循环

需要了解的重要一点是，在调用插件时，它可能会将自身应用于单个元素或多个元素。例如，对于我们的插件，如果我们将fancytoggle()应用于多个不同的项目，我们将在我们的函数中处理一个集合。

要处理每个元素，我们只需要使用jQuery的$.each函数遍历整个集合：

$.fn.fancytoggle = function(options) {
  // `this` refers to the jQuery elements your plugin is called on
  this.each(function(index, value){
    // the rest of your plugins functionality here
  });

  return this;
};

我们遍历集合的每个元素并进行设置。我们可能正在执行计算，添加事件侦听器或以某种方式使用我们的元素。这是$.each ，确保我们引用的是正确的元素。

返回对象/链接

大多数时候，您的插件可以通过直接在对象或选择器上调用来工作。这将针对此项目执行插件的功能。

jQuery的功能之一是chaining的概念，您可以在一个项目上背靠背调用多个方法，每个方法将按顺序执行：

// Chaining several jQuery methods on a selector
$('.my-element')
  .addClass('active')
  .slideToggle('fast');

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

这将选择一个元素，添加一个活动类，然后将其向上或向下滑动。每个方法返回一个对象，然后调用下一个方法。

要使我们的插件以这种方式工作，所需要做的就是在插件功能的末尾返回该项目。尽管从技术上讲它不是必需的，但强烈建议您这样做。

// defining our plugin function and returning it
$.fn.fancytoggle = function() {
  // ...
  return this;
};

创建选项和配置

插件可以通过一系列选项来改变它们的工作方式。这些选项作为一系列键/值对（JavaScript对象）传递给您的函数：

// apply fancyToggle to this element (and customize our values)
$('.my-element').fancytoggle({
  openSpeed: 300,
  closeSpeed: 600,
});

为了使我们的插件能够处理选项，我们需要定义要使用的默认设置。然后，我们可以使用jQuery的$.extend方法将默认选项与调用插件时传递的选项合并：

$.fn.fancytoggle = function(options) {
  // default arguments 
  options = $.extend({
    openSpeed: 400,
    closeSpeed: 400,
    easing: 'linear',
    // all your options here
  }, options);

  // ...

  return this;
}

您可以为插件定义任意数量的选项， $.extend将通过合并和收集值来创建单个对象。您可能需要包括一些基本设置或其他元素，以帮助插件进行自我配置。

对于我们的插件，我们提供了几个选项来定义插件的工作方式。例如，我们希望用户能够根据需要切换任意多个打开的区域。但是，我们可以选择让他们一次仅切换一个部分（关闭其他部分）。在切换功能期间，我们检查是否应基于此设置关闭其他项目。

options = $.extend({
  singleItemOpen: false,
}, options);

// later on in our toggle function
if (options.singleItemOpen === true) {
  var $activePanel = $item.siblings('.active');
  animate($activePanel, 'data-min-height', 'data-close-speed');
}

事件监听器

事件监听器是在插件生命周期的特定时刻调用的函数。这些回调将使其他人（或您）挂接到插件的关键部分并触发其他功能。

许多以开发人员为中心的jQuery插件都有回调，您可以将其链接到其中，例如，在单击幻灯片或关闭模式窗口时。

您可以将这些回调定义为默认选项中的元素。首先添加这些事件名称并将其值设置为空函数：

options = $.extend({
  // ...,
  onItemClick: function(){},
  onItemOpen: function(){},
  onItemClose: function(){}
}, options);

jQuery没有使用所有这些空函数，而是提供了$.noop函数。这做同样的事情，但是避免了创建多个匿名函数的开销。

options = $.extend({
    onItemClick: $.noop,
    onItemOpen: $.noop,
    onItemClose: $.noop
}, options);

一旦组织好设置，就可以在发生回调的地方构建功能。

回调通过在触发时调用您的选项来工作。例如，在我们的插件中，我们具有onItemClick回调，每次有人单击切换项时，我们都会触发该回调。我们使用.call方法来触发事件监听器（如果已设置）。

让我们看一下它的外观：

// called when we click on any of our toggle items
function toggle($item, event){

    // trigger the event listener
    options.onItemClick.call(null, $item, event); 

});

这是在切换项目时传递三个参数。第一个参数为null ：我们这样做是为了在以后扩展回调时不必担心this的值。

我们的第二个参数是$item （切换元素）：这很重要，因为它使回调函数可以访问项目本身。

最后，我们的第三个参数是event （事件本身）。

事件侦听器将有权访问$item和event并能够自定义功能。例如，如果我们想在单击时删除该元素：

$('.my-element').fancytoggle({
    // on click, remove item and log it
    onItemClick: function($item, event){
        $item.remove(); 
        console.log('Removed this item!'); 
    }
});

这是事件如此多才多艺的原因之一。他们可以在关键时刻使开发人员可以访问您的插件，以便他们可以扩展或修改它以满足他们的需求。