独自のJavaScriptライブラリを設計および構築する：ヒントとトリック

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

コアポイント

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

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

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

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

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

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

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

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

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

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

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

  // 创建新的方法 .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という別のフレームワークで優れたテストパイプラインをセットアップする方法を示しています。これらの2つのテストフレームワークは非常に人気がありますが、他にも多くの種類のフレームワークがあります。

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

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

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

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

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

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

// 创建并添加第一个产品：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>

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

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

// 使用公共属性进行运行时配置
userAgent.commentSeparator = '-';
</code>

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