獨自のJavaScriptライブラリをビルドして公開：詳細ガイド

コアポイント

• 目標をクリアします：ライブラリの構築を開始する前に、解決したい特定の問題を明確にし、集中し続け、その有用性を確保します。
• ユーザー中心のAPIデザイン：エンドユーザーセンターを使用してライブラリを設計して、シンプルで使いやすくし、ユーザーの採用と満足度を向上させます。
• 柔軟性とカスタマイズ：さまざまなユーザーのニーズに合わせて、構成、パブリックメソッド、イベント処理を通じてカスタマイズオプションを提供します。
• テストとドキュメント： MochaやJasmineなどのフレームワークを使用して、徹底的なテストを実施し、理解と使用に役立つ包括的なドキュメントが提供されるようにします。
モジュールローダーの互換性：
• 互換性を最大化するために、ユニバーサルモジュール定義（UMD）または同様の方法を使用して、ライブラリがさまざまなモジュールローダーをサポートしていることを確認してください。
バージョン化とリリース：
• セマンティックバージョンで更新し、NPMやBowerなどのマネージャーにライブラリを公開して、より多くの視聴者にリーチします。

ライブラリをよく使用します。ライブラリは、開発者がプロ??ジェクトで使用できるパッケージ化されたコードであり、ワークロードを節(jié)約し、ホイールの重複を回避します。再利用可能なパッケージ（オープンソースまたはクローズドソースの両方）を使用することは、同じ機能を再構築したり、過去のプロジェクトから手動でコピーしたりするよりも優(yōu)れています。

しかし、パッケージ化されたコード以外に、ライブラリとは正確には何ですか？いくつかの例外を除き、ライブラリは常に単一のファイル、または単一のフォルダーにあるいくつかのファイルである必要があります。そのコードは個別に維持する必要があり、プロジェクトに実裝されている場合は同じままです。ライブラリを使用すると、プロジェクト固有の構成および/または動作を設定できる必要があります。 USBポートを介した通信のみを許可するUSB??デバイスと考えてください。マウスやキーボードなどの一部のデバイスは、デバイスが提供するインターフェイスを介して構成を許可します。

人気のあるオープンソースプロジェクトは、大きな機會をもたらすこともできます。會社はあなたの仕事の質に感銘を受け、あなたに仕事を提供するかもしれません。たぶん、會社があなたのプロジェクトを彼らのアプリケーションに統(tǒng)合するのを助けてくれるようにあなたに頼むでしょう。結局のところ、あなたよりもあなたの図書館をよく知っている人はいません。

1つだけのことをして、それをうまくやる

自問してみてください：あなたの図書館はどのような問題を解決しますか？どのように解決しますか？すべてを自分で書いてくれませんか、それとも他の誰かのライブラリを使用できますか？

以下は、ユーザーエージェント文字列ライブラリの実裝または要約が次のようになるものです。

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

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

ユーザーに制御を提供する方法はいくつかあります。構成、パブリック方法の公開、コールバックやイベントを介して。 通常、

メソッドは、インスタンスからデータの取得、インスタンス（セッター）にデータを配置する、操作の実行など、インスタンスと対話するために開示することができます。

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

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

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

コールバックは、通常は非同期タスクの後にユーザーコードを実行しているパブリックメソッドに渡されることがあります。

<code>var userAgent = new UserAgent;

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

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

イベントには大きな可能性があります。イベントハンドラーを追加することはアクションをトリガーしないでください。イベントは通常、イベントを示すために使用されます（推測したかもしれません）！コールバックと同様に、ライブラリが使用できる追加情報と返品値を提供できます。

<code>var userAgent = new UserAgent;

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

場合によっては、ユーザーがライブラリを拡張できるようにすることができます。これを行うには、Angular Module（Angular.module（ 'mymodule'））やjqueryのfn（jquery.fn.myplugin）のように、ユーザーが充填できるパブリックメソッドまたはプロパティを公開するか、ユーザーにアクセスできるようにすることができます。ライブラリの名前空間へ：

<code>var userAgent = new UserAgent;

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

繰り返しますが、これによりメソッドをオーバーライドできます。

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

  // 創(chuàng)建新的方法 .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>

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

概要を書くことは、テスト駆動型開発の良いスタートです。要するに、これは実際のライブラリを書く前にテストフォームを書き留めるための標準です。これらのテストで、機能が予想どおりに動作することを確認し、ライブラリを作成する前にこれらのテストを作成した場合、戦略は行動駆動型開発と呼ばれます。いずれにせよ、テストがライブラリ內のすべての機能をカバーし、コードがすべてのテストに合格した場合、ライブラリが機能すると安全に想定できます。

Jani Hartikainenは、「JavaScriptを使用するためにMochaとChaiを使用する」で単體テストを書く方法を説明しています。 「ジャスミン、トラビス、カルマによるJavaScriptのテスト」で、Tim Evkoは、Jasmineという別のフレームワークで優(yōu)れたテストパイプラインをセットアップする方法を示しています。これらの2つのテストフレームワークは非常に人気がありますが、他にも多くの種類のフレームワークがあります。

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

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

モジュールローダーの互換性

モジュールローダーを使用する場合と使用できない場合があります。ただし、ライブラリを実裝することを選択した開発者は使用する場合があるため、ライブラリをモジュールローダーと互換性があることをお勧めします。しかし、どちら？ CommonJS、RequireJS、AMD、およびその他のモジュールローダーからどのように選択しますか？

実際には、選択する必要はありません！ユニバーサルモジュール定義（UMD）は、複數(shù)のモジュールローダーをサポートするように設計された別の戦略です。さまざまなバージョンのコードスニペットをオンラインで見つけることができます。また、UMD GitHubリポジトリにUMDの異なるバージョンを見つけるために、UMDとライブラリを互換性のあるものにすることもできます。テンプレートの1つでライブラリを起動するか、お気に入りのビルドツールでUMDを追加すると、モジュールローダーを心配する必要がありません。

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

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

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

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

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

<code>var userAgent = new UserAgent;

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

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

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

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

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

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

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

以上が獨自のJavaScriptライブラリを設計および構築する：ヒントとトリックの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。