Bei so vielen Leuten, die jQuery-Plugins entwickeln, ist es nicht ungewöhnlich, dass man auf eine Situation stößt, in der man einfach – mangels einer besseren Sprache – scheiße ist. Es gibt keine Beispiele oder Dokumentation, das Plugin folgt nicht den Best Practices usw. Aber Sie gehören zu den Glücklichen: In diesem Artikel erfahren Sie, welche Fallstricke Sie vermeiden müssen.
Für diejenigen, die Nettuts+ häufig verwenden, ist jQuery kein Unbekannter. Jeffrey Ways „30 Days to Learn jQuery“ (und verschiedene andere Tutorials hier und anderswo) sind großartig und führen uns alle auf den Weg zur von Sizzle betriebenen Awesomesauce. Inmitten des ganzen Hypes (und des riesigen Sprungs bei der Einführung von JavaScript durch Entwickler und Browser-Anbieter) ist eine ganze Reihe von Plugins aufgetaucht. Dies ist einer der Gründe, warum jQuery die beliebteste JavaScript-Bibliothek ist! Das einzige Problem ist, dass viele davon nicht sehr gut sind.
In diesem Artikel konzentrieren wir uns weniger speziell auf JavaScript als vielmehr auf Best Practices für die Plugin-Bereitstellung.
Es gibt ein paar Muster, die mehr oder weniger allgemein als „richtiger Weg“ zum Erstellen von jQuery-Plugins gelten. Wenn Sie diese Konventionen nicht befolgen, könnte Ihr Plugin ... scheiße sein! Betrachten Sie eines der häufigsten Muster:
(function($, window, undefined){
$.fn.myPlugin = function(opts) {
var defaults = {
// setting your default values for options
}
// extend the options from defaults with user's options
var options = $.extend(defaults, opts || {});
return this.each(function(){ // jQuery chainability
// do plugin stuff
});
})(jQuery, window);
Zuerst erstellen wir eine selbstaufrufende anonyme Funktion, um die Verwendung globaler Variablen zu vermeiden. Wir übergeben $、window 和 undefined。调用自调用函数的参数是 jQuery 和 window; wir übergeben nichts für undefiniert. Wenn wir uns also für die Verwendung des undefinierten Schlüsselworts in unserem Plugin entscheiden, ist „undefiniert“ tatsächlich undefiniert.
Dies verhindert, dass andere Skripte möglicherweise
undefined分配恶意值，例如truesenden!
$ 作为 jQuery 传递；我们这样做是为了确保在匿名函数之外， $ Immer noch vollständig in der Lage, auf andere Inhalte wie Prototypen zu verweisen.
Durch die Übergabe von Variablen global zugänglicher window Objekte kann mehr Code durch den Minifizierungsprozess komprimiert werden (was Sie auch tun sollten).
Als nächstes verwenden wir den jQuery-Plug-in-Modus, $.fn.PluginName。这是注册插件以使用 $(selector).method()Formatierungsmethode. Es erweitert lediglich den Prototyp von jQuery um Ihre neuen Methoden. Wenn Sie ein Plugin erstellen möchten, das eine Funktion für ein jQuery-Objekt definiert, fügen Sie es direkt wie folgt hinzu:
$.PluginName = function(options){
// extend options, do plugin stuff
}
Diese Art von Plugin kann nicht verknüpft werden, da als jQuery-Objekteigenschaften definierte Funktionen normalerweise keine jQuery-Objekte zurückgeben. Betrachten Sie beispielsweise den folgenden Code:
$.splitInHalf = function(stringToSplit){
var length = stringToSplit.length;
var stringArray = stringToSplit.split(stringToSplit[Math.floor(length/2)]);
return stringArray;
}
Hier geben wir ein Array von Strings zurück. Es ist sinnvoll, es einfach als Array zurückzugeben, da der Benutzer dies wahrscheinlich verwenden möchte (und er es problemlos in ein jQuery-Objekt einschließen kann, wenn er möchte). Betrachten Sie stattdessen das folgende erfundene Beispiel:
$.getOddEls = function(jQcollection){ //
return jQcollection.filter(function(index){
var i = index+1;
return (index % 2 != 0);
});
}
In diesem Fall erwartet der Benutzer möglicherweise ein von $.getOddEls zurückgegebenes jQuery-Objekt. Daher geben wir die Filtermethode zurück, die die durch die übergebene Funktion definierte jQuery-Sammlung zurückgibt. Eine gute Faustregel besteht darin, zurückgegebene Elemente in jQuery-Funktionen einzuschließen, insbesondere wenn sie verkettet werden können. Wenn Sie Arrays, Zeichenfolgen, Zahlen, Funktionen oder andere Datentypen zurückgeben, lassen Sie sie offen.
Das Wichtigste, was Sie beim Veröffentlichen von Code tun können, ist wohl das Hinzufügen der erforderlichen Dokumentation. Die Lücke zwischen dem, was Sie den Entwicklern erklären, und dem, was der Code tatsächlich tut oder tun kann, besteht darin, dass Benutzer keine Zeit damit verschwenden möchten, die Einzelheiten des Codes herauszufinden.
Dokumentation ist eine Praxis ohne feste Regeln. Es ist jedoch allgemein anerkannt, dass es umso besser ist, je mehr (gut organisierte) Dokumentation Sie haben.
Dieser Prozess sollte sowohl eine interne Praxis (im/verstreut im Code) als auch eine externe Praxis sein (jede öffentliche Methode, Option und mehrere Anwendungsfälle werden ausführlich in einem Wiki oder einer Readme-Datei erklärt).
Die beliebtesten Plugins bieten vollen Zugriff auf Variablen, die der Benutzer möglicherweise steuern möchte (in den meisten Plugins „Options“-Objekte genannt). Sie bieten möglicherweise auch viele verschiedene Konfigurationen des Plugins an, sodass es in vielen verschiedenen Kontexten wiederverwendet werden kann. Betrachten wir zum Beispiel ein einfaches Slider-Plugin. Zu den Optionen, die der Benutzer möglicherweise steuern möchte, gehören Geschwindigkeit, Art und Verzögerung der Animation.
Es ist eine gute Idee, Benutzern auch Zugriff auf die Klassen-/ID-Namen zu gewähren, die den vom Plugin eingefügten oder manipulierten DOM-Elementen hinzugefügt werden. Darüber hinaus möchten sie jedoch möglicherweise bei jedem Folienübergang oder beim Zurückspringen der Folie zum Anfang (eine vollständige „Schleife“) auf die Rückruffunktion zugreifen.
Ihre Aufgabe ist es, alle möglichen Verwendungszwecke und Anforderungen für Ihr Plugin zu berücksichtigen.
Betrachten wir ein weiteres Beispiel: Ein Plugin, das eine API aufruft, sollte Zugriff auf das Rückgabeobjekt der API ermöglichen. Nehmen Sie als Beispiel das folgende einfache Plugin-Konzept:
$.fn.getFlickr = function(opts) {
return this.each(function(){ // jQuery chainability
var defaults = { // setting your default options
cb : function(data){},
flickrUrl : // some default value for an API call
}
// extend the options from defaults with user's options
var options = $.extend(defaults, opts || {});
// call the async function and then call the callback
// passing in the api object that was returned
$.ajax(flickrUrl, function(dataReturned){
options.cb.call(this, dataReturned);
});
});
}
这使我们能够做以下事情：
$(selector).getFlickr(function(fdata){ // flickr data is in the fdata object });
宣传这一点的另一种方式是提供“钩子”作为选项。从 jQuery 1.7.1 及更高版本开始，我们可以在插件调用之后使用 .on(eventName, function(){}) 将行为分离到它们自己的函数中。例如，使用上面的插件，我们可以将代码更改为如下所示：
$.fn.getFlickr = function(opts) {
return this.each(function(i,el){
var $this = el;
var defaults = { // setting your default options
flickrUrl : "http://someurl.com" // some default value for an API call
}
var options = $.extend(defaults, opts || {});
// call the async function and then call the callback
// passing in the api object that was returned
$.ajax(flickrUrl, function(dataReturned){
// do some stuff
$this.trigger("callback", dataReturned);
}).error(function(){
$this.trigger("error", dataReturned);
});
});
}
这允许我们调用 getFlickr 插件并链接其他行为处理程序。
$(selector).getFlickr(opts).on("callback", function(data){ // do stuff }).on("error", function(){ // handle an error });
您可以看到提供这种灵活性绝对重要；您的插件的操作越复杂，可用的控件就越复杂。
好的，第三条建议是，您的插件的操作越复杂，可用的控制就越复杂。可用。然而，一个很大的错误是为插件功能提供了太多的选项。例如，基于 UI 的插件最好具有无参数默认行为。
$(selector).myPlugin();
当然，有时这是不现实的（例如，用户可能正在获取特定的提要）。在这种情况下，您应该为他们做一些繁重的工作。有多种方式将选项传递给插件。例如，假设我们有一个简单的推文获取器插件。该推文获取器应该有一个默认行为，带有一个必需选项（您要从中获取的用户名）。
$(selector).fetchTweets("jcutrell");
例如，默认情况下可能会抓取一条推文，将其包装在段落标记中，然后使用该 html 填充选择器元素。这是大多数开发人员所期望和欣赏的行为。细粒度选项应该就是：选项。
当然，根据插件的类型，如果高度基于 UI 操作，则必须包含 CSS 文件，这是不可避免的。一般来说，这是一个可以接受的问题解决方案；大多数插件都与图像和 CSS 捆绑在一起。但不要忘记第二点 - 文档还应包括如何使用/引用样式表和图像。开发人员不想浪费时间查看源代码来弄清楚这些事情。
事情应该只是......工作。
话虽如此，使用注入样式（可以通过插件选项高度访问）或基于类/ID 的样式绝对是最佳实践。这些 ID 和类也应该可以通过前面提到的选项进行访问。然而，内联样式会覆盖外部 CSS 规则；不鼓励将两者混合使用，因为开发人员可能需要很长时间才能弄清楚为什么插件创建的元素不遵守他们的 CSS 规则。在这些情况下请运用您的最佳判断。
根据经验，内联 CSS 很糟糕 - 除非它很小到无法保证有自己的外部样式表。
证据就在布丁中：如果您无法提供一个实际示例来说明您的插件如何使用随附的代码，人们很快就会放弃使用您的插件。就那么简单。不要偷懒。
一个很好的示例模板：
jQuery，像任何优秀的代码库一样，随着每个版本的发布而成长。即使在弃用支持后，大多数方法仍会保留。然而，添加了新的方法；一个完美的例子是 .on() 方法，它是 jQuery 的新的事件委托一体化解决方案。如果您编写一个使用 .on() 的插件，那么使用 jQuery 1.6 或更早版本的人将不走运。现在，我并不是建议您针对最低公分母进行编码，但是，在您的文档中，请务必解释您的插件支持哪个版本的 jQuery。如果您引入了支持 jQuery 1.7 的插件，那么即使 1.8 发布，您也应该强烈考虑维持对 1.7 的支持。您还应该考虑利用 jQuery 中新的/更好的/更快的功能。
鼓励开发人员升级，但不要太频繁地破坏您的插件！一种选择是提供插件的“旧版”、已弃用、不受支持的版本。
如果您还没有学会如何使用版本控制，那么是时候咬紧牙关了。
除了将 jQuery 版本支持/兼容性作为文档的一部分之外，您还应该进行版本控制。版本控制（具体来说，通过 GitHub）在很大程度上是社交编码的发源地。如果您正在开发一个 jQuery 插件并希望最终发布到官方存储库中，那么无论如何它都必须存储在 GitHub 存储库中；如果您还没有学会如何使用版本控制，那么是时候硬着头皮了。版本控制有无数的好处，所有这些都超出了本文的范围。但核心好处之一是，它允许人们查看您所做的更改、改进和兼容性修复以及您何时进行这些更改、改进和兼容性修复。这也为您编写的插件的贡献和定制/扩展打开了大门。
世界不需要另一个滑块插件。
好吧，我们在这里忽略它已经足够长的时间了：一些“插件”是无用的或太浅，不足以保证被称为插件。世界不需要另一个滑块插件！然而，应该指出的是，内部团队可能会开发自己的插件供自己使用，这是完全可以的。但是，如果您希望将您的插件推向社交编码领域，请找到编写更多代码的理由。俗话说，没有理由重新发明轮子。相反，接过别人的方向盘，建造一辆赛车。当然，有时会有新的、更好的方法来做已经做过的同样的事情。例如，如果您使用更快或新技术，您很可能会编写一个新的滑块插件。
这个相当简单：提供代码的缩小版本。这使得它更小、更快。它还确保您的 Javascript 在编译时不会出现错误。当您缩小代码时，不要忘记也提供未压缩的版本，以便您的同行可以查看底层代码。对于各种经验水平的前端开发人员来说，都有免费且廉价的工具。
有关自动化解决方案，请参阅提示十三。
当你编写一个插件时，它的目的就是供其他人使用，对吗？因此，最有效的源代码是具有高度可读性的。如果您正在编写无数巧妙的单行 lambda 样式函数，或者您的变量名称没有语义，那么当错误不可避免地发生时，将很难对其进行调试。不要编写短变量名来节省空间，而是遵循技巧九（缩小！）中的建议。这是优秀文档的另一部分；优秀的开发人员应该能够检查您的代码并了解其用途，而无需花费太多精力。
如果您发现自己调用变量“
a”或“x”，那么您就做错了。
此外，如果您发现自己查阅文档来记住您自己的看起来奇怪的代码正在做什么，那么您也可能需要不那么简洁并更具解释性。将每个函数的行数限制为尽可能少；如果它们延伸三十行或更多行，则可能会有代码味道。
尽管我们都喜欢使用 jQuery，但重要的是要了解它是一个库，而且成本很小。一般来说，您不需要太担心 jQuery 选择器性能之类的事情。不要令人讨厌，你会没事的。 jQuery 是高度优化的。也就是说，如果您需要 jQuery（或插件）的唯一原因是在 DOM 上执行一些查询，您可能会考虑完全删除抽象，而坚持使用普通 JavaScript 或 Zepto。
注意：如果您决定坚持使用普通 JavaScript，请确保您使用的是跨浏览器的方法。对于较新的 API，您可能需要一个小型的 polyfill。
使用咕噜声。期间。
Grunt 是一个“用于 JavaScript 项目的基于任务的命令行构建工具”，最近在 Nettuts+ 上对此进行了详细介绍。它允许你做这样的事情：
grunt init:jquery
此行（在命令行中执行）将提示您一系列问题，例如标题、描述、版本、git 存储库、许可证等。这些信息有助于自动化设置文档、许可等的过程。
Grunt 所做的不仅仅是为您制作一些定制的样板代码；它还提供内置工具，例如代码 linter JSHint，只要您安装了 PhantomJS（由 Grunt 负责），它就可以为您自动执行 QUnit 测试。这样，您可以简化工作流程，因为测试在保存时会立即在终端中运行。
Oh, übrigens – Sie haben Ihren Code getestet, oder? Wenn nicht, wie stellen Sie sicher/behaupten, dass Ihr Code wie erwartet funktioniert? Manuelles Testen hat seine Berechtigung, aber wenn Sie feststellen, dass Sie Ihren Browser unzählige Male pro Stunde aktualisieren, machen Sie es falsch. Erwägen Sie die Verwendung von Tools wie QUnit, Jasmine oder sogar Mocha.
Tests sind besonders nützlich beim Zusammenführen von Pull-Anfragen auf GitHub. Sie können von allen Anfragen die Bereitstellung von Tests verlangen, um sicherzustellen, dass neuer/geänderter Code Ihre vorhandenen Plugins nicht beschädigt.
Wenn Ihnen das Konzept des Testens von jQuery-Plugins neu ist, sollten Sie sich unseren Premium-exklusiven Screencast „Testing the Technology That Drives jQuery Plugins“ ansehen. Darüber hinaus starten wir später in dieser Woche einen neuen Kurs „JavaScript-Testen mit Jasmine“ auf der Website!
Wir tun Ihnen keinen Gefallen, indem wir Ihnen sagen, was Sie falsch gemacht haben. Hier sind einige Links, die Sie wieder auf den richtigen Weg bringen!
Wenn Sie ein jQuery-Plugin schreiben, ist es wichtig, die oben aufgeführten Fallstricke zu vermeiden. Übersehe ich irgendwelche wichtigen Anzeichen dafür, dass das Plugin schlecht funktioniert?
Das obige ist der detaillierte Inhalt von14 mögliche Erklärungen, warum Ihr jQuery-Plugin nicht verwendet wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
