概要
underscore.jsは非常に無駄のないライブラリで、わずか4kbの圧縮があります。多数の機能プログラミング方法を提供し、JavaScriptプログラミングを大幅に促進します。 MVCフレームワークBackbone.jsは、このライブラリに基づいています。
アンダースコア(_)オブジェクトを定義し、関数ライブラリのすべてのメソッドがこのオブジェクトに属します。これらの方法は、コレクション、配列、機能、オブジェクト、ユーティリティの5つのカテゴリに大まかに分割できます。
node.jsの下にインストールします
underscore.jsは、ブラウザ環境だけでなく、node.jsでも使用できます。インストールコマンドは次のとおりです。
コードコピーは次のとおりです。
NPMインストールアンダースコア
ただし、node.jsは_を変数名として直接使用できないため、次の方法を使用してunderscore.jsを使用する必要があります。
コードコピーは次のとおりです。
var u = require( "Underscore");
コレクションに関連する方法
Arrayとオブジェクトの2つの構造を含むJavaScript言語のデータ収集。次の方法は、両方の構造に適用されます。
地図
この方法は、コレクションの各メンバーで順番に操作を実行し、返された値を順番に新しい配列に保存します。
コードコピーは次のとおりです。
_.map([1、2、3]、function(num){return num * 3;}); // [3、6、9] _.map({one:1、2:2、3:3}、function(num、key){return num * 3;}); // [3、6、9]
それぞれ
この方法はMAPに似ており、セットの各メンバーで順番に操作を実行しますが、値は返されません。
コードコピーは次のとおりです。
_.each([1、2、3]、アラート); _.each({one:1、2:2、3:3}、alert);
減らす
このメソッドは、セットの各メンバーで順番にある程度の操作を実行し、特定の初期値で操作結果を蓄積します。すべての操作が完了した後、蓄積された値が返されます。
この方法は、3つのパラメーターを受け入れます。最初のパラメーターは処理するセット、2番目のパラメーターは各メンバーで動作する関数、3番目のパラメーターは蓄積するために使用される変数です。
_.Reduce([1、2、3]、function(memo、num){return memo + num;}、0); // 6
redoceメソッドの2番目のパラメーターは操作関数であり、それ自体が2つのパラメーターを受け入れます。 1つ目は、蓄積するために使用される変数であり、2つ目はセットの各メンバーの値です。
フィルターと拒否
フィルターメソッドは、コレクションの各メンバーに順番に操作を実行し、操作結果が真であるメンバーのみを返します。
コードコピーは次のとおりです。
_.filter([1、2、3、4、5、6]、function(num){return num%2 == 0;}); // [2、4、6]
拒否方法は、操作結果がfalseであるメンバーのみを返します。
コードコピーは次のとおりです。
_.Reject([1、2、3、4、5、6]、function(num){return num%2 == 0;}); // [1、3、5]
すべてといくつか
すべての方法は、コレクションの各メンバーで順番に操作を実行します。すべてのメンバーの操作結果が真である場合、それはtrueを返し、それ以外の場合は虚偽を返します。
コードコピーは次のとおりです。
_.every([1、2、3、4、5、6]、function(num){return num%2 == 0;}); // 間違い
一部のメソッドは、メンバーの操作結果がある限り、真実を返します。それ以外の場合は偽りです。
コードコピーは次のとおりです。
_。 // 真実
探す
この方法は、セットの各メンバーで順番に操作を実行し、最初の操作結果が真であるメンバーを返します。すべてのメンバーの操作結果が虚偽の場合、未定義が返されます。
コードコピーは次のとおりです。
_.find([1、2、3、4、5、6]、function(num){return num%2 == 0;}); // 2
含む
値がセット内にある場合、メソッドはtrueを返し、それ以外の場合はfalseを返します。
コードコピーは次のとおりです。
_.contains([1、2、3]、3); // 真実
カウントビー
このメソッドは、セットの各メンバーでシーケンスで何らかの操作を実行し、クラスと同じ操作結果を持つメンバーをカウントし、最後にオブジェクトを返し、各操作結果に対応するメンバーの数を示します。
コードコピーは次のとおりです。
_.countby([1、2、3、4、5]、function(num){return num%2 == 0? 'ven': 'dud';}); // {奇数:3、偶数:2}
シャッフル
この方法は、障害のある秩序のコレクションを返します。
コードコピーは次のとおりです。
_.Shuffle([1、2、3、4、5、6]); // [4、1、6、3、5、2]
サイズ
この方法は、コレクションのメンバーの数を返します。
コードコピーは次のとおりです。
_.size({one:1、2:2、3:3}); // 3
オブジェクト関連の方法
アレイ
この方法は、オブジェクトを配列に変換します。
コードコピーは次のとおりです。
_.toarray({a:0、b:1、c:2}); // [0、1、2]
摘み取る
この方法は、複数のオブジェクトのプロパティの値を配列に抽出します。
コードコピーは次のとおりです。
var standes = [{name: 'moe'、age:40}、{name: 'larry'、age:50}、{name: 'curly'、age:60}]; _.pluck(stooges、 'name'); // ["Moe"、 "Larry"、 "Curly"]]
関数に関連する方法
バインド
この方法は、関数ランタイムのコンテキストに結合し、新しい関数として戻ります。
コードコピーは次のとおりです。
_.bind(function、object、[*arguments])
以下の例をご覧ください。
コードコピーは次のとおりです。
var o = {p:2、m:function(){console.log(p);}}; om()// 2 _.bind(om、{p:1})()// 1
バインド
この方法は、オブジェクトのすべてのメソッド(特に指定されていない限り)をそのオブジェクトに結合します。
コードコピーは次のとおりです。
var buttonView = {label: 'anderscore'、onclick:function(){alert( 'clicked:' + this.label); }、onhover:function(){console.log( 'hovering:' + this.label); }}; _.bindall(buttonView);
部分的
このメソッドは、関数をパラメーターに結合し、新しい関数として戻ります。
コードコピーは次のとおりです。
var add = function(a、b){return a + b; }; add5 = _.partial(add、5); add5(10); // 15
メモ
この方法は、パラメーターの関数の実行結果をキャッシュします。
コードコピーは次のとおりです。
var fibonacci = _.memoize(function(n){return n <2?n:fibonacci(n -1) + fibonacci(n -2);});
関数に複数のパラメーターがある場合、キャッシュを識別するハッシュ値を生成するには、ハッシュ機能を提供する必要があります。
遅れ
この方法では、実行する前に指定された時間のために関数を遅らせることができます。
コードコピーは次のとおりです。
var log = _.bind(console.log、console); _.delay(log、1000、 'logged late'); //「後でログに記録」
延期
この方法では、実行するタスクの数が0秒遅れているという効果と同様に、実行する前に0になるまで関数を延期できます。
コードコピーは次のとおりです。
_.defer(function(){alert( 'Deferred');});
スロットル
このメソッドは、関数の新しいバージョンを返します。この新しいバージョンの関数を継続的に呼び出す場合、次の実行がトリガーされる前に一定期間待つ必要があります。
コードコピーは次のとおりです。
// updateposition関数の新しいバージョンを返しますvar throttled = _.throttle(updatePosition、100); //関数の新しいバージョンは、$(window).scroll(throttled)のみをトリガーします。
デバウンス
このメソッドは、関数の新しいバージョンも返します。この新しいバージョンの関数が呼び出されるたびに、最後の呼び出しからの特定の時間間隔である必要があります。そうしないと、無効になります。その典型的なアプリケーションは、ユーザーがボタンをダブルクリックするのを防ぐためであり、2つのフォームの提出をもたらします。
コードコピーは次のとおりです。
$( "button")。
一度
このメソッドは、関数の新しいバージョンを返して、関数を1回しか実行できません。主にオブジェクトの初期化に使用されます。
コードコピーは次のとおりです。
var initialize = _.once(createapplication); initialize(); initialize(); //アプリケーションは一度だけ作成されます
後
このメソッドは、関数の新しいバージョンを返します。これは、特定の回数と呼ばれた後にのみ実行されます。主に、反応する前に一連の操作が完了することを確認するために使用されます。
コードコピーは次のとおりです。
var rendernotes = _.after(notes.length、render); _。 //すべてのメモが保存され、Rendernoteは1回実行されます
包む
この方法は、1つの関数をパラメーターとして別の関数に渡し、最後に前者の新しいバージョンを返します。
コードコピーは次のとおりです。
var hello = function(name){return "hello:" + name; }; hello = _.wrap(hello、function(func){return "before" + func( "moe") + "、after";});こんにちは(); // '前、こんにちは:Moe、後」
構成します
この方法は、一連の関数をパラメーターとして受け入れ、背面から前方へと実行され、以前の関数の実行結果は次の関数の実行パラメーターとして使用されます。つまり、f(g()、h())の形式をf(g(h()))に変換します。
コードコピーは次のとおりです。
var greet = function(name){return "hi:" + name; }; var excem = function(statement){return Statement + "!"; }; var welcome = _.compose(explaim、greet);ようこそ( 'Moe'); // 'こんにちは:Moe!'
ツールと方法
テンプレート
この方法は、HTMLテンプレートをコンパイルするために使用されます。 3つのパラメーターを受け入れます。
コードコピーは次のとおりです。
_.template(templatestring、[data]、[settings])
3つのパラメーターの意味は次のとおりです。
Templatestring:テンプレート文字列
データ:テンプレートのデータを入力します
設定:設定
templatestring
テンプレート文字列Templatestringは通常のHTML言語であり、変数が<%=…%>の形で挿入されます。データオブジェクトは、変数の値を提供する責任があります。
コードコピーは次のとおりです。
var txt = "
<%= word%>
コードコピーは次のとおりです。
"; _.template(txt、{word:" hello world "})//"
こんにちは世界
コードコピーは次のとおりです。
「
変数の値に5つの特殊文字(&<>” ' /)が含まれている場合、<% - …%>で逃げる必要があります。
コードコピーは次のとおりです。
var txt = "
<%-Word%>
コードコピーは次のとおりです。
"; _.template(txt、{word:" h&w "})//
H&W
JavaScriptコマンドは、<%…%>の形で挿入できます。以下は判断声明の例です。
コードコピーは次のとおりです。
var txt = "<%var i = 0; if(i <1){%>" + "<%= word%>" + "<%}%>"; _.template(txt、{word: "hello world"})// hello world
一般的な使用法には、ループステートメントが含まれます。
コードコピーは次のとおりです。
var list = "<%_.each(人、function(name){%>
<%= name%> <%}); %> "; _.template(list、{people:['moe'、 'curly'、 'larry']}); //"
MOE
縮れた
ラリー」
テンプレートメソッドに最初のパラメーターTemplatestringのみがあり、2番目のパラメーターが省略されている場合、関数が返され、将来この関数にデータを入力できます。
コードコピーは次のとおりです。
var t1 = _.template( "hello <%= user%>!"); t1({user: ""})// 'hello!'
データ
Templatestringのすべての変数は、OBJオブジェクトの内部的に属性であり、OBJオブジェクトは2番目のパラメーターデータオブジェクトを指します。次の2つの文は同等です。
コードコピーは次のとおりです。
_.template( "hello <%= user%>!"、{user: ""})_.template( "hello <%= obj.user%>!"、{user: ""}))
OBJオブジェクトの名前を変更する場合は、3番目のパラメーターに設定する必要があります。
コードコピーは次のとおりです。
_.template( "<%if(data.title){%> title:<%= title%> <%}%>"、null、{variable: "data"});
テンプレートは変数を置き換えるときに内部的にステートメントを使用して使用するため、上記の方法はより速く実行されます。