バックボーンは、使用するにはunderscore.jsに依存する必要があります。アンダースコアの関数を使用して、ページ要素と処理要素にアクセスする基本操作を完了する必要があります。
注：Backboneは他のJSライブラリとうまく機能するため、フレームワークではなくライブラリです。
Underscoreはネイティブオブジェクトを拡張しませんが、_（）メソッドを呼び出してカプセル化します。カプセル化が完了すると、JSオブジェクトはアンダースコアオブジェクトになります。アンダースコアオブジェクトのvalue（）メソッドを使用して、ネイティブJSオブジェクトのデータを取得することもできます。 （jQueryは$（）メソッドを介してjqueryオブジェクトを取得します）
Underscoreには、合計60を超える機能があります。さまざまな処理オブジェクトによれば、コレクションクラス、配列クラス、関数関数クラス、オブジェクトクラス、ツール関数クラスの5つの主要なモジュールに分けることができます。
UNDERSCORE TEMPLATE（）関数説明：
この関数には3つのテンプレートが含まれています。
（1）<％％>：論理コードが含まれており、レンダリング後は表示されません。
（2）<％=％>：データ型、レンダリング後の表示データを表示します。
（3）<％ - ％>：HTMLタグを一般的な文字列に変換して、コード攻撃を避けます。
通話形式：
_.template（templatestring、[data]、[setting]）
双方向のデータバインディングは実装されていません。
1。オブジェクトのカプセル化をアンダースコアします
Underscoreは、ネイティブJavaScriptオブジェクトのプロトタイプには拡張されませんが、jQuery（以下では「アンダースコアオブジェクト」と呼ばれる）のようなカスタムオブジェクトのデータをカプセル化します。
UnderscoreオブジェクトのValue（）メソッドを呼び出すことにより、ネイティブJavaScriptデータを取得できます。
// javascriptの組み込みオブジェクトを定義しますvar jsdata = {name： 'data'} // _（）メソッドを介してアンダースコアオブジェクトとしてオブジェクトを作成します//アンダースコーダタターオブジェクトのプロトタイプには、アンダースコアで定義されたすべてのメソッドが含まれます。 var Underscoredata = _（jsdata）を使用できます。 // Valueメソッド、つまりJSDATA Undercoredata.Value（）を使用してネイティブデータを取得します。2。JavaScript 1.6組み込みメソッドへの優先呼び出し
Underscoreには、JavaScript 1.6の仕様に含まれている多くの方法があります。したがって、アンダースコアオブジェクト内では、ホスト環境（ホスト環境がこれらのメソッドを実装した場合）によって提供される組み込みのメソッドを最初に呼び出して、関数の実行効率を改善します。
JavaScript 1.6をサポートしていないホスト環境の場合、Underscoreは独自の方法でそれらを実装し、開発者にとっては完全に透明です。
ここで説明したホスト環境は、node.js実行環境またはクライアントブラウザーです。
3.名前空間を変更します
Underscoreは、デフォルトでオブジェクトへのアクセスと作成に_（アンダースコア）を使用しますが、この名前は命名仕様に準拠していないか、命名競合を簡単に引き起こす可能性があります。
noconflict（）メソッドを介してアンダースコアの名前を変更し、_（underscore）変数の前に値を復元することができます。
<script type = "text/javascript"> var _ = 'カスタム変数'; </script> <script type = "text/javascript" src = "underscore/underscore-min.js"> </script> <script type = "text/javascript"> // underscore object console.dir（_）; //アンダースコアオブジェクトを私たちに名前を変更し、US = _.noconflict（）; //出力「カスタム変数」console.dir（_）; </script>
4。チェーン操作
jqueryでのリンク操作をどのように行うか覚えていますか？例えば：
$（ 'a'）.css（ 'position'、 'relative'）.attr（ 'href'、 '＃'）.show（）;
Underscoreはチェーン操作もサポートしていますが、chain（）メソッドを呼び出す必要があります。
var arr = [10、20、30]; _（arr）.chain（）.map（function（item）{return item ++;}）.first（）.value（）;Chain（）メソッドが呼び出された場合、Underscoreは閉鎖中に呼ばれるメソッドをカプセル化し、Return ValueをUnderscoreオブジェクトにカプセル化して戻ります。
//これは、チェーン操作を実装するためのアンダースコアの重要な関数です。リターン値を新しいアンダースコアオブジェクトにカプセル化し、チェーン（）メソッドを再度呼び出して、メソッドチェーンの次の関数をサポートします。 var result = function（obj、chain）{return chain？ _（obj）.chain（）：obj; }5。アンダースコアを拡張します
たとえば、Mixin（）メソッドを介してカスタムメソッドをアンダースコアに簡単に拡張できます。
_.mixin（{method1：function（object）{// todo}、method2：function（arr）{// todo}、method3：function（fn）{// todo}}）;これらの方法は、作成されたすべてのアンダースコアオブジェクトで使用できるアンダースコアプロトタイプオブジェクトに追加され、他の方法と同じ環境を享受できます。
6.コレクションを横断します
各（）およびMAP（）メソッドは、最も一般的に使用される2つのメソッドです。それらは、コレクション（配列またはオブジェクト）を反復し、コレクション内の各要素を順番に処理するために使用されます。
var arr = [1、2、3]; _（arr）.map（function（item、i）{arr [i] = item + 1;}）; var obj = {first：1、second：2} _（obj）.each（function（value、key）{return obj [key] = value + 1;}）;Map（）メソッドには、各（）メソッドと同じ役割とパラメーターがありますが、各反復関数によって返された結果を新しい配列に記録して戻ります。
7。関数スロットリング
関数スロットリングとは、関数の実行頻度または間隔を制御することを指します（水の流れを制御するゲートのように）。 Underscoreは、関数スロットリング用のdebounce（）とthrottle（）の2つの方法を提供します。
これらの2つの方法をより明確に説明するには、2つの要件を実装する必要があると仮定します。
要件1：テキストボックスにユーザーが検索条件を入力すると、一致するキーワードが自動的にクエリされ、ユーザーにプロンプトが表示されます（Tmallで検索キーワードを入力するときと同じように）
まず、最初の要件を分析します。テキストボックスのキープレスイベントをバインドできます。入力ボックスのコンテンツが変更されたら、一致するキーワードをクエリして表示します。 13文字を含む「Windows Phone」を照会したいとし、入力を完了するのに1秒しかかかりませんでした（少し速く、それが意味するものです）、そしてこの1秒以内にクエリメソッドは13回呼び出されました。これは非常に恐ろしいことであり、Tmallがこのように実装されている場合、シングルスの日の前に死ぬことを心配しています（もちろん、それは壊れやすいものではありませんが、間違いなく最良の解決策ではありません）
より良いアプローチは、ユーザーが入力を終了したとき、またはプロンプトを待っているときに一致するキーワードを照会することです（おそらく、彼は次のコンテンツを入力するのが面倒すぎます）。
最後に、どちらの場合も、ユーザーが一時的に入力を停止することを期待しているため、ユーザーが200ミリ秒間入力を一時停止した後にクエリすることにしました（ユーザーが常にコンテンツを入力している場合、彼が望むキーワードについて非常に明確であると思いますので、彼をもう一度待って促します）
この時点で、Underscoreでdebounce（）関数を使用して、この要件を簡単に実装できます。
<入力型= "text" id = "search" name = "search" /> <script type = "text /javascript"> var query = _（function（）{// query操作}）。debounce（200）; $（ '＃search'）。bind（ 'keypress'、query）; </script>私たちのコードは非常に簡潔であり、スロットリング制御がdebounce（）メソッドに実装されていることがわかります。クエリ関数が200ミリ秒以内に呼び出されていない場合、クエリ操作を実行し、入力ボックスのキープレスイベントにクエリ関数をバインドすることのみを伝えます。
クエリ機能はどのようにして生まれましたか？ debounce（）メソッドを呼び出すと、クエリ操作と時間（ミリ秒）を実行する関数を渡します。 Debounce（）メソッドは、合格時間に基づいて関数を調整し、新しい関数（つまりクエリ関数）を返します。クエリ関数を自信と大胆さで呼び出すことができ、Debounce（）メソッドは、必要に応じてそれを制御するのに役立ちます。
要件2：ユーザーがブラウザスクロールバーをドラッグしたら、サーバーインターフェイスを呼び出して新しいコンテンツがあるかどうかを確認します
2番目の要件を分析しましょう。クエリメソッドをwindow.onscrollイベントにバインドできますが、これは明らかに良い練習ではありません。ユーザーがスクロールバーを1回ドラッグし、数十人または数百のOnscrollイベントをトリガーする可能性があるためです。
上記のdebounce（）メソッドを使用してスロットリングコントロールを実行できますか？ユーザーがScrollbarのドラッグが完了したら、新しいコンテンツをクエリしますか？しかし、これは要件と矛盾しており、ユーザーはドラッグプロセス中に新しいコンテンツの変更を確認することを望んでいます。
したがって、これを行うことにしました。ユーザーがドラッグすると、2つのクエリごとの間隔は500ミリ秒以上になります。ユーザーが1秒間ドラッグすると、200個のオンスクロールイベントがトリガーされる場合がありますが、せいぜい2つのクエリしか実行できません。
UnderscoreでThrottle（）メソッドを使用すると、この要件を簡単に実装することもできます。
<script type = "text/javascript"> var query = _（function（）{// query操作はここに}）。 $（window）.bind（ 'scroll'、query）; </script>コードはまだ非常に簡潔です。なぜなら、Throttle（）メソッド内では、実装したすべてのコントロールがすでに向上しているためです。
debounce（）とthrottle（）の2つの方法が非常に似ていることがわかったかもしれませんが（コールメソッドと戻り値を含む）、それらの関数は異なります。
これらはすべて機能スロットリングに使用され、制御機能は頻繁に呼ばれず、クライアントとサーバーのリソースを保存します。
debounce（）メソッドは、関数実行間の間隔に焦点を当てています。つまり、関数の呼び出し時間は指定された時間より短くすることはできません。
スロットル（）メソッドは、関数の実行周波数に焦点を当てています。つまり、関数は指定された周波数内で1回のみ呼び出されます。
8。テンプレート分析
Underscoreは、ページ構造とロジックを効果的に整理するのに役立つ軽量のテンプレート解析機能を提供します。
例で紹介します：
<！ - レンダリングされたタグを表示するために使用されます - > <ul id = "要素"> </ul> <！ - テンプレートコンテンツをスクリプトタグに定義し、> <スクリプトタイプ= "テキスト/テンプレート" id = "tpl"> <％for（var i = 0; i <list.length; i ++）{％> <％var = < <％= item.lastname％> </span> <span> <％ - item.city％> </span> </li> <％}％}％} </script> <script = "text/javascript" src = "srcore/nouderscore-min.js"> </script> <script = "＃javascript" = $（ '＃tpl'）。html（）; // serverから取得するVARデータであるデータを作成します= {list：[{firstName： '<a href = "＃"> zhang </a>'、lastname： 'san'、city： 'shanghai'}、{firstName： 'li'、lastName： 'si'、cit 'wang'、lastName： 'wu'、city： 'guangzhou'}、{firstName： 'zhao'、lastName： 'liu'、city： 'shenzhen'}]} //テンプレートを解析し、解析されたコンテンツvar html = _.tplate（tpl、data）; //解析されたコンテンツをレンダリング要素Element.html（html）に入力します。 </script>この例では、テンプレートのコンテンツを<script>タグに入れます。タグのタイプは、JavaScriptスクリプトとして直接実行できないため、テキスト/JavaScriptの代わりにテキスト/テンプレートであることに気付くかもしれません。
また、テンプレートコンテンツを<script>に配置することをお勧めします。なぜなら、それらを<div>または他のタグに記述すると、解析のためにDOMツリーに追加される可能性があるためです（このタグを非表示にしても、回避されません）。
_.Templateテンプレート関数は、3種類のテンプレートタグのみを解析できます（これはSmartyとJSTLよりもはるかに簡単です）：
<％％>：データがレンダリングされたときに実行されるJavaScriptコードを含めるために使用されます。
<％=％>：データを出力するために使用されますが、変数、オブジェクトの属性、または関数呼び出し（関数の戻り値を出力する）になります。
<％ - ％>：データの出力に使用され、データに含まれるHTML文字をエンティティフォームに変換し（たとえば、二重引用符をフォームに変換します）、XSS攻撃を回避します。
データにHTMLをテキストとして表示する場合、<％ - ％>タグを使用することがよくあります。
Underscoreを使用すると、これらの3つのフォームのタグを変更することもできます。 {％％}、{％=％}、{％ - ％}をタグとして使用する場合、このようにテンプレートセットを変更することでそれを行うことができます。
_.templatesettings = {evaluation：// {％（[/s/s]+？）/％/}/g、補間：// {％=（[/s/s]+？）/％/}/g、escase：// {％ - （[/s/s]+？）/}/g}この例では、テンプレートのコンテンツとデータを渡して、テンプレートメソッドに入力します。これは、次の順序で処理されます。
（1）テンプレートコンテンツを実行可能ファイルJavaScriptに解析する（解析テンプレートタグ）
（2）解析されたJavaScriptスコープを、ステートメントで通過するデータオブジェクトに変更します。これにより、テンプレート内の変数を介してデータオブジェクトのプロパティに直接アクセスできます。
（3）解析されたJavaScript（テンプレートにデータを入力する）を実行する
（4）実行後に結果を返します
多くの場合、テンプレートメソッドが複数回呼び出されてデータを同じテンプレートにレンダリングする状況に遭遇します。
ページングリストがあり、リスト内の各データがテンプレートを介してレンダリングされているとします。ユーザーが次のページに入ると、次のページのデータを取得して再レンダリングします。実際、テンプレートはレンダリングされるたびに同じですが、現在説明されているテンプレートのすべての処理プロセスは常に実行されます。
実際、アンダースコアのテンプレート方法は、より効率的な呼び出し方法を提供します。上記のコードの最後の2つの文を以下に変更します。
//テンプレートを解析するには、解析されたコンテンツvar render = _.template（tpl）を返します。 var html = render（data）; //解析されたコンテンツをRender Element.html（HTML）に入力します。
微妙な違いが見つかります。テンプレートメソッドを呼び出すと、テンプレートコンテンツのみを渡しますが、データは渡されません。この時点で、テンプレートメソッドはテンプレートコンテンツを解析し、解析された実行可能ファイルJavaScriptコードを生成し、関数を返し、関数本文は解析されたJavaScriptです。したがって、データをレンダリングするためにこの関数を呼び出すと、テンプレートの解析アクションが省略されます。
返された関数を保存します（レンダリング変数に保存するのと同じように）、特に同じテンプレートを複数回レンダリングできる場合は、関数を呼び出してデータをレンダリングする必要があります。そうすることで実行効率を改善することができます（特定の改善はテンプレートの長さと複雑さに依存するはずですが、とにかく良い習慣です）。