Entwerfen und erstellen Sie Ihre eigene JavaScript -Bibliothek: Tipps & Tricks

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.

Christ Church Church Library (Quelle)

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字符串开始
var userAgent = new UserAgent;

// 创建并添加第一个产品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);

// 创建并添加第二个产品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);

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

// 对引擎产品进行更多更改
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>// 在初始化时配置
var userAgent = new UserAgent({
  commentSeparator: ';'
});

// 使用公共方法进行运行时配置
userAgent.setOption('commentSeparator', '-');

// 使用公共属性进行运行时配置
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;

// 获取器，用于从所有产品中检索注释
userAgent.getComments();

// 用于打乱所有产品顺序的操作
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() {
  // 异步操作完成后运行代码
});
</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;

// 验证添加的产品
userAgent.on('product.add', function onProductAdd(e, product) {
  var shouldAddProduct = product.toString().length 
  // 告诉库添加或不添加产品
  return shouldAddProduct;
});
</code>

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

<code>// AngryUserAgent 模块
// 可以访问UserAgent命名空间
(function AngryUserAgent(UserAgent) {

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

})(UserAgent);

// 应用程序代码
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) {

  // 存储旧的 .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字符串开始
var userAgent = new UserAgent;

// 创建并添加第一个产品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);

// 创建并添加第二个产品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);

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

// 对引擎产品进行更多更改
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字符串开始
var userAgent = new UserAgent;

// 创建并添加第一个产品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);

// 创建并添加第二个产品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);

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

// 对引擎产品进行更多更改
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>// 在初始化时配置
var userAgent = new UserAgent({
  commentSeparator: ';'
});

// 使用公共方法进行运行时配置
userAgent.setOption('commentSeparator', '-');

// 使用公共属性进行运行时配置
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;

// 获取器，用于从所有产品中检索注释
userAgent.getComments();

// 用于打乱所有产品顺序的操作
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字符串开始
var userAgent = new UserAgent;

// 创建并添加第一个产品：EvilCorpBrowser/1.2 (X11; Linux; en-us)
var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application);

// 创建并添加第二个产品：Blink/20420101
var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine);

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

// 对引擎产品进行更多更改
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>// 在初始化时配置
var userAgent = new UserAgent({
  commentSeparator: ';'
});

// 使用公共方法进行运行时配置
userAgent.setOption('commentSeparator', '-');

// 使用公共属性进行运行时配置
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!