Teilen Sie einige meiner Gedanken und Erfahrungen zur JS-Plug-in-Entwicklung_Javascript-Fähigkeiten

Leseverzeichnis für diesen Artikel:

•Ursache
•Wie man ein leichtes und anpassungsfähiges Plug-in entwickelt
•Zusammenfassung

Ursache

Wenn Sie Front-End-Entwicklungsarbeit geleistet haben, werden Sie auf jeden Fall diese Erfahrung machen: Wenn eine Seite einen bestimmten Effekt oder ein bestimmtes Plug-In benötigt, haben wir normalerweise zwei Möglichkeiten:

1. Finden Sie relevante JS-Plug-ins online und lernen Sie deren Verwendung kennen
2. Erfinden Sie Ihre eigenen Räder und entwickeln Sie Plug-Ins.

Suchen Sie nach vorhandenen Plugins

Die erste Methode besteht darin, online nach JS-Plug-Ins zu suchen

Auf diese Weise haben Sie großes Glück, wenn es ein Plug-In gibt, das genau den Projektanforderungen entspricht. Aber ich glaube, dass die Plug-ins, die wir finden, in den meisten Fällen die folgenden Probleme haben werden:

(1) UI-Anpassung: Die von vielen Plug-Ins bereitgestellte Benutzeroberfläche entspricht überhaupt nicht unserem Projektdesignstil. Möglicherweise entsprechen das geschriebene HTML und CSS nicht der Art und Weise, wie das Plug-In verwendet wird. Wir müssen den HTML- und CSS-Code ändern, um ihn an die Plug-in-Nutzung anzupassen.
(2) Lernkosten: Wenn es sich um ein komplexeres Plug-in handelt, besteht ein Lernkostenproblem. Sie müssen lernen, wie man das Plug-in verwendet.
(3) Das Plug-in erfüllt nicht die Anforderungen: Das von uns gefundene Plug-in erfüllt möglicherweise nicht vollständig die Anforderungen unseres Projekts. Möglicherweise müssen Sie seinen Code ändern, um die Projektanforderungen zu unterstützen auch ein mögliches Problem
(4) Die Plug-in-Funktion ist zu umfangreich und umfangreich: Angenommen, Ihr Projekt benötigt ein einfaches Karussell-Plug-in, und Sie finden ein sehr tolles Karussell-Plug-in mit verschiedenen coolen Effekten, und es ist zufällig verwendbar, aber dieser Plug -in Die Größe entspricht in etwa der einer js-Bibliothek, und wenn Sie die Effekte selbst schreiben, können Sie dies tatsächlich mit nur ein paar Dutzend Codezeilen tun. Ist die Einführung dieses Plug-Ins zu diesem Zeitpunkt zu überflüssig? ?
Dies sind einige mögliche Probleme bei der Verwendung von js-Plug-ins. Natürlich werde ich die spezifische Situation nicht im Detail analysieren. Schließlich haben einige Plug-ins den Test der Zeit bestanden Ihr Einsatz ist für den Projektfortschritt vorteilhafter. Wenn es sich um die folgende Situation handelt, werde ich die Verwendung des vorhandenen js-Plug-ins in Betracht ziehen:

(1) Komplexe Funktionen: wie Datei-Upload, Batch-Upload, Fortschrittsanzeige usw., wie HTML-Editor
(2) Szenarien mit dringenden Projektterminen und geringen Leistungsanforderungen
(3) Das js-Plug-in erfüllt genau die Anforderungen des Projekts

Bauen Sie Ihr eigenes Rad

Der zweite Ansatz besteht darin, ein eigenes Rad zu erstellen und Plug-Ins zu entwickeln
Die Hauptprobleme beim Schreiben von Plug-Ins selbst sind folgende:

(1) Die Entwicklung von Plug-ins nimmt Zeit in Anspruch und kann den Projektzeitplan verzögern. Diese Methode wird nicht empfohlen, wenn der Zeitplan dringend ist.
(2) Von Ihnen selbst hergestellte Räder sind möglicherweise nicht so nützlich wie vorhandene Räder. Sie müssen überlegen, ob Ihre Teamkollegen geeignet sind
(3) Es ist ein relativ hoher Entwicklungsstand erforderlich

Wenn das Projekt nicht dringend ist, würde ich darüber nachdenken, mein eigenes Rad zu bauen. Es gibt mehrere Hauptvorteile:

(1) Es erfüllt die Projektanforderungen vollständig. Dies ist offensichtlich, da das Plug-in vollständig für das Projekt entwickelt wurde
(2) Kennen Sie die Grundlagen, lassen Sie sich leicht ändern, das Plug-In wird vollständig von Ihnen selbst entwickelt und Sie können flexibel auf Änderungen der Projektanforderungen reagieren
(3) Leichtgewichtig, da wir uns nicht mit so vielen Anforderungen befassen müssen wie bei anderen Open-Source-Plug-Ins, sodass unsere eigenen Räder nur zu unseren eigenen Autos passen müssen und nicht viele Änderungen erforderlich sind. Relativ gesehen gibt es weniger Änderungen und weniger Funktionen, und der Code ist auch kleiner.
(4) Es ist eine großartige Übung für die persönlichen Fähigkeiten. Dies ist ein weit verbreitetes Sprichwort für viele Menschen, aber wir sollten dies nicht als Entschuldigung verwenden eigene Schritte nach vorne behindern. Schüler, die ein Rad gebaut haben, sollten über ein tiefes Verständnis verfügen. Wenn Sie ein Rad bauen, werden Sie weitaus mehr gewinnen, als wenn Sie 100 von anderen geschriebene Plug-ins verwenden. Unsere Räder können zwar nicht in Projekten verwendet werden, aber das ist ein sehr effizientes Lernen. Übrigens sehr zu empfehlen.

Wie man ein leichtes und anpassungsfähiges Plug-in entwickelt

Wie entwickelt man ein anpassungsfähiges und leichtes Plug-in? Die sogenannte starke Anwendbarkeit bedeutet einfach ein paar Punkte:

1. Je weniger Einschränkungen bei der Benutzeroberfläche, desto besser, vorzugsweise keine
2. Bietet nicht zu viele Funktionen, sondern nur eine einfache API, sodass Benutzer problemlos
erweitern können

Nehmen wir ein Beispiel: Angenommen, wir möchten ein jQuery-Paging-Plug-in entwickeln. Tutorials zur jQuery-Plug-in-Entwicklung finden Sie unter jQuery-Plug-in-Entwicklung.

Bedürfnisse ermitteln

Die Ermittlung der Anforderungen ist der erste Schritt bei der Entwicklung eines Plug-Ins. Um ein leichtes Paging-Plugin zu entwickeln, beginnen wir immer noch mit den grundlegendsten Anforderungen des Paging-Plugins. Es ist nichts anderes als die Anzeige von Seitenzahlen und das Umschalten zwischen Seitenzahlen. Daher muss unser Plug-in um dieses Grundbedürfnis herum beginnen und andere möglicherweise vorhandene Bedürfnisse außer Acht lassen.

Bestimmen Sie das HTML- und CSS-Plugin

Nachdem die Anforderungen des Plug-Ins ermittelt wurden, ist der zweite Schritt die Benutzeroberfläche des Plug-Ins, die aus HTML und CSS besteht.

Angenommen, die grundlegende Benutzeroberfläche sieht wie folgt aus:

Interface utilisateur de pagination de base

En voyant l'interface utilisateur de base ci-dessus, je ne sais pas à quel type de structure HTML vous penserez. Pour nous, développeurs, HTML et CSS doivent être aussi simples que possible, donc la structure HTML la plus basique n'est rien de plus qu'un mélange d'une balise et d'une balise span. Certains étudiants peuvent penser à utiliser les balises ul et li, mais cela augmente en réalité la complexité. . Degré, le gain dépasse la perte. On écrit le code html comme suit :

<div class="pager">
<span class="flip noPage">上一页</span>
<span class="curPage">1</span>
<a page="1" href="javascript:;">2</a>
<a page="2" href="javascript:;">3</a>
<a page="3" href="javascript:;">4</a>
<span>...</span> 
<a href="javascript:;" page="8">9</a> 
<a page="1" href="javascript:;" class="flip">下一页</a>
</div> 

Il s'agit de la structure de code HTML la plus basique, comprenant le conteneur div.pager du plug-in de pagination, la page actuelle span.curPage, d'autres balises de numéro de page a, la page précédente, la page suivante et d'autres boutons.

Vient ensuite le code css, principalement la balise de la page courante, les autres balises de la page, la page précédente, la page suivante, le survol de la souris sur le bouton, etc. Plusieurs styles s'écrivent ainsi :

.pager { display: inline-block; font: 12 px/21px "宋体"; margin-top: 20px; }
.pager a, .pager .flip, .pager .curPage { border: 1px solid #e3e3e3; display: inline-block; height: 22px; line-height: 22px; text-align: center; }
.pager a { background: none repeat scroll 0 0 #fff; color: #010101; text-decoration: none; width: 26px; }
.pager a:hover { background: none repeat scroll 0 0 #f1f1f1; }
.pager .noPage { color: #a4a4a4; }
.pager .curPage { background: none repeat scroll 0 0 #49abde; color: #ffffff; width: 26px; }
.pager .flip { width: 56px; } 

Écrivez le code js

Après avoir écrit le HTML et le CSS de base, la prochaine chose la plus critique est le code js. Tout d’abord, nous avons mis en place la forme de base du développement du plug-in jQuery :

; (function ($, window, document, undefined) {
"use strict";
var defaults = {
pageIndex: 0,
pageSize: 6,
itemCount: 50,
maxButtonCount: 7,
prevText: "上一页",
nextText: "下一页",
buildPageUrl: null,
onPageChanged: null
}; 
$.fn.pager = function (options) {
options = $.extend(defaults, options || {});
}
})(jQuery, window, document); 

Fournit ici principalement les valeurs par défaut de certains paramètres facultatifs, tels que le numéro de page par défaut est 0, le nombre d'éléments par page est 6, etc.

Ensuite, considérons l'idée du plug-in de pagination :

1. Définissez le numéro de la page actuelle sur 0, ce qui signifie la première page
2. Générez le code html du plug-in de pagination
3. Modifiez le numéro de page et générez du code html

Sur la base de cette idée, nous écrivons le code comme suit :

; (function ($, window, document, undefined) {
"use strict";
var defaults = {
pageIndex: 0,
pageSize: 6,
itemCount: 50,
maxButtonCount: 7,
prevText: "上一页",
nextText: "下一页",
buildPageUrl: null,
onPageChanged: null
};
function Pager($ele, options) {
this.$ele = $ele;
this.options = options = $.extend(defaults, options || {});
this.init();
}
Pager.prototype = {
constructor: Pager,
init: function () {
this.renderHtml();
this.bindEvent();
},
renderHtml: function () {
var options = this.options;
options.pageCount = Math.ceil(options.itemCount / options.pageSize);
var html = [];
//生成上一页的按钮
if (options.pageIndex > 0) {
html.push('<a page="' + (options.pageIndex - 1) + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '" class="flip">' + options.prevText + '</a>');
} else {
html.push('<span class="flip noPage">' + options.prevText + '</span>');
}
//这里是关键
//临时的起始页码中间页码，当页码数量大于显示的最大按钮数时使用
var tempStartIndex = options.pageIndex - Math.floor(options.maxButtonCount / 2) + 1;
//计算终止页码，通过max计算一排按钮中的第一个按钮的页码，然后计算出页数量
var endIndex = Math.min(options.pageCount, Math.max(0, tempStartIndex) + options.maxButtonCount) - 1;
var startIndex = Math.max(0, endIndex - options.maxButtonCount + 1);
// 第一页
if (startIndex > 0) {
html.push("<a href='" + this.buildPageUrl(0) + "' page='" + 0 + "'>1</a> ");
html.push("<span>...</span>");
}
//生成页码按钮
for (var i = startIndex; i <= endIndex; i++) {
if (options.pageIndex == i) {
html.push('<span class="curPage">' + (i + 1) + '</span>');
} else {
html.push('<a page="' + i + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '">' + (i + 1) + '</a>');
}
}
// 最后一页
if (endIndex < options.pageCount - 1) {
html.push("<span>...</span> ");
html.push("<a href='" + this.buildPageUrl(options.pageCount - 1) + "' page='" + (options.pageCount - 1) + "'>" + options.pageCount + "</a> ");
}
//生成下一页的按钮
if (options.pageIndex < options.pageCount - 1) {
html.push('<a page="' + (options.pageIndex + 1) + '" href="' + this.buildPageUrl(options.pageIndex + 1) + '" class="flip">' + options.nextText + '</a>');
} else {
html.push('<span class="flip noPage">' + options.nextText + '</span>');
}
this.$ele.html(html.join(""));
},
bindEvent: function () {
var that = this;
that.$ele.on("click", "a", function () {
that.options.pageIndex = parseInt($(this).attr("page"), 10);
that.renderHtml();
that.options.onPageChanged && that.options.onPageChange(that.options.pageIndex);
})
},
buildPageUrl: function () {
if ($.isFunction(this.options.buildPageUrl)) {
return this.options.buildPageUrl(pageIndex);
}
return "javascript:;";
} 
};
$.fn.pager = function (options) {
options = $.extend(defaults, options || {});
return new Pager($(this), options);
}
})(jQuery, window, document); 

Il y a deux points clés à retenir dans ce code :

(1) Génération de code html Comme il peut y avoir trop de numéros de page, certains numéros de page doivent être masqués, nous devons donc générer des points de suspension pour représenter le numéro de page masqué et utiliser maxButtonCount pour représenter le plus de pages. boutons numériques

(2) Liaison d'événement, le HTML sera régénéré à chaque fois que le numéro de page change. Nous utilisons un proxy d'événement pour améliorer les performances et éliminer le besoin de lier les événements à plusieurs reprises
. Un tel plug-in de pagination de base suffit.

Mais est-ce suffisant ?

Supposons que nous devions prendre en charge la fonction de saut directement en entrant le numéro de page. Que devons-nous faire ? Devons-nous modifier la structure html et css d'origine ? Nous avons mentionné plus tôt que le développement d'un plug-in devrait commencer par les exigences les plus élémentaires, donc comment gérer ces exigences potentielles.

Ma solution est la suivante, fournissant une API simple, sans interface utilisateur et entièrement personnalisée par l'utilisateur.

Nous ajoutons trois API au code ci-dessus : getPageIndex, setPageIndex et setItemCount, qui représentent respectivement l'obtention de l'index actuel, la définition de l'index actuel et la définition du nombre total d'éléments. Le code est le suivant :

getPageIndex: function () {
return this.options.pageIndex;
},
setPageIndex: function (pageIndex) {
this.options.pageIndex = pageIndex;
this.renderHtml();
},
setItemCount: function (itemCount) {
this.options.pageIndex = 0;
this.options.itemCount = itemCount;
this.renderHtml();
} 

Ces trois API sont fournies. Si l'utilisateur a besoin de la fonction de saut au numéro de page, il peut directement utiliser la méthode setPageIndex pour sauter. L'interface utilisateur est entièrement personnalisée par l'utilisateur. Le plug-in lui-même se concentre uniquement sur les bases. fonctionne et n’interfère pas avec les autres.

Vous pouvez voir la DÉMO

L'intégralité du code du plug-in a été placé sur mon github. Les étudiants intéressés peuvent cliquer pour voir github

.

Résumé

Enfin, je vais faire le tri dans mes idées pour développer quelques plug-ins js :

1. Concentrez-vous sur les besoins les plus fondamentaux eux-mêmes et ignorez les besoins potentiels possibles pour le moment
2. Essayez de ne fournir aucune interface utilisateur ou le moins possible pour réduire les restrictions imposées aux utilisateurs
3. Considérez les besoins potentiels possibles et fournissez des API. Les besoins potentiels sont entièrement personnalisés par les utilisateurs
.

Voici quelques-unes de mes réflexions sur la manière d'être léger et hautement applicable lors de l'écriture de plug-ins js. Bienvenue à tous !