underscore.jsを開始します

キーテイクアウト

• underscore.jsは、さまざまなユースケースに機能的なユーティリティを提供し、コードを読み書きを容易にし、ネイティブJavaScriptで常に利用できるとは限らないJavaScriptライブラリです。
ライブラリには、読み取り可能なループを書き込むための_.each（）、直感的で簡単なテンプレートのための_.template（）、_.filter（）などの一般的な方法が含まれています。
• Underscore.jsは軽量で、USA Today、LinkedIn、Khan Academyなど、多くの有名プロジェクトで使用されています。
underscore.js、jQuery、およびSpotify Web APIを使用したデモアプリケーションは、ライブラリを使用してAPIからデータを取得および表示する方法を示し、ユーザーが結果をフィルタリングできるようにします。
• この記事は、Agbonghama CollinsとRyan Chenkieによってピアレビューされました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します！
underscore.jsは、Jeremy Ashkenasによって書かれたJavaScriptライブラリであり、開発者として、Webプロジェクトに直面したときに出くわす可能性のあるさまざまなユースケースに機能的なユーティリティを提供します。

読みやすいコードを作成します：

書き込みが簡単なコードになります：

1：1のネイティブ方法がない機能を提供しています：

_.isEmpty({});
// true

それ自体がテンプレートエンジンとして使用することもできます：

_.flatten([[0, 1], [2, 3], [4, 5]]);
// [0, 1, 2, 3, 4, 5]

Underscoreは軽量のライブラリ（わずか5.7kb、削除、Gzipped）であり、次のようなさまざまなビッグネームプロジェクトで使用されています。

USA TODAY

_.range(5);
// [0, 1, 2, 3, 4]

linkedIn

_.template('<p><%= text %></p>', {text: 'SitePoint Rocks!'});
// <p>SitePoint Rocks!</p>

カーンアカデミー

ここで、より具体的に取得し、その主な機能に飛び込み始めましょう。
良い部分
• このチュートリアルでは、Underscoreの3つの最も一般的な方法を強調します。
• _。各（）

_。template（）

_。filter（）

それらが個別にどのように使用されるかを説明し、それらを結び付けて、チュートリアルの最後に見つけることができるデモアプリケーションを構築します。相変わらず、このデモのコードはgithubで入手できます。

例をフォローしたい場合は、たとえばお気に入りのCDNからライブラリのコピーを入手する必要があります。

• そして、途中で助けを必要としているか、もっと知りたいだけで、Underscoreのドキュメントが広範囲であることを忘れないでください。また、大規模でアクティブなコミュニティがあります。つまり、ヘルプは簡単に見つけることができます。
_。それぞれ：読み取り可能なループを書き込み
コードのある時点でこのスニペットに似たものがないプロジェクトはありません。
アンダースコアを使用すると、より読みやすい構文を使用して、同等のコードを作成できます。

_.isEmpty({});
// true

きちんと、ええ？ _.each（）は、2つのパラメーターを取ります：

• アレイ（またはオブジェクト）を反復します
コールバック関数。
配列の各要素の_.each（）の各要素の場合、コールバック関数（ドキュメントで

iteratee

と呼ばれます）が呼び出されます。コールバック内で、さらに3つのパラメーターにアクセスできます。 現在のイテレーションインデックス（アーティスト）の配列の値。たとえば、上記のスニペットでは、最初のイテレーションのために「ファレルウィリアムズ」を取得します。

現在のイテレーションの数（インデックス）、私たちの場合は0から2まで変化します。

私たちが繰り返しているアレイ（アーティスト）。
• コードがより読みやすく、ループを使用した例で見たように、アーティストを必要とせずに配列内の個々の要素にアクセスできます。
• 次に、テンプレートエンジンがどのように動作するかを確認します。

_。テンプレート（）：直感的で簡単な

単一ページアプリケーションの台頭以来​​、信頼できるフロントエンドテンプレートエンジンを持つことは、作業スタックの基本的なニーズになりました。

Underscoreはテンプレートエンジンを提供します。これは、PHPやRuby on Railsなどの言語に精通している人には非常に馴染みがあります。

以前のスニペットから継続して、_.template（）の仕組みを示します。以下に示すように、コードにいくつかの行を追加することでこれを行います：

ここでは、_.template（）関数を文字列引数を使用して呼び出しています。この方法で呼び出された場合、_.template（）は、何度も何度も使用できる関数を返します。

ArtistTemplate（）を使用して新しい関数を呼び出し、引数としてリテラルオブジェクトを渡すことができます。これにより、最初に渡された文字列が_.template（）に返され、テンプレートの自由変数に対応するオブジェクトプロパティを置き換えます。私たちの場合、は、オブジェクトのアーティスト属性の値に置き換えられます。

アンダースコアのテンプレートエンジンは、単一の値を置き換えるだけでなく、テンプレート自体内のスクリプトの実行も可能にします。単一の変更を使用すると、スニペットをさらに強力にすることができます。

テンプレートを表す文字列に_.each（）への呼び出しを組み込みました。これにより、テンプレートの呼び出の方法を変更します。 _.template（）関数内で繰り返しているので、完全なアーティスト配列をArtistTemplate（）に渡すことができます（以前は個々のアーティストを追い越していました）。このコードの出力は、前の例と同じです。。

_.templateによって生成されたテンプレートを呼び出すため、関数を呼び出すように機能するように動作するため、タグを使用して、スニペットをさらに一歩進めて、別のテンプレートを内部から呼び出すことができます。これにより、アーティストリスト用の別のラッパーテンプレートを作成し、含む各アイテムのテンプレートを呼び出すことができるため、再利用可能なテンプレートを作成できます。 最後に、_.filter（）関数を見てみましょう

_。フィルター（）：必要なのはブール関数

だけです

_。フィルター（）は、引数として配列とコールバック関数を受信します。次に、アレイ内の各要素の関数を呼び出し、真実に評価された関数がそれらの要素を含む新しい配列を返します。

コールバック関数は、_.each（）ケース：現在の反復インデックス、反復のインデックス、および配列自体に対応する配列の要素のように、3つの引数も受信します。 これを明確にするために、スニペットにいくつかの変更を加えましょう。

あなたが推測したかもしれないように、私たちのテンプレートでは、配列引数として['ACDC']を受け取ります。これまでのところ、これまでに持っているもののデモです。

十分に言った。もう少し理にかなっているもののために物事を機能させましょう。

デモアプリケーション

忘れないでください、このデモのコードはgithubで入手できます。

APIを消費し、取得した情報を表示し、ユーザーが表示されているものをフィルタリングできる小さなアプリケーションを構築します。この目的のために：

_.isEmpty({});
// true

underscore.js

jQuery

Spotify web API

より具体的には、アプリケーションはSpotifyからいくつかのアーティスト情報を取得し、Underscore _.template、_.eachおよび_.filterを使用することにより、ページに表示し、ユーザーがジャンルごとに結果を絞り込みます。

これを行うには、コードを3つの異なるモジュールに分割します。

_ISABEOSTOUSE.CONFIG：アプリケーション全体で使用する情報を保持します。

_ISABEORTY.TEMPLATE：テンプレートコンピレーションの世話をします。

• _ISABEOSTOY：これは、ユーザーアクションに応答してUIの更新を担当するメインモジュールです。
• それらはすべてモジュールパターンに従います。

config module

configモジュールには、使用するテンプレートのIDが含まれ、クエリするAPIのURLに加えて、Spotifyから取得したいアーティストのIDが含まれます。これにより、アレイにさらに要素を追加するだけで、より多くのアーティストを追加できます。

テンプレートモジュール
このモジュールは、configモジュールでgetTemplates（）を呼び出すことにより、テンプレートをコンパイルする担当者です。

メインモジュール

このモジュールは、Ajax要求を構成モジュールから取得し、テンプレートモジュールからテンプレートを使用してコンテンツをレンダリングするURLに送信する責任があります。 それとは別に、このモジュールは、ユーザーがクリックしたフィルターに基づいてアイテムのフィルタリングも処理します。

フィルターと私たちのテンプレートの両方がHTMLの一部として含まれています。

フィルタリングを実装するには、HTML 5データ属性とjQueryのデータインターフェイスに依存します。これはもっと便利な問題ですが、これをネイティブにやりたい場合は、ブラウザのサポートは非​​常に良いです。

これは、フィルタリングを行うために使用するボタンのマークアップです。

これは、フィルター機能に渡すオブジェクトの例です。

index.htmlの一部としてテンプレート用のHTMLが<script>タグ内にあります。これにより、通常のテキスト/javaScriptとは異なるものにタイプを設定することで実行できません。一貫性のために、それを強調/テンプレートに設定します。 </script>

2つのテンプレートがあります。 1つ目にはアーティストのリストが含まれますが、2つ目には展示される個々のアーティストが含まれます。上で見たように、私たちは呼んでいるものを使用します。別のテンプレート（ 'item-list'）内から1つのテンプレート（ 'item-tpl'）を呼び出します。

次に、ファイルの下部に、ライブラリと3つのスクリプトが含まれます。また、視覚的に魅力的にするために、ヘッダーに基本的なスタイルがいくつかあります。

そしてそれだけです。
CodepenのSitePoint（@SitePoint）によるペンのアンダースコアの素晴らしさを参照してください。

_.isEmpty({});
// true

結論

アンダースコアは、一緒に仕事をする喜びであり、私が示したように、それはあなたがきれいで読みやすく、維持しやすいコードを書くことを可能にします。

_.flatten([[0, 1], [2, 3], [4, 5]]);
// [0, 1, 2, 3, 4, 5]

アプリケーションに追加できるものがいくつかあります（たとえば、_.pluck（）を使用してフィルターを動的に生成します）が、開始するのに十分だと思います。

あなたはどうですか？アンダースコアで仕事をしましたか？試してみませんか？同様の機能を提供する代替（つまり、Lodash）を試しましたか？以下のコメントでお知らせください。

underscore.js

に関するよくある質問（FAQ） underscore.jsの主な目的は何ですか。JSは、一般的なプログラミングタスクに役立つ一連のユーティリティ関数を提供するJavaScriptライブラリです。 JavaScriptの組み込み関数のサプリメントになるように設計されており、追加の機能を提供し、生産性を向上させます。配列、オブジェクト、関数などを扱う機能を含む100を超える機能を提供します。これらの機能は、より効率的で簡単な方法でデータとオブジェクトを操作するのに役立ち、開発者にとって貴重なツールになります。 Underscore.js、最初にプロジェクトに含める必要があります。これを行うには、公式Webサイトからライブラリをダウンロードし、HTMLファイルにリンクするか、CDNを使用してリンクできます。プロジェクトに含まれると、アンダースコア文字（_）に続いて関数名を呼び出して、その関数を使用し始めることができます。 >

underscore.jsは幅広い機能を提供しますが、最も便利な機能には次のものが含まれます。 _.each：この関数により、配列またはオブジェクトの要素を反復させることができます。 _.map：この関数は、関数を使用して配列またはオブジェクトのすべての要素を変換することにより、新しい配列を作成します。 _.Filter：この関数は、真実テストに合格するすべての要素を含む新しい配列を返します。 _.Find：この関数は、真実テストに合格する最初の要素を返します。 _.Reduce：この関数は、関数を反復的に適用することにより、配列またはオブジェクトを単一の値に削減します。はい、Underscore.jsは、他のJavaScriptライブラリと互換性があるように設計されています。組み込みのJavaScriptオブジェクトを拡張しないため、ページで実行されている他のライブラリやスクリプトと競合することはありません。 、Underscore.jsは積極的に維持され、定期的に更新されます。図書館はオープンソースです。つまり、世界中の開発者がその開発と改善に貢献しています。 Lodashは同様の機能を提供しますが、いくつかの違いがあります。 LodashはUnderscore.jsのスーパーセットです。つまり、すべてのUnderscore.jsの機能などが含まれています。ただし、Underscore.jsは小さくて軽量であるため、パフォーマンスが懸念事項であるプロジェクトに適しています。 underscore.jsは、node.js環境で使用できます。 node.jsパッケージマネージャーであるnpmを使用してインストールできます。コマンド「npmインストールアンダースコア」を実行してください。 underscore.jsの「Underscore」は、ライブラリの機能を呼び出すために使用される文字（_）を指します。 utilityライブラリにアンダースコア文字を使用することはJavaScriptの慣習です。誰でもその開発に貢献できます。バグレポートを送信したり、新機能を提案したり、コードを貢献したりすることもできます。公式ウェブサイトは包括的なドキュメントを提供しており、オンラインで利用できる多数のチュートリアルや記事があります。さらに、underscore.jsを詳細にカバーする本やオンラインコースがいくつかあります。

以上がunderscore.jsを開始しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。