#27：构建一个简单的 jQuery 插件

既然我们已经了解了如何使用 jQuery 插件，那么了解如何构建它们绝对是值得的。我们已经简要地提到了，如果你想扩展原生 jQuery 对象，你可以这样做。就像

$.myFunction = function() {
  console.log("I am a function on the jQuery object.");
};

// call it
$.myFunction();

但这本身并没有什么用。为了创建一个新的 jQuery 方法，你可以在一组元素上调用它，你需要像这样去做

$.fn.myMethod = function() {
  // I'm a new method
});

这与对 jQuery 使用 .prototype 完全相同，对于好奇的人来说，你可以在这里了解更多信息。用这种方式做意味着我们能够在一组元素上使用这个新方法。就像

$("li").myMethod();

你可以在这个方法中做任何你想做的事情，但是为了成为一个好的 jQuery 插件构建公民，你应该将相同的一组元素从插件中返回出来。

$.fn.myMethod = function() {
  // Do some stuff

  return this;
});

这样它就可以与链式调用一起工作。如果你没有这样做，并且有人尝试了像

$(“li”).myMethod().show();

这将失败，因为 .show() 将被实质上在 nothing 上调用。jQuery 插件通常被设计为遍历每个元素，这样你就可以直接访问集合中的每个元素来做你需要做的事情。

另一个良好的行为是将插件包装在一个立即执行函数表达式中，并将 jQuery 作为参数传递给它。这样你就可以在插件代码中更安全地使用 $。这是因为在某些情况下，jQuery 的 $ 简写不可用（例如，用户在“兼容模式”下使用了 jQuery）。

有了这两件事，插件结构就变成了

(function($) {
$.fn.myMethod = function() {
  return this.each(function() {
    // do things
  });
};
})(jQuery)

在屏幕录制中，我们最终构建了一个简单的插件，用于在任何元素的末尾添加一个箭头。

查看 CodePen 上由 Chris Coyier (@chriscoyier) 创建的 rwasH

当然，随着你想要做更多事情的雄心壮志的增长，它也会变得更加复杂。