www国产亚洲精品久久久,宝贝把腿开大让我添添视频

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

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

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

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

Design and Build Your Own JavaScript Library: Tips & Tricks

基督教堂圖書館(來源)

任何使實現(xiàn)特定目標(biāo)更容易並且可以重用的代碼，例如抽象，都是可以打包到庫中的候選者。一個有趣的例子是jQuery。儘管jQuery的API遠不止簡化的DOM API，但在幾年前，當(dāng)跨瀏覽器DOM操作相當(dāng)困難時，它意義重大。

如果一個開源項目變得流行起來，並且越來越多的開發(fā)者使用它，那麼人們很可能會加入並通過提交問題或為代碼庫做出貢獻來幫助該項目。無論哪種方式，它都會使庫及其依賴它的所有項目受益。

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

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

範(fàn)圍和目標(biāo)

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

只做一件事，並把它做好

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

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

API設(shè)計

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

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

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

<code>// 以空的UserAgent字符串開始
var userAgent = new UserAgent;

// 創(chuàng)建并添加第一個產(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)建并添加第二個產(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();

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

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

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

靈活性和自定義

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

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

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

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

// 使用公共方法進行運行時配置
userAgent.setOption('commentSeparator', '-');

// 使用公共屬性進行運行時配置
userAgent.commentSeparator = '-';
</code>

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

<code>var userAgent = new UserAgent;

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

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

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

<code>var userAgent = new UserAgent;

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

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

<code>var userAgent = new UserAgent;

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

在某些情況下，你可能希望允許用戶擴展你的庫。為此，你可以公開一個公共方法或?qū)傩怨┯脩籼畛洌拖馎ngular模塊（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) {

  // 存儲舊的 .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>

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

測試

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

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

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

<code>// 以空的UserAgent字符串開始
var userAgent = new UserAgent;

// 創(chuàng)建并添加第一個產(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)建并添加第二個產(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();

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

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

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

模塊加載器兼容性

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

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

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

文檔

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

基本信息

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

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

API、教程和示例

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

元任務(wù)

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

貢獻

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

許可證

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

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

打包並添加一個蝴蝶結(jié)

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

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

向你的Git存儲庫添加版本/版本

如果你有g(shù)it存儲庫，你可以向存儲庫添加版本號。你可以將它們視為存儲庫的快照。我們稱之為標(biāo)籤。要創(chuàng)建標(biāo)籤，請打開終端並鍵入：

<code>// 以空的UserAgent字符串開始
var userAgent = new UserAgent;

// 創(chuàng)建并添加第一個產(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)建并添加第二個產(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();

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

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

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

發(fā)佈到公共存儲庫

npm

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

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

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

要發(fā)布你的包，你的項目需要一個package.json文件。你可以手動執(zhí)行此操作或使用交互式嚮導(dǎo)。要啟動嚮導(dǎo)，請鍵入：

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

// 使用公共方法進行運行時配置
userAgent.setOption('commentSeparator', '-');

// 使用公共屬性進行運行時配置
userAgent.commentSeparator = '-';
</code>

version屬性應(yīng)與你的git標(biāo)籤匹配。此外，請確保擁有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)了另一個名為Bower的包管理器。但是，這個包管理器並非為特定語言設(shè)計，而是為特定平臺——Web設(shè)計的。你可以在那裡找到所有主要的前端資源。只有當(dāng)你的庫與瀏覽器兼容時，在Bower上發(fā)布你的包才有意義。

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

與npm一樣，你也可以設(shè)置私有存儲庫。你也可以在嚮導(dǎo)中完全阻止它發(fā)布。

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

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

<code>// 以空的UserAgent字符串開始
var userAgent = new UserAgent;

// 創(chuàng)建并添加第一個產(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)建并添加第二個產(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();

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

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

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

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

// 使用公共方法進行運行時配置
userAgent.setOption('commentSeparator', '-');

// 使用公共屬性進行運行時配置
userAgent.commentSeparator = '-';
</code>

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

結(jié)論

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

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

你構(gòu)建並發(fā)布過庫嗎？請在下面的評論部分分享！

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

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

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

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

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

我如何測試我的JavaScript庫？

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

我如何記錄我的JavaScript庫？

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

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

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