Entwerfen und erstellen Sie Ihre eigene JavaScript-Codebasis: Tipps und Tricks

Codebasis: Wir verwenden sie ständig. In Codebibliotheken verpacken Entwickler den Code, den sie in ihren Projekten verwenden, was immer Zeit spart und vermeidet, das Rad neu erfinden zu müssen. Ein wiederverwendbares Paket zu haben, egal ob Open Source oder Closed Source, ist besser, als immer wieder Pakete mit denselben Funktionen zu erstellen oder aus früheren Projekten manuell zu kopieren und einzufügen.

Weitere Artikel des Autors

• Stoppt die Verstümmelung von Körpern: Die Gefahren der Pixelschriftgröße

• ES2016: Sollte die Zukunft von JavaScript entwicklergesteuert sein?

Kann zusätzlich zum gepackten Code die Codebasis genauer beschrieben werden? Mit wenigen Ausnahmen besteht eine Codebasis normalerweise nur aus einer Datei oder aus mehreren Dateien im selben Ordner. Sein Code sollte separat gespeichert und normal in Ihrem Projekt verwendet werden können. Mit Bibliotheken können Sie die Struktur oder das Verhalten je nach Projekt anpassen. Stellen Sie sich ein USB-Gerät vor, das nur über die USB-Schnittstelle kommuniziert. Einige Geräte wie Mäuse und Tastaturen können über die vom Gerät bereitgestellten Schnittstellen konfiguriert werden.

In diesem Artikel erkläre ich, wie man die Bibliotheksdatei erstellt. Obwohl die meisten Methoden auf andere Sprachen anwendbar sind, konzentriert sich dieser Artikel auf den Aufbau von JavaScript-Bibliotheken.

Warum eine eigene Javascript-Bibliothek erstellen?

Bibliotheksdateien ermöglichen in erster Linie die einfache Wiederverwendung von vorhandenem Code. Sie müssen nicht das alte Projekt ausgraben, um die Dateien zu kopieren, sondern bringen einfach die Bibliotheksdateien ein. Dadurch können Sie Ihre Anwendung auch in Komponenten aufteilen, wodurch die Codebasis Ihrer Anwendung kleiner und einfacher zu warten ist.

Christ Church Library (Quelle)

Jeder abstrakte Code, der die Implementierung einer bestimmten Funktion erleichtert oder wiederverwendet werden kann, kann in eine Bibliothek gepackt werden Datei. jQuery ist ein interessantes Beispiel. Obwohl die API von jQuery über eine große Anzahl vereinfachter DOM-APIs verfügt, war sie in der Vergangenheit von erheblicher Bedeutung, als browserübergreifende DOM-Operationen schwierig waren.

Wenn ein Open-Source-Projekt populär wird und von vielen Entwicklern genutzt wird, besteht eine gute Chance, dass sich Menschen an seiner Entwicklung beteiligen, indem sie Fragen stellen oder Code beisteuern. In jedem Fall hilft es der Bibliothek und den davon abhängigen Projekten.

Eine beliebte Open-Source-Bibliothek wird auch große Chancen mit sich bringen. Möglicherweise erkennt das Unternehmen die Qualität Ihrer Arbeit an und unterbreitet Ihnen ein Angebot. Möglicherweise wird das Unternehmen Sie bitten, Ihr Projekt in seine Anwendung zu integrieren. Schließlich kennt niemand Ihr Projekt besser als Sie.

Natürlich kann es auch nur eine Gewohnheit sein – es macht Spaß, zu tippen, anderen zu helfen und dabei zu lernen und zu wachsen. Du kannst an deine Grenzen gehen und Neues ausprobieren.

Umfang und Ziele

Bevor Sie Ihre erste Codezeile schreiben, müssen Sie bestimmen, was Ihre Bibliothek tut – Sie müssen ein Ziel festlegen. Mit diesem Ziel können Sie sich auf das Problem konzentrieren, das Sie mit dieser Bibliothek lösen möchten. Bedenken Sie, dass die ursprüngliche Form Ihrer Codebasis einfacher zu verwenden und bei der Lösung von Problemen zu merken ist. Je einfacher die API, desto einfacher ist es für Benutzer, Ihre Codebasis zu erlernen. Stellen Sie eine Unix-Designphilosophie vor:

Machen Sie eine Sache und machen Sie sie gut

Fragen Sie sich: Welches Problem löst Ihre Codebasis? Wie werden Sie es lösen? Machen Sie alles alleine oder bringen Sie die Codebasis einer anderen Person ein?

Egal wie groß Ihre Codebasis ist, versuchen Sie, eine Roadmap zu erstellen. Erstellen Sie eine Liste aller gewünschten Funktionen und zerlegen Sie diese in so viele Teile wie möglich, bis Sie eine kleine, aber problemlösende Codebasis haben, die einem Minimum Viable Product gleicht. Dies wird Ihre erste Version sein. Von hier aus können Sie Meilensteine ​​für jede neue Funktion festlegen. Im Wesentlichen verwandeln Sie Ihr Projekt in Codeblöcke auf Bitebene, wodurch jede Funktion besser und interessanter funktioniert. Vertrauen Sie mir, das wird Sie in guter Form halten.

API-Design

Meiner Meinung nach möchte ich meine Codebasis aus der Sicht des Benutzers entwickeln. Man könnte es benutzerzentriertes Design nennen. Im Wesentlichen erstellen Sie einen Überblick über Ihre Codebasis, geben ihm mehr Gedanken und machen ihn für diejenigen, die ihn auswählen, einfacher zu verwenden. Gleichzeitig müssen Sie darüber nachdenken, wo Sie Anpassungen benötigen, worauf später in diesem Artikel eingegangen wird.

Der ultimative API-Test besteht darin, Ihre eigenen Techniken auszuprobieren und Ihre Codebasis in Ihrem Projekt zu verwenden. Ersetzen Sie den vorherigen Code durch Ihren eigenen und prüfen Sie, ob er die gewünschten Funktionen erfüllt. Versuchen Sie, Ihre Codebasis so intuitiv wie möglich zu gestalten, damit sie in Randbedingungen flexibler einsetzbar und anpassbar ist (mehr dazu in einem späteren Artikel).

Hier ist ein Überblick darüber, wie eine Codebasis für User-Agent-Strings aussehen könnte:

// Start with empty UserAgent string var userAgent = new UserAgent; 
// Create and add first product: EvilCorpBrowser/1.2 (X11; Linux; en-us) var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
application.setComment('X11', 'Linux', 'en-us');
userAgent.addProduct(application); // Create and add second product: Blink/20420101 var engine = new UserAgent.Product('Blink', '20420101');
userAgent.addProduct(engine); // EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101 userAgent.toString(); 
// Make some more changes to engine product engine.setComment('Hello World'); // EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101 (Hello World) userAgent.toString();

Abhängig von der Komplexität Ihres Codes werden Sie einige Zeit möglicherweise viel Zeit in die Organisationsstruktur investieren . Die Verwendung von Entwurfsmustern ist eine großartige Möglichkeit, Ihre Codebasis zu organisieren und kann sogar einige technische Probleme lösen. Dadurch wird auch ein umfangreiches Refactoring zum Hinzufügen neuer Funktionen vermieden.

Flexibilität und Anpassung

Flexibilität macht eine Codebasis leistungsstark, aber die Grenzen zwischen dem, was angepasst werden kann und was nicht, zu bestimmen, ist schwierig. chart.js und D3.js sind gute Beispiele. Beide Codebibliotheken werden zur Datenvisualisierung verwendet. Mit Chart.js können Sie ganz einfach integrierte Diagramme in verschiedenen Formen erstellen. Wenn Sie jedoch mehr Kontrolle über Bilder wünschen, ist D3.js genau das Richtige für Sie.

Es gibt mehrere Möglichkeiten, dem Benutzer die Kontrolle zu geben: Konfiguration, Offenlegung öffentlicher Methoden, durch Rückrufe und Ereignisse.

Die Konfiguration der Codebasis erfolgt normalerweise vor der Initialisierung. In einigen Codebibliotheken können Sie Konfigurationen jedoch zur Laufzeit ändern. Konfigurationen sind normalerweise auf kleine Teile beschränkt und es ist nur erlaubt, ihre Werte für eine spätere Verwendung zu ändern.

// Configure at initialization var userAgent = new UserAgent({
  commentSeparator: ';' }); // Run-time configuration using a public method userAgent.setOption('commentSeparator', '-'); 
  // Run-time configuration using a public property userAgent.commentSeparator = '-';

方法通常是暴露给实例使用的，比如说从实例中获取数据，或者设置实例的数据和执行操作。

var userAgent = new UserAgent; // A getter to retrieve comments from all products userAgent.getComments(); 
// An action to shuffle the order of all products userAgent.shuffleProducts();

回调通常是在公共的方法中被传递的，通常在异步操作后执行用户的代码。

var userAgent = new UserAgent;

userAgent.doAsyncThing(function asyncThingDone() { // Run code after async thing is done });

事件有很多种可能。有点像回调，除了增加事件句柄是不应该触发操作的。事件通常用于监听，你可能会猜到，这可是事件！更像回调的是，你可以提供更多的信息和返回一个数值给代码库去进行操作。

var userAgent = new UserAgent; // Validate a product on addition userAgent.on('product.add', function onProductAdd(e, product) { 
var shouldAddProduct = product.toString().length < 5; // Tell the library to add the product or not return shouldAddProduct;
});

在一些例子中，你可能允许用户对你的代码库进行扩展。因此，你需要暴露一些公共方法或者属性来让用户填充，像Angular的模块 (angular.module('myModule'))和Jquery的 fn(jQuery.fn.myPlugin)或者什么都不做，只是简单的让用户获取你的代码库的命名空间：

// AngryUserAgent module // Has access to UserAgent namespace (function AngryUserAgent(UserAgent) { 
// Create new method .toAngryString() UserAgent.prototype.toAngryString = function() { return this.toString().toUpperCase();
  };

})(UserAgent); // Application code var userAgent = new UserAgent; // ... // EVILCORPBROWSER/1.2 (X11; LINUX; EN-US) BLINK/20420101 userAgent.toAngryString();

类似的，这允许你重写方法。

// AngryUserAgent module (function AngryUserAgent(UserAgent) { // Store old .toString() method for later use var _toString = UserAgent.prototype.toString; 
// Overwrite .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();

在后面的例子中，允许你的用户获取代码库的命名空间，让你在对扩展和插件的定义方面上的控制变小了。为了让插件遵循一些约定，你可以（或者是应该）写下文档。

测试

对测试驱动开发（test-driven development）来 说，写下大纲是良好的开始。简单来说，指的是在你写实际的代码库之前，在你写下测试准则的时候。如果测试检查的是你的代码特性是否跟期待的一样，以及你在 写代码库之前写测试，这就是行为驱动开发。不管怎样，如果你的测试覆盖了你的代码库的每一个特性，而且你的代码通过了所有的测试。你可以确定你的代码是可 以正常工作的。

Jani Hartikainen讲述了如何利用Mocha来进行单元测试 Unit Test Your JavaScript Using Mocha and Chai。在使用Jsmine，Travis，Karma测试JavaScript （Testing JavaScript with Jasmine, Travis, and Karma）这篇文章中，Tim Evko展示了怎么通过另一个叫做Jasmine的框架来设置良好的测试流程。这两个测试框架都是非常流行的，但还有适应别的需求的其他框架。

我在这篇文章前面撰写的大纲，已经讲述了它期待怎样的输出。这是一切测试的开始：从期望出发。关于我的代码库的一个Jasmine测试像是这样：

describe('Basic usage', function () {
  it('should generate a single product', function () { // Create a single product var product = new UserAgent.Product('EvilCorpBrowser', '1.2');
    product.setComment('X11', 'Linux', 'en-us');

    expect(product.toString())
      .toBe('EvilCorpBrowser/1.2 (X11; Linux; en-us)');
  });

  it('should combine several products', function () { var userAgent = new UserAgent; 
  // Create and add first product var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
    application.setComment('X11', 'Linux', 'en-us');
    userAgent.addProduct(application); // Create and add second product var engine = new UserAgent.Product('Blink', '20420101');
    userAgent.addProduct(engine);

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

  it('should update products correctly', function () { var userAgent = new UserAgent; 
  // Create and add first product var application = new UserAgent.Product('EvilCorpBrowser', '1.2');
    application.setComment('X11', 'Linux', 'en-us');
    userAgent.addProduct(application); // Update first product application.setComment('X11', 'Linux', 'nl-nl');

    expect(userAgent.toString())
      .toBe('EvilCorpBrowser/1.2 (X11; Linux; nl-nl)');
  });
});

一旦你对你的API设计的第一个版本完全满意，是时候开始思考结构和你的代码库应该如何被使用。

模块加载器兼容性

你或许使用过模块加载器。使用你的代码库的开发者有可能使用加载器，所以你会希望自己的代码库与模块加载器是兼容的。但兼容哪一个呢？应该怎么从CommonJS，RequireJS，AMD和其他加载器中挑选呢？

Eigentlich müssen Sie sich nicht entscheiden! Universal Module Definition (UMD) ist eine Regel, deren Ziel darin besteht, mehrere Lader zu unterstützen. Sie können Snippets verschiedener Stile online finden oder aus dem UMD-GitHub-Repository lernen und es mit Ihrer Codebasis kompatibel machen. Beginnen Sie mit einer dieser Vorlagen oder fügen Sie UMD mit Ihrem bevorzugten Build-Tool hinzu, und Sie müssen sich nicht mehr um den Modullader kümmern.

Wenn Sie die Import-/Exportsyntax von ES2015 verwenden möchten, empfehle ich die Verwendung von Babel und dem UMD-Plugin von Babel, um Ihren Code in ES5 zu konvertieren. Auf diese Weise können Sie ES2015 in Ihrem Projekt verwenden und gleichzeitig eine kompatible Codebasis generieren.

Dokumentation

Ich bin dafür, bei jedem Projekt Dokumentation zu verwenden. Dies ist jedoch oft mit viel Arbeit verbunden, was dazu führt, dass das Schreiben von Dokumenten verzögert wird und schließlich vergessen wird.

Grundlegende Informationen

Das Schreiben des Dokuments sollte mit grundlegenden Informationen wie dem Namen und der Beschreibung des Projekts beginnen. Dies hilft anderen zu verstehen, was Ihre Codebasis tut und ob sie für sie nützlich ist.

Sie können Informationen wie Umfang und Ziele bereitstellen, um Benutzer besser zu informieren, und eine Roadmap bereitstellen, damit sie verstehen, welche neuen Änderungen in der Zukunft möglich sind und was sie helfen können.

API, Tutorials und Beispiele

Natürlich müssen Sie sicherstellen, dass Benutzer wissen, wie sie Ihre Codebasis verwenden. Dies beginnt mit der API-Dokumentation. Tutorials und Beispiele sind tolle Ergänzungen, aber sie zu schreiben kann eine riesige Aufgabe sein. Bei der Inline-Dokumentation ist dies jedoch nicht der Fall. Hier sind einige Kommentare, die mithilfe von JSDoc analysiert und in Dokumentationsseiten umgewandelt werden können.

Metaaufgaben

Einige Benutzer möchten Verbesserungen an Ihrer Codebasis vornehmen. In den meisten Fällen handelt es sich dabei um beigesteuerten Code, einige erstellen jedoch auch eine benutzerdefinierte Version für den privaten Gebrauch. Für diese Benutzer ist es hilfreich, Dokumentation für Metaaufgaben wie den Aufbau der Codebasis, das Ausführen von Tests, das Generieren, Transformieren und Herunterladen von Daten bereitzustellen.

Beiträge

Wenn Sie Ihre Codebasis als Open Source veröffentlichen, ist es hilfreich, Codebeiträge zu erhalten. Um Mitwirkende anzuleiten, können Sie eine Dokumentation über die Schritte zum Beitragen von Code und die zu erfüllenden Kriterien hinzufügen. Dies wird Ihnen helfen, den beigesteuerten Code und den korrekten Beitragscode zu überprüfen und zu akzeptieren.

Lizenz

Letzter Punkt: Verwenden Sie eine Lizenz. Technisch gesehen ist Ihre Codebasis auch dann urheberrechtlich geschützt, wenn Sie keine Technologielizenz wählen, aber das weiß nicht jeder.

Ich habe herausgefunden, dass ChooseALicense.com eine Website ist, auf der Sie eine Lizenz auswählen können, ohne ein Rechtsexperte zu sein. Nachdem Sie die Lizenz ausgewählt haben, fügen Sie einfach die Datei LICENSE.txt zum Stammverzeichnis des Projekts hinzu.

将它打包和发布到包管理器

对一个好的代码库来说，版本是很重要的。如果你想要加入重大的变化，用户可能需要保留他们现在正在使用的版本。

Semantic Versioning是流行的版本命名标准，或者叫它SemVer。SemVer版本包括三个数字，每一个代表不同程度的改变：重大改变，微小的改变和补丁

在你的Git仓库加入版本和发布

如果你有一个git仓库，你可以在你的仓库添加版本数字。你可以把它想象成你的仓库的快照。我们也叫它标签 Tags。可以通过开启终端和输入下面的文字来创造标签：

# git tag -a [version] -m [version message]
git tag -a v1.2.0 -m "Awesome Library v1.2.0"

很多类似GitHub的服务会提供关于所有版本的概览和提供它们的下载链接。

发布一个通用仓库

npm

许多编程语言自带有包管理器，或者是第三方包管理器。这可以允许我们下载关于这些语言的特定代码库。比如PHP的Composer 和Ruby的RubyGems

Node.js,一种独立的JavaScript引擎，拥有 npm，如果你对npm不熟悉，我们有一个很好的教程beginner’s guide。

默认情况下，你的npm包会发布为公共包。不要害怕，你也可以发布私有包 private packages, 设置一个私有的注册private registry， 或者根本不发布avoid publishing.

为了发布你的包，你的项目需要有一个 package.json 文件。你可以手动或者交互问答的方式来创建。通过输入下面的代码来开始问答：

`npm init`

这个版本属性需要跟你的git标签吻合。另外，请确定有README.md 文件。像是GitHub，npm在你的包的展示页使用它。

之后，你可以通过输入下面的代码来发布你的包：

`npm publish`

就是这样！你已经成功发布了你的npm包。

Bower

几年前，有另一个叫做Bower的包管理器。这个包管理器，实际上不是为了特定的语言准备的，而是为了互联网准备的。你可以发现大部分是前端资源。在Bower发布你的包的关键一点是你的代码库是否跟它兼容。

如果你对Bower不熟悉，我们也有一个教程beginner’s guide 。

跟npm一样，你也可以设置一个私有仓库private repository。你可以通过问答的方式避免发布。

有趣的是，在最近的一两年，很多人转为使用npm管理前端资源。近段npm包主要是跟JavaScript相关，大部分的前端资源也发布在了npm上。不管怎样，Bower仍然流行。我明确的推荐你在Bower上发布你的包。

我有提到Bower实际上是npm的一种模块，并最初是得到它的启发吗？它们的命令是很相似的，通过输入下面的代码产生bower.json文件：

`bower init`

跟npm init类似，指令是很直白的，最后，发布你的包：

`bower register awesomelib http://www.php.cn/`

像是把你的代码库放到了野外，任何人可以在他们的Node项目或者网络上使用它！

总结

核心的产品是库文件。确定它解决了问题，容易和适合使用，你会使得你的团队或者许多开发者变得高兴。

我提到的很多任务都是自动化的，比如：运行测试，创建标签，在package.json升级版本或者在npm或者bower重发布你的包。 这是你像Travis CI 或 Jenkins一样踏入持续集成和使用工具的开始。我之前提到的文章 article by Tim Evko 也讲述到了这点。

你构建和发布代码库了吗？请在下面的评论区分享！

 

以上就是设计和构建你自己的JavaScript代码库：提示与技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！