Quelques réflexions et expériences sur les compétences de développement de plug-ins Javascript_javascript

Cause

Si vous avez effectué un travail de développement front-end, vous aurez certainement cette expérience : lorsqu'une page a besoin d'un certain effet ou d'un certain plug-in, nous avons généralement deux choix :
1. Recherchez sur Internet les plug-ins JS pertinents et découvrez leur utilisation
2. Inventez vos propres roues et développez des plug-ins.

Rechercher les plugins existants

La première méthode consiste à rechercher des plug-ins JS en ligne
De cette façon, vous seriez très chanceux s’il existe un plug-in qui répond juste aux besoins du projet. Mais je crois que dans la plupart des cas, les plug-ins que nous trouverons auront les problèmes suivants :
(1) Personnalisation de l'interface utilisateur : l'interface utilisateur fournie par de nombreux plug-ins ne correspond pas du tout au style de conception de notre projet. Le code HTML et CSS écrit peut ne pas être conforme à la façon dont le plug-in est utilisé. Par conséquent, nous devons modifier. le html et le css pour s'adapter à l'utilisation du plug-in.
(2) Coût d'apprentissage : S'il s'agit d'un plug-in plus complexe, il y a un problème de coût d'apprentissage. Vous devez apprendre à utiliser le plug-in.
(3) Le plug-in ne répond pas aux exigences : Le plug-in que nous avons trouvé n'est pas entièrement garanti pour répondre aux besoins de notre projet. À l'heure actuelle, vous devrez peut-être modifier son code pour prendre en charge les exigences du projet. aussi un problème possible
(4) La fonction du plug-in est trop volumineuse et complète : supposons que votre projet ait besoin d'un simple plug-in de carrousel et que vous trouviez un plug-in de carrousel très génial avec divers effets sympas, et qu'il se trouve être utilisable, mais ce plug-in -in a La taille est à peu près la même que celle d'une bibliothèque js, et si vous écrivez les effets vous-même, vous pouvez réellement le faire avec seulement quelques dizaines de lignes de code. Est-il trop redondant d'introduire ce plug-in à ce stade. temps?
Ce sont quelques problèmes possibles liés à l'utilisation des plug-ins js. Bien sûr, la situation spécifique sera analysée en détail. Je n'utilise pas de plug-ins js déjà écrits. Après tout, certains plug-ins ont passé l'épreuve du temps et. sont plus bénéfiques à l’avancement du projet. Si c'est la situation suivante, j'envisagerai d'utiliser le plug-in js existant :
(1) Fonctions complexes : telles que le téléchargement de fichiers, le téléchargement par lots, l'affichage de la progression, etc., telles que l'éditeur HTML
(2) Scénarios avec des délais de projet urgents et de faibles exigences de performance
(3) Le plug-in js répond juste aux besoins du projet

Construisez votre propre roue

La deuxième approche consiste à créer votre propre roue et à développer des plug-ins
Les principaux problèmes liés à l'écriture de plug-ins vous-même sont les suivants :
(1) Développer des plug-ins prend du temps et peut retarder le planning du projet. Cette méthode n'est pas recommandée si le planning est urgent
. (2) Les roues fabriquées par vous-même peuvent ne pas être aussi utiles que les roues existantes. Vous devez vous demander si vos coéquipiers conviennent
. (3) Un niveau de développement relativement élevé est requis
Si le projet n'est pas urgent, j'envisagerais de construire ma propre roue. Il y a plusieurs avantages principaux :
. (1) Il répond pleinement aux exigences du projet. Cela est évident car le plug-in est entièrement développé pour le projet
. (2) Connaissez les bases, facile à modifier, le plug-in est entièrement développé par vous-même et vous pouvez répondre avec flexibilité à tout changement dans les exigences du projet
(3) Léger, car nous n'avons pas à répondre à autant de besoins que les autres plug-ins open source, donc nos propres roues doivent uniquement s'adapter à nos propres voitures et ne nécessitent pas beaucoup de changements. Relativement parlant, il y a moins de changements. et moins de fonctions, et le code est également petit.
(4) C'est un excellent exercice pour les capacités personnelles. Ne réinventez pas la roue. C'est un dicton largement répandu parmi les programmeurs. C'est également devenu une excuse pour que de nombreuses personnes soient paresseuses, mais nous ne devrions pas l'utiliser comme excuse. pour entraver ses propres pas en avant. Les étudiants qui ont construit une roue doivent avoir une compréhension approfondie. Si vous construisez une roue, vous gagnerez bien plus que l'utilisation de 100 plug-ins écrits par d'autres. Nos roues ne seront peut-être pas utilisées dans des projets, mais c'est un apprentissage très efficace. façon, fortement recommandé.

Comment développer un plug-in léger et adaptable

Comment développer un plug-in adaptable et léger ? La soi-disant forte applicabilité signifie simplement quelques points :
1. Moins il y a de restrictions sur l'interface utilisateur, mieux c'est, de préférence aucune
2. Ne fournit pas trop de fonctions, fournit uniquement une API simple, permettant aux utilisateurs d'étendre facilement

Prenons un exemple, en supposant que nous souhaitons développer un plug-in de pagination jQuery. Pour les didacticiels de développement de plug-ins jQuery, veuillez vous référer à Développement de plug-ins jQuery.

Déterminer les besoins

La détermination des exigences est la première étape du développement d'un plug-in. Pour développer un plug-in de pagination léger, nous commençons toujours par les besoins les plus élémentaires du plug-in. Quels sont les besoins les plus fondamentaux du plug-in de pagination ? Il ne s'agit que de l'affichage du numéro de page et de la commutation entre les numéros de page. Par conséquent, notre plug-in doit partir de ce besoin fondamental et oublier les autres besoins qui peuvent exister.

Déterminer le plugin html et css

Après avoir déterminé les besoins du plug-in, la deuxième étape est l'interface utilisateur du plug-in, qui est en html et css.
Supposons que l'interface utilisateur de base soit la suivante :

Wenn ich die grundlegende Benutzeroberfläche oben sehe, weiß ich nicht, an welche Art von HTML-Struktur Sie denken werden. Für uns Entwickler sollten HTML und CSS so einfach wie möglich sein, daher ist die grundlegendste HTML-Struktur nichts weiter als eine Mischung aus einem Tag und einem Span-Tag. Einige Studenten denken vielleicht darüber nach, ul- und li-Tags zu verwenden, aber das erhöht tatsächlich die Komplexität . Grad, der Gewinn überwiegt den Verlust. Wir schreiben den HTML-Code wie folgt:

<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>

Dies ist die grundlegendste HTML-Codestruktur, einschließlich des Containers div.pager des Paging-Plug-Ins, der aktuellen Seite span.curPage, anderer Seitennummern-Tags, der vorherigen Seite, der nächsten Seite und anderer Schaltflächen.
Als nächstes folgt der CSS-Code, hauptsächlich das aktuelle Seiten-Tag, andere Seiten-Tags, die vorherige Seite, die nächste Seite, das Bewegen der Maus über die Schaltfläche usw. Mehrere Stile werden wie folgt geschrieben:

.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; }

JS-Code schreiben

Nach dem Schreiben des grundlegenden HTML- und CSS-Codes ist der JS-Code der zweitwichtigste Punkt. Zuerst richten wir die Grundform der jQuery-Plug-in-Entwicklung ein:

; (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);

Hier werden hauptsächlich die Standardwerte einiger optionaler Parameter bereitgestellt, z. B. die Standardseitenzahl ist 0, die Anzahl der Elemente pro Seite ist 6 usw.
Betrachten wir als Nächstes die Idee des Paging-Plug-Ins:
1. Setzen Sie die aktuelle Seitenzahl auf 0, also die erste Seite
2. Generieren Sie den HTML-Code des Paging-Plug-Ins
3. Ändern Sie die Seitenzahl und generieren Sie HTML-Code
Basierend auf dieser Idee schreiben wir den Code wie folgt:

; (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);

In diesem Code sind zwei wichtige Punkte zu beachten:
(1) Generierung von HTML-Code. Da möglicherweise zu viele Seitenzahlen vorhanden sind, müssen einige Seitenzahlen ausgeblendet werden. Daher müssen wir Auslassungspunkte generieren, um die ausgeblendeten Seitenzahlen darzustellen, und maxButtonCount verwenden, um die Schaltflächen mit den meisten Seitenzahlen darzustellen 🎜> (2) Ereignisbindung, HTML wird jedes Mal neu generiert, wenn sich die Seitenzahl ändert. Wir verwenden einen Ereignis-Proxy, um die Leistung zu verbessern und die Notwendigkeit zu beseitigen, Ereignisse wiederholt zu binden
Ein solches einfaches Paging-Plugin reicht aus.

Aber ist das genug?

Angenommen, wir müssen die Funktion zum direkten Springen durch Eingabe einer Seitenzahl unterstützen. Was müssen wir tun? Müssen wir die ursprüngliche HTML-Struktur und CSS ändern? Wir haben bereits erwähnt, dass die Entwicklung eines Plug-Ins mit den grundlegendsten Anforderungen beginnen sollte, also wie man mit diesen potenziellen Anforderungen umgeht.
Meine Lösung besteht darin, eine einfache API ohne Benutzeroberfläche bereitzustellen und vollständig vom Benutzer anzupassen.
Wir fügen dem obigen Code drei APIs hinzu: getPageIndex, setPageIndex und setItemCount, die jeweils das Abrufen des aktuellen Index, das Festlegen des aktuellen Index und das Festlegen der Gesamtzahl der Elemente darstellen. Der Code lautet wie folgt:

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();
}

Die vollständige Version des Codes finden Sie unter

jquery.page.js Wenn der Benutzer die Funktion zum Springen zur Seitennummer benötigt, kann er direkt mit der setPageIndex-Methode springen. Die Benutzeroberfläche selbst konzentriert sich nur auf die Grundfunktionen andere nicht stören.
Sie können
DEMO ansehen

Der gesamte Plug-in-Code wurde auf meinem Github platziert, um ihn anzuzeigen

Github

Zusammenfassung

Abschließend werde ich meine Ideen für die Entwicklung einiger JS-Plug-Ins sortieren:

1. Konzentrieren Sie sich auf die grundlegendsten Bedürfnisse selbst und ignorieren Sie mögliche potenzielle Bedürfnisse vorerst
2. Versuchen Sie, keine oder weniger Benutzeroberfläche bereitzustellen, um Einschränkungen für Benutzer zu reduzieren
3. Berücksichtigen Sie mögliche potenzielle Anforderungen und stellen Sie potenzielle Anforderungen bereit, die vollständig von den Benutzern angepasst werden

Dies sind einige meiner Gedanken darüber, wie man beim Schreiben von JS-Plug-Ins leichtgewichtig und hoch anwendbar ist. Willkommen zum Teilen!

Adresse dieses Artikels:

http://luopq.com/2016/02/04/think-js-plugin/, bitte beim Nachdruck angeben