構(gòu)建和發(fā)布你自己的JavaScript庫：一份詳盡指南

核心要點(diǎn)

• 明確目標(biāo): 在開始構(gòu)建庫之前，明確它要解決的具體問題，保持專注并確保其實(shí)用性。
• 以用戶為中心的API設(shè)計(jì): 以最終用戶為中心設(shè)計(jì)你的庫，使其簡(jiǎn)單易用，從而提高用戶采用率和滿意度。
• 靈活性和自定義: 通過配置、公共方法和事件處理提供自定義選項(xiàng)，以適應(yīng)不同的用戶需求。
• 測(cè)試和文檔: 使用Mocha或Jasmine等框架進(jìn)行徹底的測(cè)試，并確保提供全面的文檔以幫助理解和使用。
• 模塊加載器兼容性: 確保你的庫支持各種模塊加載器，方法是使用通用模塊定義 (UMD) 或類似方法來最大限度地提高兼容性。
• 版本控制和發(fā)布: 使用語義版本控制進(jìn)行更新，并將你的庫發(fā)布到npm或Bower等包管理器，以覆蓋更廣泛的受眾。

本文由Adrian Sandu、Vildan Softic和Dan Prince同行評(píng)審。感謝所有SitePoint的同行評(píng)審者，使SitePoint的內(nèi)容達(dá)到最佳狀態(tài)！

我們經(jīng)常使用庫。庫是打包好的代碼，開發(fā)人員可以在他們的項(xiàng)目中使用它，這無疑節(jié)省了工作量，并避免了重復(fù)造輪子。擁有可重用的包（無論是開源的還是閉源的）都比重建相同的功能或從過去的項(xiàng)目中手動(dòng)復(fù)制粘貼更好。

但除了打包的代碼之外，庫究竟是什么呢？除了一些例外情況外，庫應(yīng)該始終是一個(gè)文件，或者位于單個(gè)文件夾中的幾個(gè)文件。它的代碼應(yīng)該單獨(dú)維護(hù)，并在將其實(shí)現(xiàn)到項(xiàng)目中時(shí)保持不變。庫應(yīng)該允許你設(shè)置項(xiàng)目特定的配置和/或行為。把它想象成一個(gè)USB設(shè)備，它只允許通過USB端口進(jìn)行通信。一些設(shè)備，如鼠標(biāo)和鍵盤，允許通過設(shè)備提供的接口進(jìn)行配置。

在本文中，我將解釋庫是如何構(gòu)建的。盡管涵蓋的大部分主題都適用于其他語言，但這篇文章主要關(guān)注構(gòu)建JavaScript庫。

為什么構(gòu)建你自己的JavaScript庫？

首先，庫使現(xiàn)有代碼的重用非常方便。你無需挖掘舊項(xiàng)目并復(fù)制一些文件，只需引入庫即可。這還會(huì)使你的應(yīng)用程序碎片化，使應(yīng)用程序代碼庫更小，更容易維護(hù)。

如果一個(gè)開源項(xiàng)目變得流行起來，并且越來越多的開發(fā)者使用它，那么人們很可能會(huì)加入并通過提交問題或?yàn)榇a庫做出貢獻(xiàn)來幫助該項(xiàng)目。無論哪種方式，它都會(huì)使庫及其依賴它的所有項(xiàng)目受益。

一個(gè)流行的開源項(xiàng)目也可能帶來巨大的機(jī)會(huì)。一家公司可能會(huì)對(duì)你工作的質(zhì)量印象深刻，并提供給你一份工作。也許一家公司會(huì)要求你幫助將你的項(xiàng)目集成到他們的應(yīng)用程序中。畢竟，沒有人比你更了解你的庫。

對(duì)許多人來說，這僅僅是一種愛好——享受編寫代碼、幫助他人以及在此過程中學(xué)習(xí)和成長(zhǎng)的過程。你可以突破你的極限，嘗試新事物。

范圍和目標(biāo)

在編寫第一行代碼之前，應(yīng)該清楚你的庫的目的是什么——你必須設(shè)定目標(biāo)。有了它們，你可以專注于你希望用你的庫解決什么問題。記住，你的庫應(yīng)該比原始形式的問題更容易使用和記住。API越簡(jiǎn)單，用戶學(xué)習(xí)使用你的庫就越容易。引用Unix哲學(xué)：

只做一件事，并把它做好

問問你自己：你的庫解決了什么問題？你打算如何解決它？你會(huì)自己編寫所有內(nèi)容，還是可以使用其他人的庫？

無論庫的大小如何，都嘗試制定路線圖。列出你想要的所有功能，然后盡可能多地刪除功能，直到你擁有一個(gè)微小但功能齊全的庫，就像最小可行產(chǎn)品一樣。這將是你的第一個(gè)版本。從那里，你可以為每個(gè)新功能創(chuàng)建里程碑。本質(zhì)上，你將項(xiàng)目分解成小塊，使每個(gè)功能都更像一項(xiàng)成就，更令人愉快。相信我，這會(huì)讓你保持理智。

API設(shè)計(jì)

我個(gè)人非常喜歡從最終用戶的角度來處理我的庫。你可以稱之為以用戶為中心的設(shè)計(jì)。從本質(zhì)上講，你正在創(chuàng)建庫的概要，希望對(duì)其進(jìn)行更多思考，并使其對(duì)任何選擇使用它的人更方便。同時(shí)，你可以考慮哪些方面應(yīng)該是可自定義的，這將在本文后面討論。

最終的API質(zhì)量測(cè)試是吃自己的狗糧，在自己的項(xiàng)目中使用你的庫。嘗試用你的庫替換應(yīng)用程序代碼，看看它是否涵蓋了你想要的所有功能。嘗試使庫盡可能精簡(jiǎn)，同時(shí)使其足夠靈活，以便通過自定義（如本文后面所述）使其也適用于它們的極端情況。

以下是用戶代理字符串庫的實(shí)現(xiàn)或概要可能是什么樣子：

<code>// 以空的UserAgent字符串開始
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>

根據(jù)庫的復(fù)雜性，你可能還需要考慮結(jié)構(gòu)。利用設(shè)計(jì)模式是構(gòu)建庫或克服某些技術(shù)問題的絕佳方法。它還降低了在添加新功能時(shí)重構(gòu)大部分代碼的風(fēng)險(xiǎn)。

靈活性和自定義

使庫變得強(qiáng)大的東西是靈活性，但也很難在你可以自定義的內(nèi)容和不能自定義的內(nèi)容之間劃清界限。一個(gè)完美的例子是chart.js與D3.js。兩者都是可視化數(shù)據(jù)的優(yōu)秀庫。Chart.js使創(chuàng)建和設(shè)置不同類型的內(nèi)置圖表變得非常容易。但是，如果你需要更多地控制圖形，則需要使用D3.js。

有多種方法可以賦予用戶控制權(quán)：配置、公開公共方法以及通過回調(diào)和事件。

庫的配置通常在初始化期間完成，但一些庫允許你在運(yùn)行時(shí)修改選項(xiàng)。選項(xiàng)通常限于細(xì)枝末節(jié)，更改這些選項(xiàng)不應(yīng)該做任何事情，除了更新這些值以供以后使用。

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

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

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

可以公開方法來與實(shí)例交互，例如從實(shí)例檢索數(shù)據(jù)（getter），將數(shù)據(jù)放入實(shí)例（setter）以及執(zhí)行操作。

<code>var userAgent = new UserAgent;

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

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

回調(diào)有時(shí)會(huì)與公共方法一起傳遞，通常是在異步任務(wù)之后運(yùn)行用戶代碼。

<code>var userAgent = new UserAgent;

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

事件具有很大的潛力。它們類似于回調(diào)，除了添加事件處理程序不應(yīng)該觸發(fā)操作。事件通常用于指示（你可能猜到了）事件！就像回調(diào)一樣，你可以提供其他信息并返回庫可以使用的值。

<code>var userAgent = new UserAgent;

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

在某些情況下，你可能希望允許用戶擴(kuò)展你的庫。為此，你可以公開一個(gè)公共方法或?qū)傩怨┯脩籼畛?，就像Angular模塊（angular.module('myModule')）和jQuery的fn（jQuery.fn.myPlugin）一樣，或者什么也不做，只需讓用戶訪問你的庫的命名空間：

<code>// AngryUserAgent 模塊
// 可以訪問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>

同樣，這也允許你覆蓋方法。

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

在后一種情況下，允許用戶訪問你的庫的命名空間，會(huì)減少你對(duì)擴(kuò)展/插件定義方式的控制。為了確保擴(kuò)展遵循某些約定，你可以（也應(yīng)該）編寫文檔。

測(cè)試

編寫概要是測(cè)試驅(qū)動(dòng)開發(fā)的良好開端。簡(jiǎn)而言之，這是在你編寫實(shí)際庫之前寫下測(cè)試形式的標(biāo)準(zhǔn)。如果這些測(cè)試檢查某個(gè)功能的行為是否符合預(yù)期，并且你在編寫庫之前就編寫了這些測(cè)試，則該策略稱為行為驅(qū)動(dòng)開發(fā)。無論哪種方式，如果你的測(cè)試涵蓋了庫中的每個(gè)功能，并且你的代碼通過了所有測(cè)試，你可以安全地假設(shè)你的庫可以工作。

Jani Hartikainen解釋了如何使用Mocha在“使用Mocha和Chai進(jìn)行單元測(cè)試你的JavaScript”中編寫單元測(cè)試。在“使用Jasmine、Travis和Karma測(cè)試JavaScript”中，Tim Evko展示了如何使用另一個(gè)名為Jasmine的框架設(shè)置一個(gè)很棒的測(cè)試管道。這兩個(gè)測(cè)試框架非常流行，但還有許多其他類型的框架。

我前面在本文中創(chuàng)建的概要已經(jīng)對(duì)預(yù)期輸出進(jìn)行了注釋。這就是所有測(cè)試的開始：從期望開始。我的庫的Jasmine測(cè)試如下所示：

<code>// 以空的UserAgent字符串開始
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>

一旦你完全對(duì)第一個(gè)版本的API設(shè)計(jì)感到滿意，就該開始考慮架構(gòu)以及你的庫將如何使用。

模塊加載器兼容性

你可能使用也可能不使用模塊加載器。但是，選擇實(shí)現(xiàn)你的庫的開發(fā)人員可能會(huì)使用，因此你希望你的庫與模塊加載器兼容。但是哪個(gè)？你如何在CommonJS、RequireJS、AMD和其他模塊加載器之間進(jìn)行選擇？

實(shí)際上，你無需選擇！通用模塊定義 (UMD) 是另一種旨在支持多個(gè)模塊加載器的策略。你可以在網(wǎng)上找到不同版本的代碼片段，你也可以在UMD GitHub存儲(chǔ)庫中找到不同的UMD版本，以使你的庫與UMD兼容。使用其中一個(gè)模板開始你的庫，或者使用你喜歡的構(gòu)建工具添加UMD，你就不必?fù)?dān)心模塊加載器了。

如果你希望使用ES2015導(dǎo)入/導(dǎo)出語法，我強(qiáng)烈建議使用Babel編譯成ES5，并結(jié)合Babel的UMD插件。這樣，你就可以在項(xiàng)目中使用ES2015，同時(shí)仍然生成適合所有人的庫。

文檔

我完全贊成對(duì)所有項(xiàng)目進(jìn)行徹底的文檔記錄，但這通常被認(rèn)為是很多工作，被推遲，最終被遺忘。

基本信息

文檔應(yīng)該始終從基本信息開始，例如項(xiàng)目名稱和描述。這將幫助其他人理解你的庫的功能以及它是否適合他們。

你可以提供其他信息，例如范圍和目標(biāo)，以更好地告知用戶，以及路線圖，以便他們知道將來會(huì)發(fā)生什么或知道他們?nèi)绾巫龀鲐暙I(xiàn)。

API、教程和示例

當(dāng)然，你需要讓用戶了解如何使用你的庫。這從API文檔開始。教程和示例是很好的補(bǔ)充，但編寫這些可能需要大量工作。但是，內(nèi)聯(lián)文檔并非如此。這些是可以解析并使用JSDoc轉(zhuǎn)換為文檔頁面的注釋。

元任務(wù)

一些用戶可能希望更改你的庫。在大多數(shù)情況下，這將是為了貢獻(xiàn)，但有些人可能希望為私人使用創(chuàng)建自定義版本。對(duì)于這些用戶，包含元任務(wù)的文檔非常有用，例如構(gòu)建庫、運(yùn)行測(cè)試、生成、轉(zhuǎn)換或下載數(shù)據(jù)等的命令列表。

貢獻(xiàn)

當(dāng)你開源你的庫時(shí)，貢獻(xiàn)非常重要。為了指導(dǎo)貢獻(xiàn)者，你可以在其中添加文檔，解釋做出貢獻(xiàn)的步驟以及它應(yīng)該滿足的標(biāo)準(zhǔn)。這將使你更容易審查和接受貢獻(xiàn)，并使他們更容易正確地進(jìn)行貢獻(xiàn)。

許可證

最后但并非最不重要的一點(diǎn)是，請(qǐng)包含許可證。從技術(shù)上講，如果你選擇不包含許可證，它仍然受版權(quán)保護(hù)，但并非每個(gè)人都知道這一點(diǎn)。

我發(fā)現(xiàn)ChooseALicense.com是一個(gè)很好的資源，可以讓你在無需成為法律專家的情況下選擇許可證。選擇許可證后，只需將文本保存在項(xiàng)目根目錄下的LICENSE.txt文件中即可。

打包并添加一個(gè)蝴蝶結(jié)

版本控制對(duì)于一個(gè)好的庫至關(guān)重要。如果你選擇進(jìn)行重大更改，用戶可能希望繼續(xù)使用對(duì)他們有效的版本。

當(dāng)前事實(shí)上的版本命名標(biāo)準(zhǔn)是語義版本控制，或SemVer。SemVer版本由三個(gè)數(shù)字組成，每個(gè)數(shù)字表示不同的更改：主版本、次版本和修補(bǔ)程序版本。

向你的Git存儲(chǔ)庫添加版本/版本

如果你有g(shù)it存儲(chǔ)庫，你可以向存儲(chǔ)庫添加版本號(hào)。你可以將它們視為存儲(chǔ)庫的快照。我們稱之為標(biāo)簽。要?jiǎng)?chuàng)建標(biāo)簽，請(qǐng)打開終端并鍵入：

<code>// 以空的UserAgent字符串開始
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>

許多服務(wù)（如GitHub）將提供你所有版本的概述以及每個(gè)版本的下載鏈接。

發(fā)布到公共存儲(chǔ)庫

npm

許多編程語言都帶有包管理器，或者可以使用第三方包管理器。這些允許我們專門為這些語言引入庫。例如，PHP的Composer和Ruby的RubyGems。

Node.js（一種獨(dú)立的JavaScript引擎）帶有npm。如果你不熟悉npm，我們有一個(gè)很棒的初學(xué)者指南。

默認(rèn)情況下，你的npm包將公開發(fā)布。別擔(dān)心！你也可以發(fā)布私有包，設(shè)置私有注冊(cè)表或完全避免發(fā)布。

要發(fā)布你的包，你的項(xiàng)目需要一個(gè)package.json文件。你可以手動(dòng)執(zhí)行此操作或使用交互式向?qū)?。要啟?dòng)向?qū)?，?qǐng)鍵入：

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

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

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

version屬性應(yīng)與你的git標(biāo)簽匹配。此外，請(qǐng)確保擁有README.md文件。就像GitHub一樣，npm也使用它作為呈現(xiàn)你的包的頁面。

之后，你可以通過鍵入以下命令發(fā)布你的包：

<code>var userAgent = new UserAgent;

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

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

就是這樣！你已經(jīng)發(fā)布了你的npm包。

Bower

幾年前，出現(xiàn)了另一個(gè)名為Bower的包管理器。但是，這個(gè)包管理器并非為特定語言設(shè)計(jì)，而是為特定平臺(tái)——Web設(shè)計(jì)的。你可以在那里找到所有主要的前端資源。只有當(dāng)你的庫與瀏覽器兼容時(shí)，在Bower上發(fā)布你的包才有意義。

如果你不熟悉Bower，我們也有一個(gè)初學(xué)者指南。

與npm一樣，你也可以設(shè)置私有存儲(chǔ)庫。你也可以在向?qū)е型耆柚顾l(fā)布。

有趣的是，在過去的一兩年里，許多人似乎正在轉(zhuǎn)向npm用于前端資源。盡管npm包主要是JavaScript，但許多前端包也在npm上發(fā)布。無論哪種方式，Bower仍然很流行，所以我絕對(duì)建議你也將你的包發(fā)布到Bower上。

我有沒有提到Bower實(shí)際上是一個(gè)npm模塊，并且最初是受其啟發(fā)的？命令非常相似。要生成bower.json文件，請(qǐng)鍵入：

<code>// 以空的UserAgent字符串開始
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>

就像npm init一樣，說明是自解釋的。最后，要發(fā)布你的包：

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

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

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

就這樣，你已經(jīng)將你的庫發(fā)布到互聯(lián)網(wǎng)上，供每個(gè)人在他們的Node項(xiàng)目和/或Web上使用！

結(jié)論

核心產(chǎn)品是庫。確保它解決了問題，易于使用且穩(wěn)定，你將使你的團(tuán)隊(duì)或許多開發(fā)人員非常高興。

我提到的許多任務(wù)很容易自動(dòng)化，例如：運(yùn)行測(cè)試、創(chuàng)建標(biāo)簽、更新package.json中的版本以及將你的包重新發(fā)布到npm和bower。這就是你進(jìn)入持續(xù)集成領(lǐng)域并使用Travis CI或Jenkins等工具的地方。我前面提到的Tim Evko的文章也涉及到這一點(diǎn)。

你構(gòu)建并發(fā)布過庫嗎？請(qǐng)?jiān)谙旅娴脑u(píng)論部分分享！

關(guān)于設(shè)計(jì)和構(gòu)建你自己的JavaScript庫的常見問題 (FAQ)

創(chuàng)建我自己的JavaScript庫的好處是什么？

創(chuàng)建你自己的JavaScript庫有很多好處。首先，它允許你在多個(gè)項(xiàng)目中重用代碼，從長(zhǎng)遠(yuǎn)來看節(jié)省了時(shí)間和精力。其次，它可以幫助你以更結(jié)構(gòu)化和可讀的方式組織代碼。這在處理大型項(xiàng)目或與其他開發(fā)人員合作時(shí)尤其有用。最后，創(chuàng)建你自己的庫可以成為一個(gè)很好的學(xué)習(xí)體驗(yàn)，幫助你加深對(duì)JavaScript和軟件開發(fā)原則的理解。

我如何開始創(chuàng)建JavaScript庫？

創(chuàng)建JavaScript庫的第一步是定義其用途。你希望你的庫提供什么功能？一旦你清楚地了解你希望你的庫做什么，你就可以開始編寫代碼了。這通常涉及定義一系列提供所需功能的函數(shù)。然后，這些函數(shù)通過其他開發(fā)人員可以使用的公共API公開。

我如何測(cè)試我的JavaScript庫？

測(cè)試是開發(fā)JavaScript庫的關(guān)鍵部分。有幾種JavaScript測(cè)試框架可用，例如Jest、Mocha和Jasmine。這些框架允許你為你的函數(shù)編寫單元測(cè)試，確保它們按預(yù)期工作。除了單元測(cè)試之外，你可能還需要編寫集成測(cè)試來檢查庫的不同部分是否可以一起正常工作。

我如何記錄我的JavaScript庫？

良好的文檔對(duì)于任何軟件庫都是必不可少的。它幫助其他開發(fā)人員了解如何使用你的庫以及每個(gè)函數(shù)的作用。你應(yīng)該在庫中包含每個(gè)函數(shù)的詳細(xì)描述，包括其輸入、輸出和任何副作用。你還可以使用JSDoc等工具根據(jù)代碼注釋自動(dòng)生成文檔。

我如何分發(fā)我的JavaScript庫？

有多種方法可以分發(fā)JavaScript庫。一種常見的方法是將其發(fā)布到npm等包管理器上。這允許其他開發(fā)人員使用簡(jiǎn)單的命令輕松安裝你的庫。你還可以通過將其托管在CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）上或在你的網(wǎng)站上提供下載鏈接來分發(fā)你的庫。

我如何維護(hù)我的JavaScript庫？

維護(hù)JavaScript庫包括修復(fù)錯(cuò)誤、添加新功能以及使庫與最新的JavaScript標(biāo)準(zhǔn)和實(shí)踐保持同步。定期測(cè)試你的庫并傾聽用戶的反饋非常重要。你還可以考慮對(duì)你的庫進(jìn)行版本控制，以便用戶可以選擇使用穩(wěn)定版本或具有新功能的最新版本。

我如何確保我的JavaScript庫高效？

為了確保你的JavaScript庫高效，你應(yīng)該專注于編寫簡(jiǎn)潔明了的代碼。避免不必要的計(jì)算和內(nèi)存分配。使用Chrome DevTools等工具來分析你的庫并識(shí)別任何性能瓶頸。你還可以考慮壓縮你的庫以減小其文件大小并提高加載時(shí)間。

我如何使我的JavaScript庫與不同的瀏覽器兼容？

由于每個(gè)瀏覽器解釋JavaScript的方式不同，因此確保瀏覽器兼容性可能是一個(gè)挑戰(zhàn)。你可以使用Babel等工具將你的代碼轉(zhuǎn)換為與舊版瀏覽器兼容的JavaScript版本。你還應(yīng)該在不同的瀏覽器中測(cè)試你的庫，以識(shí)別和修復(fù)任何兼容性問題。

我如何在JavaScript庫中處理錯(cuò)誤？

錯(cuò)誤處理是開發(fā)JavaScript庫的重要組成部分。你應(yīng)該努力提供清晰、有幫助的錯(cuò)誤消息，以幫助用戶了解出了什么問題。你可以使用try/catch塊來捕獲和處理錯(cuò)誤。你還可以考慮提供一種讓用戶報(bào)告錯(cuò)誤和問題的方法。

我如何獲得有關(guān)我的JavaScript庫的反饋？

有多種方法可以獲得有關(guān)你的JavaScript庫的反饋。你可以請(qǐng)其他開發(fā)人員審查你的代碼，將你的庫發(fā)布到論壇或社交媒體上，或者將其發(fā)布到npm等包管理器上并尋求反饋。你應(yīng)該對(duì)批評(píng)持開放態(tài)度，并愿意根據(jù)你收到的反饋進(jìn)行更改。

以上是設(shè)計(jì)和構(gòu)建自己的JavaScript庫：提示和技巧的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！