Erstellen und ver?ffentlichen Sie Ihre eigene JavaScript -Bibliothek: Ein detailliertes Handbuch

Kernpunkte

• L?schen Sie das Ziel: Bevor Sie mit dem Aufbau der Bibliothek beginnen, kl?ren Sie die spezifischen Probleme, die sie l?sen m?chten, konzentrieren und sicherstellen, dass deren Nützlichkeit es ist.
• Benutzerzentriertes API-Design: Entwerfen Sie Ihre Bibliothek mit dem Endbenutzerzentrum, um sie einfach und einfach zu verwenden, wodurch die Einführung und Zufriedenheit der Benutzer verbessert wird.
• Flexibilit?t und Anpassung: Bereitstellung von Anpassungsoptionen durch Konfiguration, ?ffentliche Methoden und Ereignisbehandlungen an unterschiedliche Benutzeranforderungen.
• Tests und Dokumentation: Verwenden Sie Frameworks wie Mokka oder Jasmine, um gründliche Tests durchzuführen und sicherzustellen, dass umfassende Dokumentation zur Verst?ndnis und Verwendung beibehalten wird.
• Modulladerkompatibilit?t: Stellen Sie sicher, dass Ihre Bibliothek verschiedene Modullader unterstützt, indem sie die Definition der Universal Modul (UMD) oder ?hnliche Methoden verwenden, um die Kompatibilit?t zu maximieren.
• Versioning und Ver?ffentlichung: Update mit semantischer Versioning und ver?ffentlichen Sie Ihre Bibliothek an Packungsmanager wie NPM oder Bower, um ein breiteres Publikum zu erreichen.

Dieser Artikel wurde von Adrian Sandu, Vildan Softic und Dan Prince überprüft. Vielen Dank an alle SitePoint -Peer -Rezensenten, die SidePoint -Inhalte für die Besten erhalten haben!

Wir verwenden oft Bibliotheken. Die Bibliothek ist verpackter Code, den Entwickler in ihren Projekten verwenden k?nnen, was zweifellos die Arbeitsbelastung spart und doppelte R?der vermeidet. Es ist besser, wiederverwendbare Pakete (sowohl Open Source als auch Closed Source) zu haben, als die gleichen Funktionen oder das manuelle Kopieren aus früheren Projekten wieder aufzubauen.

Aber was genau ist die Bibliothek neben dem verpackten Code? Mit einigen Ausnahmen sollte die Bibliothek immer eine einzige Datei oder mehrere Dateien in einem einzigen Ordner sein. Sein Code sollte separat aufrechterhalten werden und bleibt gleich, wenn er in das Projekt implementiert wird. Mit der Bibliothek sollten Sie projektspezifische Konfigurationen und/oder Verhaltensweisen festlegen. Stellen Sie sich es als ein USB -Ger?t vor, das nur die Kommunikation über einen USB -Anschluss erm?glicht. Einige Ger?te wie M?use und Tastaturen erm?glichen die Konfiguration über die vom Ger?t bereitgestellten Schnittstellen.

In diesem Artikel werde ich erkl?ren, wie die Bibliothek erstellt wird. Obwohl die meisten der behandelten Themen für andere Sprachen geeignet sind, konzentriert sich dieser Beitrag auf den Aufbau von JavaScript -Bibliotheken.

Warum Ihre eigene JavaScript -Bibliothek erstellen?

Erstens macht die Bibliothek den Wiederverwendung vorhandener Code sehr bequem. Sie müssen keine alten Projekte ausgraben und einige Dateien kopieren, sondern einfach die Bibliothek einbringen. Dadurch wird auch Ihre Anwendung fragmentiert, wodurch die Basis der Anwendungscode kleiner und die Wartung erleichtert wird.

Jeder Code, der das Erreichen eines bestimmten Ziels erleichtert und wiederverwendet werden kann, wie z. B. Abstraktion, ist ein Kandidat, der in die Bibliothek verpackt werden kann. Ein interessantes Beispiel ist JQuery. Obwohl die API von JQuery viel mehr als eine vereinfachte DOM-API ist, machte sie vor einigen Jahren viel Sinn, als die Cross-Browser-DOM-Operationen ziemlich schwierig waren. Wenn ein Open -Source -Projekt popul?r wird und immer mehr Entwickler es verwenden, ist es sehr wahrscheinlich, dass die Menschen dem Projekt anschlie?en und helfen, indem sie Fragen einreichen oder zur Codebasis beitragen. In jedem Fall kommt es der Bibliothek und allen Projekten zugute, die davon abh?ngen.

Ein beliebtes Open -Source -Projekt kann auch gro?e M?glichkeiten bieten. Ein Unternehmen kann von der Qualit?t Ihres Jobs beeindruckt sein und Ihnen einen Job anbieten. Vielleicht bittet ein Unternehmen Sie um Hilfe bei der Integration Ihres Projekts in seine Anwendung. Schlie?lich kennt niemand Ihre Bibliothek besser als Sie.

Für viele Menschen ist es nur ein Hobby - den Prozess des Schreibens von Code, dem Helfer und dem Lernen und Wachsen des Prozesses zu genie?en. Sie k?nnen Ihre Grenzen überschreiten und neue Dinge ausprobieren.

Umfang und Ziel

Bevor Sie die erste Codezeile schreiben, sollten Sie klar sein, was der Zweck Ihrer Bibliothek ist - Sie müssen Ziele festlegen. Mit ihnen k?nnen Sie sich darauf konzentrieren, welche Probleme Sie mit Ihrer Bibliothek l?sen m?chten. Denken Sie daran, dass Ihre Bibliothek einfacher zu verwenden und zu erinnern sollte als die ursprüngliche Form von Fragen. Je einfacher die API ist, desto einfacher ist es für Benutzer, Ihre Bibliothek zu nutzen. Zitat Unix Philosophie:

Mach nur eins und mach es gut

Fragen Sie sich: Welche Probleme l?sen Ihre Bibliothek? Wie willst du es l?sen? Würden Sie alles selbst schreiben oder k?nnten Sie die Bibliothek eines anderen verwenden?

Versuchen Sie, eine Roadmap unabh?ngig von der Gr??e der Bibliothek zu erstellen. Listen Sie alle gewünschten Funktionen auf und entfernen Sie dann so viele Funktionen wie m?glich, bis Sie eine winzige, aber voll funktionsf?hige Bibliothek wie das kleinste lebensf?hige Produkt haben. Dies wird Ihre erste Version sein. Von dort aus k?nnen Sie für jede neue Funktion Meilensteine ??erstellen. Im Wesentlichen zerlegen Sie das Projekt in kleine Stücke, wodurch jedes Feature eher wie eine Leistung und angenehmer wird. Vertrauen Sie mir, das wird Sie gesund halten.

API -Design

Ich pers?nlich mag es, meine Bibliothek aus der Sicht des Endbenutzers zu verarbeiten. Sie k?nnen es ein benutzerzentriertes Design nennen. Im Wesentlichen erstellen Sie eine Zusammenfassung der Bibliothek, in der Hoffnung, mehr darüber nachzudenken und sie für alle, die sie verwenden, bequemer zu machen. Gleichzeitig k?nnen Sie überlegen, welche Aspekte anpassbar sein sollten, die sp?ter in diesem Artikel er?rtert werden.

Der endgültige API -Qualit?tstest besteht darin, Ihr eigenes Hundefutter zu essen und Ihre Bibliothek in Ihrem eigenen Projekt zu verwenden. Versuchen Sie, den Anwendungscode durch Ihre Bibliothek zu ersetzen, und prüfen Sie, ob er alle gewünschten Funktionen abdeckt. Versuchen Sie, die Bibliothek so dünn wie m?glich zu gestalten, w?hrend sie sie flexibel genug macht, um sie auch für ihre extremen Situationen durch Anpassung geeignet zu machen (wie sp?ter in diesem Artikel beschrieben).

Folgendes ist, wie die Implementierung oder Zusammenfassung der User Agent String -Bibliothek aussehen k?nnte:

<code>// 以空的UserAgent字符串開(kāi)始
var userAgent = new UserAgent;

// 創(chuàng)建并添加第一個(gè)產(chǎn)品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);

// 創(chuàng)建并添加第二個(gè)產(chǎn)品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);

// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101
userAgent.toString();

// 對(duì)引擎產(chǎn)品進(jìn)行更多更改
engine.setComment('Hello World');

// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101 (Hello World)
userAgent.toString();
</code>

Abh?ngig von der Komplexit?t der Bibliothek müssen Sie m?glicherweise auch die Struktur berücksichtigen. Die Verwendung von Designmustern ist eine hervorragende M?glichkeit, Bibliotheken zu erstellen oder bestimmte technische Probleme zu überwinden. Es verringert auch das Risiko, den gr??ten Teil des Codes durchzuführen, wenn neue Funktionen hinzugefügt werden.

Flexibilit?t und Anpassung

Was die Bibliothek leistungsstark macht, ist Flexibilit?t, aber es ist auch schwierig, eine Grenze zwischen dem zu zeichnen, was Sie anpassen k?nnen und dem, was Sie nicht k?nnen. Ein perfektes Beispiel ist chart.js und d3.js. Beide sind ausgezeichnete Bibliotheken für die Visualisierung von Daten. Diagramm.js erleichtert es sehr einfach, verschiedene Arten von integrierten Diagrammen zu erstellen und einzurichten. Wenn Sie jedoch mehr Kontrolle über die Grafiken ben?tigen, müssen Sie D3.Js. Es gibt verschiedene M?glichkeiten, den Benutzern die Kontrolle zu geben: Konfiguration, ?ffentliche Methoden sowie durch Rückrufe und Ereignisse.

Die Konfiguration der

-Bibliothek erfolgt normalerweise w?hrend der Initialisierung, aber einige Bibliotheken erm?glichen es Ihnen, Optionen zur Laufzeit zu ?ndern. Die Optionen sind in der Regel auf die Details beschr?nkt. Wenn Sie diese Optionen ?ndern, sollten Sie nichts anderes tun, als diese Werte für die sp?tere Verwendung zu aktualisieren.

Methoden k?nnen offenbart werden, um mit Instanzen zu interagieren, z. B. Daten aus Instanzen abzurufen, Daten in Instanzen (Setzer) zu setzen und Vorg?nge auszuführen.

<code>// 在初始化時(shí)配置
var userAgent = new UserAgent({
  commentSeparator: ';'
});

// 使用公共方法進(jìn)行運(yùn)行時(shí)配置
userAgent.setOption('commentSeparator', '-');

// 使用公共屬性進(jìn)行運(yùn)行時(shí)配置
userAgent.commentSeparator = '-';
</code>

Rückrufe werden manchmal zusammen mit ?ffentlichen Methoden übergeben, in der Regel der Benutzercode nach einer asynchronen Aufgabe.

<code>var userAgent = new UserAgent;

// 獲取器，用于從所有產(chǎn)品中檢索注釋
userAgent.getComments();

// 用于打亂所有產(chǎn)品順序的操作
userAgent.shuffleProducts();
</code>

Ereignisse haben ein gro?es Potenzial. Sie ?hneln Callbacks, au?er dass das Hinzufügen von Ereignishandlern keine Aktionen ausl?sen sollte. Ereignisse werden normalerweise verwendet, um Ereignisse anzuzeigen (Sie haben vielleicht erraten)! Genau wie bei einem Rückruf k?nnen Sie zus?tzliche Informationen und Rückgabewerte bereitstellen, die die Bibliothek verwenden kann.

<code>var userAgent = new UserAgent;

userAgent.doAsyncThing(function asyncThingDone() {
  // 異步操作完成后運(yùn)行代碼
});
</code>

In einigen F?llen m?chten Sie Benutzern m?glicherweise erlauben, Ihre Bibliothek zu erweitern. Dazu k?nnen Sie eine ?ffentliche Methode oder Eigenschaft aufdecken, damit der Benutzer genauso wie das Angular -Modul (Angular.module ('MyModule') und JQuery's FN (jQuery.fn.myplugin) oder nichts tun, nur den Benutzern Zugriff erhalten, nur dann geben Sie den Benutzern nur Zugriff zum Namespace Ihrer Bibliothek:

<code>var userAgent = new UserAgent;

// 驗(yàn)證添加的產(chǎn)品
userAgent.on('product.add', function onProductAdd(e, product) {
  var shouldAddProduct = product.toString().length 
  // 告訴庫(kù)添加或不添加產(chǎn)品
  return shouldAddProduct;
});
</code>

Dies erm?glicht es Ihnen erneut, die Methode zu überschreiben.

<code>// AngryUserAgent 模塊
// 可以訪問(wèn)UserAgent命名空間
(function AngryUserAgent(UserAgent) {

  // 創(chuàng)建新的方法 .toAngryString()
  UserAgent.prototype.toAngryString = function() {
    return this.toString().toUpperCase();
  };

})(UserAgent);

// 應(yīng)用程序代碼
var userAgent = new UserAgent;
// ...

// EVILCORPBROWSER/1.2 (X11; LINUX; EN-US) BLINK/20420101
userAgent.toAngryString();
</code>

Im letzteren Fall k?nnen Benutzer auf den Namespace Ihrer Bibliothek zugreifen, um Ihre Kontrolle darüber zu reduzieren, wie die Erweiterungen/Plugins definiert werden. Um sicherzustellen, dass die Erweiterung bestimmten Konventionen folgt, k?nnen (und sollten) Dokumentation (und sollte).

<code>// AngryUserAgent 模塊
(function AngryUserAgent(UserAgent) {

  // 存儲(chǔ)舊的 .toString() 方法以供以后使用
  var _toString = UserAgent.prototype.toString;

  // 覆蓋 .toString()
  UserAgent.prototype.toString = function() {
    return _toString.call(this).toUpperCase();
  };

})(UserAgent);

var userAgent = new UserAgent;
// ...

// EVILCORPBROWSER/1.2 (X11; LINUX; EN-US) BLINK/20420101
userAgent.toString();
</code>

Test

Eine übersicht schreiben ist ein guter Start für die testgetriebene Entwicklung. Kurz gesagt, dies ist der Standard, um Testformulare zu schreiben, bevor Sie die eigentliche Bibliothek schreiben. Wenn diese Tests überprüfen, ob sich eine Funktion wie erwartet verh?lt und Sie diese Tests vor dem Schreiben der Bibliothek geschrieben haben, wird die Strategie als verhaltensgetriebene Entwicklung bezeichnet. Wenn Ihre Tests jede Funktion in der Bibliothek abdecken und Ihr Code alle Tests besteht, k?nnen Sie sicher davon ausgehen, dass Ihre Bibliothek funktionieren kann.

Jani Hartikainen erkl?rt, wie man Unit -Tests in "Verwenden von Mokka und Chai für Unit -Testen Ihres JavaScript" schreibt. Tim Evko zeigt in "Testen von JavaScript mit Jasmine, Travis und Karma", wie man eine gro?artige Testpipeline mit einem anderen Rahmen namens Jasmine aufstellt. Diese beiden Testframeworks sind sehr beliebt, aber es gibt viele andere Arten von Frameworks.

Die Zusammenfassung, die ich früher in diesem Artikel erstellt habe, hat die erwartete Ausgabe kommentiert. Hier beginnen alle Tests: Beginnen Sie mit den Erwartungen. Jasmin -Tests für meine Bibliothek sind wie folgt:

<code>// 以空的UserAgent字符串開(kāi)始
var userAgent = new UserAgent;

// 創(chuàng)建并添加第一個(gè)產(chǎn)品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);

// 創(chuàng)建并添加第二個(gè)產(chǎn)品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);

// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101
userAgent.toString();

// 對(duì)引擎產(chǎn)品進(jìn)行更多更改
engine.setComment('Hello World');

// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101 (Hello World)
userAgent.toString();
</code>

Sobald Sie mit der ersten Version des API -Designs vollst?ndig zufrieden sind, ist es Zeit, über die Architektur nachzudenken und wie Ihre Bibliothek verwendet wird.

Modulladerkompatibilit?t

Sie k?nnen Modullader verwenden oder nicht. Entwickler, die Ihre Bibliothek implementieren, k?nnen sie jedoch verwenden. Sie m?chten, dass Ihre Bibliothek mit dem Modullader kompatibel ist. Aber welcher? Wie w?hlen Sie zwischen CommonJs, fordertJs, AMD und anderen Modulladern?

Eigentlich müssen Sie nicht w?hlen! Universal Modul Definition (UMD) ist eine weitere Strategie, die mehrere Modullader unterstützt. Sie k?nnen verschiedene Versionen von Code -Snippets online finden und verschiedene Versionen von UMD im UMD -Github -Repository finden, um Ihre Bibliothek mit UMD kompatibel zu machen. Starten Sie Ihre Bibliothek mit einem der Vorlagen oder fügen Sie UMD mit Ihrem bevorzugten Build -Tool hinzu, und Sie müssen sich keine Sorgen um Modullader machen.

Wenn Sie ES2015 -Import-/Exportsyntax verwenden m?chten, empfehle ich dringend, Babel zu ES5 zu kompilieren, kombiniert mit Babels UMD -Plugin. Auf diese Weise k?nnen Sie ES2015 in Ihrem Projekt verwenden und gleichzeitig Bibliotheken generieren, die für alle geeignet sind.

Dokument

Ich bin v?llig für eine gründliche Dokumentation aller Projekte, aber dies wird oft als viel Arbeit angesehen, verz?gert und schlie?lich vergessen.

Grundlegende Informationen

Dokumentation sollte immer mit grundlegenden Informationen wie Projektnamen und Beschreibung beginnen. Dies wird anderen helfen, die Funktionalit?t Ihrer Bibliothek zu verstehen und ob sie für sie funktioniert.

Sie k?nnen zus?tzliche Informationen wie Umfang und Ziele bereitstellen, um Benutzer besser zu informieren, sowie eine Roadmap, damit sie wissen, was in Zukunft passieren wird oder wie sie einen Beitrag leisten k?nnen.

API, Tutorials und Beispiele

Natürlich müssen Sie den Benutzer wissen, wie sie Ihre Bibliothek verwenden. Dies beginnt mit der API -Dokumentation. Tutorials und Beispiele sind gro?artige Erg?nzungen, aber das Schreiben dieser diese kann viel Arbeit erfordern. Dies ist jedoch bei Inline -Dokumentation nicht der Fall. Dies sind Kommentare, die unter Verwendung von JSDOC an eine Dokumentseite analysiert und konvertiert werden k?nnen.

metaquest

Einige Benutzer m?chten m?glicherweise Ihre Bibliothek ?ndern. In den meisten F?llen dient dies zum Beitrag, aber einige Leute m?chten m?glicherweise eine benutzerdefinierte Version für den privaten Gebrauch erstellen. Für diese Benutzer sind Dokumente, die Metatasks enthalten, nützlich, z.

Beitrag

Beitrag ist sehr wichtig, wenn Sie Ihre Bibliothek er?ffnen. Um die Mitwirkenden zu leiten, k?nnen Sie ihnen Dokumentation hinzufügen und die Schritte für den Beitrag und die Kriterien erl?utern, die sie erfüllen sollten. Dies erleichtert es Ihnen, Beitr?ge zu überprüfen und zu akzeptieren und ihnen den richtigen Beitrag zu leisten.

limit

Last but not least geben Sie bitte eine Lizenz an. Wenn Sie sich technisch dafür entscheiden, keine Lizenz einzuschlie?en, ist sie noch urheberrechtlich geschützt, aber nicht jeder wei? das.

Ich fand ChooseAlicense.com eine gro?artige Ressource für Sie, um eine Lizenz zu w?hlen, ohne ein Rechtsexperte zu werden. Speichern Sie nach der Auswahl einer Lizenz den Text einfach in der lizenz.txt -Datei im Stammverzeichnis des Projekts.

Pack und fügen Sie einen Bogen hinzu

Versioning ist für eine gute Bibliothek unerl?sslich. Wenn Sie sich für eine signifikante ?nderung entscheiden, m?chten Benutzer m?glicherweise die für sie geeignete Version verwenden.

Die aktuellen De -facto -Versionsnamenkriterien sind semantische Versionskontrolle oder Semver. Die SEMVER -Version besteht aus drei Zahlen, die jeweils eine andere ?nderung darstellen: die prim?ren, minderj?hrigen und Patch -Versionen.

Fügen Sie Ihrem Git -Repository eine Version/Version hinzu

Wenn Sie ein Git -Repository haben, k?nnen Sie dem Repository eine Versionsnummer hinzufügen. Sie k?nnen sie als Schnappschüsse des Repositorys vorstellen. Wir nennen es ein Etikett. Um ein Tag zu erstellen, ?ffnen Sie ein Terminal und tippen Sie:

<code>// 以空的UserAgent字符串開(kāi)始
var userAgent = new UserAgent;

// 創(chuàng)建并添加第一個(gè)產(chǎn)品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);

// 創(chuàng)建并添加第二個(gè)產(chǎn)品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);

// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101
userAgent.toString();

// 對(duì)引擎產(chǎn)品進(jìn)行更多更改
engine.setComment('Hello World');

// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101 (Hello World)
userAgent.toString();
</code>

Viele Dienste (wie Github) bieten einen überblick über alle Versionen und einen Download -Link für jede Version.

zu ?ffentlichem Repository ver?ffentlichen

npm

Viele Programmiersprachen werden mit Paketmanagern geliefert, oder Paketmanager von Drittanbietern k?nnen verwendet werden. Diese erm?glichen es uns, Bibliotheken speziell für diese Sprachen vorzustellen. Zum Beispiel der Komponist von PHP und Ruby's Rubygemems.

node.js (eine eigenst?ndige JavaScript -Engine) wird mit NPM ausgestattet. Wenn Sie mit NPM nicht vertraut sind, haben wir einen gro?en Anf?ngerführer.

standardm??ig wird Ihr NPM -Paket ?ffentlich ver?ffentlicht. Mach dir keine Sorgen! Sie k?nnen auch private Pakete ver?ffentlichen, private Registrierung einrichten oder vermeiden, insgesamt zu ver?ffentlichen.

Um Ihr Paket zu ver?ffentlichen, ben?tigt Ihr Projekt eine Paket.json -Datei. Sie k?nnen dies manuell tun oder den interaktiven Assistenten verwenden. Um den Assistenten zu starten, tippen Sie:

<code>// 在初始化時(shí)配置
var userAgent = new UserAgent({
  commentSeparator: ';'
});

// 使用公共方法進(jìn)行運(yùn)行時(shí)配置
userAgent.setOption('commentSeparator', '-');

// 使用公共屬性進(jìn)行運(yùn)行時(shí)配置
userAgent.commentSeparator = '-';
</code>

Das

-Versionsattribut sollte mit Ihrem Git -Tag übereinstimmen. Stellen Sie au?erdem sicher, dass Sie die LEADME.MD -Datei haben. Genau wie GitHub verwendet NPM es als eine Seite, die Ihr Paket macht.

Nach

k?nnen Sie Ihr Paket ver?ffentlichen, indem Sie den folgenden Befehl eingeben:

<code>var userAgent = new UserAgent;

// 獲取器，用于從所有產(chǎn)品中檢索注釋
userAgent.getComments();

// 用于打亂所有產(chǎn)品順序的操作
userAgent.shuffleProducts();
</code>

Das ist es! Sie haben Ihr NPM -Paket gepostet.

bower

Vor einigen Jahren erschien ein weiterer Paketmanager namens Bower. Dieser Paketmanager ist jedoch nicht für eine bestimmte Sprache ausgelegt, sondern für eine bestimmte Plattform-Web. Dort finden Sie alle wichtigen Front-End-Ressourcen. Es ist nur sinnvoll, Ihr Paket auf Bower zu ver?ffentlichen, wenn Ihre Bibliothek mit dem Browser kompatibel ist.

Wenn Sie mit Bower nicht vertraut sind, haben wir auch einen Anf?ngerführer.

Wie NPM k?nnen Sie auch ein privates Repository einrichten. Sie k?nnen es auch verhindern, dass es vollst?ndig im Assistenten ver?ffentlicht wird.

Interessanterweise scheinen sich viele Menschen in den letzten oder zwei Jahren an NPM für Front-End-Ressourcen zuzuwenden. Obwohl das NPM-Paket haupts?chlich JavaScript ist, werden auch viele Front-End-Pakete auf NPM ver?ffentlicht. In jedem Fall ist Bower immer noch sehr beliebt, daher empfehle ich auf jeden Fall, dass Sie Ihr Paket auch für Bower posten.

Habe ich erw?hnt, dass Bower tats?chlich ein NPM -Modul ist und zun?chst davon inspiriert wurde? Der Befehl

ist sehr ?hnlich. Zum Generieren von Bower.json -Datei tippen Sie:

Genau wie bei NPM init ist die Erkl?rung selbsterkl?rend. Ver?ffentlichen Sie schlie?lich Ihr Paket:

<code>// 以空的UserAgent字符串開(kāi)始
var userAgent = new UserAgent;

// 創(chuàng)建并添加第一個(gè)產(chǎn)品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);

// 創(chuàng)建并添加第二個(gè)產(chǎn)品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);

// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101
userAgent.toString();

// 對(duì)引擎產(chǎn)品進(jìn)行更多更改
engine.setComment('Hello World');

// EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101 (Hello World)
userAgent.toString();
</code>

Sie haben Ihre Bibliothek im Internet gepostet, damit alle ihre Knotenprojekte und/oder im Web verwenden k?nnen!

<code>// 在初始化時(shí)配置
var userAgent = new UserAgent({
  commentSeparator: ';'
});

// 使用公共方法進(jìn)行運(yùn)行時(shí)配置
userAgent.setOption('commentSeparator', '-');

// 使用公共屬性進(jìn)行運(yùn)行時(shí)配置
userAgent.commentSeparator = '-';
</code>

Schlussfolgerung

Das Kernprodukt ist die Bibliothek. Stellen Sie sicher, dass es das Problem l?st, einfach zu bedienen und stabil ist, und Sie werden Ihr Team oder viele Entwickler sehr glücklich machen.

Viele der von mir erw?hnten Aufgaben sind einfach zu automatisieren, z. B. Tests, das Erstellen von Tags, das Aktualisieren von Versionen in package.json und die Neuvermittlung Ihrer Pakete bei NPM und Bower. Hier gelangen Sie in den Bereich der kontinuierlichen Integration und verwenden Tools wie Travis CI oder Jenkins. Ich habe früher erw?hnt, dass auch Tim Evkos Artikel dies berührt.

Haben Sie die Bibliothek erstellt und ver?ffentlicht? Bitte teilen Sie den Kommentarbereich unten mit!

h?ufig gestellte Fragen (FAQ) zum Entwerfen und Erstellen Ihrer eigenen JavaScript -Bibliothek

Was sind die Vorteile der Erstellung meiner eigenen JavaScript -Bibliothek?

Erstellen Ihrer eigenen JavaScript -Bibliothek hat viele Vorteile. Erstens k?nnen Sie Code in mehreren Projekten wiederverwenden und langfristig Zeit und Mühe sparen. Zweitens kann es Ihnen helfen, Ihren Code strukturierter und lesbarer zu organisieren. Dies ist besonders nützlich, wenn Sie an gro?en Projekten arbeiten oder mit anderen Entwicklern zusammenarbeiten. Schlie?lich kann das Erstellen einer eigenen Bibliothek eine gro?artige Lernerfahrung sein, mit der Sie Ihr Verst?ndnis der Prinzipien von JavaScript und Softwareentwicklung vertiefen k?nnen.

Wie fange ich an, JavaScript -Bibliotheken zu erstellen?

Der erste Schritt bei der Erstellung einer JavaScript -Bibliothek besteht darin, ihren Zweck zu definieren. Welche Funktionalit?t soll Ihre Bibliothek bereitstellen? Sobald Sie ein klares Verst?ndnis dafür haben, was Ihre Bibliothek tun soll, k?nnen Sie mit dem Schreiben von Code beginnen. Dies beinhaltet normalerweise die Definition einer Reihe von Funktionen, die die erforderlichen Funktionen liefern. Diese Funktionen werden dann durch ?ffentliche APIs entlarvt, die andere Entwickler verwenden k?nnen.

Wie teste ich meine JavaScript -Bibliothek?

Tests ist ein wesentlicher Bestandteil der Entwicklung von JavaScript -Bibliotheken. Mehrere JavaScript -Test -Frameworks sind verfügbar, wie Scherz, Mokka und Jasmine. Mit diesen Frameworks k?nnen Sie Unit -Tests für Ihre Funktionen schreiben und sicherstellen, dass sie wie erwartet funktionieren. Zus?tzlich zu Unit -Tests müssen Sie m?glicherweise Integrationstests schreiben, um zu überprüfen, ob verschiedene Teile der Bibliothek zusammenarbeiten.

Wie zeichne ich meine JavaScript -Bibliothek auf?

Gute Dokumentation ist für jede Softwarebibliothek unerl?sslich. Es hilft anderen Entwicklern zu verstehen, wie Sie Ihre Bibliothek verwenden und was jede Funktion macht. Sie sollten eine detaillierte Beschreibung jeder Funktion in der Bibliothek enthalten, einschlie?lich Eingabe, Ausgabe und Nebenwirkungen. Sie k?nnen auch Tools wie JSDOC verwenden, um automatisch Dokumente basierend auf Code -Kommentaren zu generieren.

Wie verteile ich meine JavaScript -Bibliothek?

Es gibt mehrere M?glichkeiten, JavaScript -Bibliotheken zu verteilen. Ein allgemeiner Weg ist es, es an einen Paketmanager wie NPM zu ver?ffentlichen. Auf diese Weise k?nnen andere Entwickler Ihre Bibliothek einfach mit einfachen Befehlen installieren. Sie k?nnen Ihre Bibliothek auch verteilen, indem Sie sie auf einem CDN (Content Distribution Network) hosten oder einen Download -Link auf Ihrer Website bereitstellen.

Wie pflege ich meine JavaScript -Bibliothek?

Die Wartung von JavaScript -Bibliotheken umfasst das Fixieren von Fehler, das Hinzufügen neuer Funktionen und das Inhalt der Bibliothek mit den neuesten JavaScript -Standards und -Praktiken. Es ist wichtig, Ihre Bibliothek regelm??ig zu testen und Benutzer -Feedback zu h?ren. Sie k?nnen auch in Betracht ziehen, Ihre Bibliothek zu verstellen, damit Benutzer eine stabile Version oder eine neueste Version mit neuen Funktionen verwenden k?nnen.

Wie stelle ich sicher, dass meine JavaScript -Bibliothek effizient ist?

Um sicherzustellen, dass Ihre JavaScript -Bibliothek effizient ist, sollten Sie sich darauf konzentrieren, pr?gnante und klare Code zu schreiben. Vermeiden Sie unn?tige Berechnungs- und Speicherzuweisung. Verwenden Sie Tools wie Chrome Devtools, um Ihre Bibliothek zu analysieren und alle Leistungs Engp?sse zu identifizieren. Sie k?nnen auch in Betracht ziehen, Ihre Bibliothek zu komprimieren, um die Dateigr??e zu verkürzen und die Ladezeit zu erh?hen.

Wie mache ich meine JavaScript -Bibliothek mit verschiedenen Browsern kompatibel?

Da jeder Browser JavaScript unterschiedlich interpretiert, kann die Sicherstellung der Browserkompatibilit?t eine Herausforderung sein. Sie k?nnen Tools wie Babel verwenden, um Ihren Code in eine JavaScript -Version zu konvertieren, die mit ?lteren Browsern kompatibel ist. Sie sollten Ihre Bibliothek auch in verschiedenen Browsern testen, um Kompatibilit?tsprobleme zu identifizieren und zu beheben.

Wie gehe ich in der JavaScript -Bibliothek um?

Fehlerbehebung ist ein wichtiger Bestandteil der Entwicklung von JavaScript -Bibliotheken. Sie sollten sich bemühen, klare und hilfreiche Fehlermeldungen bereitzustellen, damit Benutzer verstehen, was falsch ist. Sie k?nnen den Try/Catch -Block verwenden, um Fehler zu fangen und zu behandeln. Sie k?nnen auch in Betracht ziehen, die Benutzer Fehler und Probleme melden zu lassen.

Wie bekomme ich Feedback zu meiner JavaScript -Bibliothek?

Es gibt verschiedene M?glichkeiten, um Feedback zu Ihrer JavaScript -Bibliothek zu erhalten. Sie k?nnen andere Entwickler bitten, Ihren Code zu überprüfen, Ihre Bibliothek in Foren oder sozialen Medien zu ver?ffentlichen oder ihn an einen Paketmanager wie NPM zu ver?ffentlichen und Feedback zu suchen. Sie sollten offen für Kritik sein und bereit sein, ?nderungen auf der Grundlage des von Ihnen erhaltenen Feedbacks vorzunehmen.

Das obige ist der detaillierte Inhalt vonEntwerfen und erstellen Sie Ihre eigene JavaScript -Bibliothek: Tipps & Tricks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!