このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

引き続き、underscore.js の Utility Functionsのまとめとなります。

Utility Functions

noConflict

_.noConflict()

 

変数の制御を前の所有者に戻します。
アンダースコアオブジェクトへの参照を返します。

var underscore = _.noConflict();

identity

_.identity(value)

 

引数として使用されているのと同じ値を返します。
数学では：f（x）= x
この関数は無駄に見えますが、Underscore全体でデフォルトイテレータとして使用されています。

var moe = {name: 'moe'};
moe === _.identity(moe);
=> true

times

_.times(n, iterator, [context])

指定されたイテレータ関数を n回を呼び出します。
iteratorの各呼び出しは、index引数で呼び出されます。
戻り値の配列を生成します。

注：この例では、連鎖構文を使用しています。

_(3).times(function(n){ genie.grantWishNumber(n); });

random

_.random(min, max)

 

minからmaxまでの任意の整数を返します。
1つの引数だけを渡すと、0とその数値の間の数値が返されます。

_.random(0, 100);
=> 42

mixin

_.mixin(object)

 

Underscoreを独自のユーティリティ関数で拡張することができます。
UpperersオブジェクトとOOPラッパーに関数を追加するには{name：function} 定義のハッシュを渡します。

_.mixin({
  capitalize: function(string) {
    return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
  }
});
_("fabio").capitalize();
=> "Fabio"

uniqueId

_.uniqueId([prefix])

 

クライアントサイドモデルまたはそれを必要とするDOM要素に対して、グローバルに一意のIDを生成します。
接頭辞が渡された場合は、そのIDが追加されます。

_.uniqueId('contact_');
=> 'contact_104'

escape

_.escape(string)

 

文字列をエスケープします。

_.escape('Curly, Larry & Moe');
=> "Curly, Larry & Moe"

unescape

_.unescape(string)

 

文字列をアンエスケープします。

_.unescape('Curly, Larry & Moe');
=> "Curly, Larry & Moe"

result

_.result(object, property)

指定されたプロパティの値が関数である場合、そのオブジェクトをコンテキストとして呼び出す。

それ以外の場合は、それを返します。

var object = {cheese: 'crumpets', stuff: function(){ return 'nonsense'; }};
_.result(object, 'cheese');
=> "crumpets"
_.result(object, 'stuff');
=> "nonsense"

template

_.template(templateString, [data], [settings])

 

JavaScriptテンプレートをレンダリングのために評価できる関数にコンパイルします。

JSONデータソースからHTMLの複雑なビットをレンダリングするのに便利です。

テンプレート関数は、<％...％>を使って変数を補間したり、<％...％>で任意のJavaScriptコードを実行することができます。

値を補間してHTMLエスケープしたい場合は、<％ - ...％>を使用してください。

テンプレート関数を評価するときは、dataテンプレートの自由変数に対応するプロパティを持ちます。

一回だけ書くのであれば、dataオブジェクトを2番目のパラメータとしてtemplateに渡して、テンプレート関数を返す代わりにレンダリングすることができます。

settings引数は、上書きされるべき _。templateSettingsを含むハッシュでなければなりません。

var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"

var list = "<% _.each(people, function(name) { %> <li><%= name %></li> <% }); %>";
_.template(list, {people: ['moe', 'curly', 'larry']});
=> "<li>moe</li><li>curly</li><li>larry</li>"

var template = _.template("<b><%- value %></b>");
template({value: '<script>'});
=> "<b><script></script></b>"

JavaScriptコード内からの印刷も使用できます。

これは、<％= ...％>を使用するより便利な場合があります。

var compiled = _.template("<% print('Hello ' + epithet); %>");
compiled({epithet: "stooge"});
=> "Hello stooge"

ERBスタイルのデリミタがお茶でない場合、アンダースコアのテンプレート設定を変更して、異なるシンボルを使用して補間コードを設定することができます。

補間正規表現をそのまま挿入する式、HTMLエスケープ後に挿入する式に一致するエスケープ正規表現、および評価正規表現を定義します。

正規表現を使用して、結果の文字列に挿入することなく評価しなければならない式にマッチさせます。

あなたは3つの組み合わせを定義したり、省略したりすることができます。

_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
=> "Hello Mustache!"

デフォルトでは、テンプレートは、データの値をwithステートメントを介してローカルスコープに配置します。

ただし、変数の設定で単一の変数名を指定することはできます。

これにより、テンプレートがレンダリングできる速度が大幅に向上します。

_.template("Using 'with': <%= data.answer %>", {answer: 'no'}, {variable: 'data'});
=> "Using 'with': no"

テンプレートをプリコンパイルすると、再現できないエラーをデバッグする際に大きな助けになります。

これは、プリコンパイルされたテンプレートが行番号とスタックトレースを提供できるためです。

これはクライアントでテンプレートをコンパイルするときには不可能です。

ソースプロパティはコンパイルされたテンプレート関数で利用でき、簡単にプリコンパイルすることができます。

<script>
  JST.project = <%= _.template(jstText).source %>;
</script>

Chaining

Underscoreは、好みに応じて、オブジェクト指向または機能スタイルのどちらでも使用できます。

次の2行のコードは、数字のリストを二重にする同じ方法です。

_.map([1, 2, 3], function(n){ return n * 2; });
_([1, 2, 3]).map(function(n){ return n * 2; });

chainを呼び出すと、将来のすべてのメソッド呼び出しがラップされたオブジェクトを返すようになります。

計算が終了したら、valueを使用して最終値を取得します。

曲のすべての単語の語数を取得するために、map / flatten / reduce を連鎖させる例を次に示します。

var lyrics = [
  {line: 1, words: "I'm a lumberjack and I'm okay"},
  {line: 2, words: "I sleep all night and I work all day"},
  {line: 3, words: "He's a lumberjack and he's okay"},
  {line: 4, words: "He sleeps all night and he works all day"}
];

_.chain(lyrics)
  .map(function(line) { return line.words.split(' '); })
  .flatten()
  .reduce(function(counts, word) {
    counts[word] = (counts[word] || 0) + 1;
    return counts;
  }, {})
  .value();

=> {lumberjack: 2, all: 4, night: 2 ... }

さらに、Arrayプロトタイプのメソッドはチェーンアンダースコアオブジェクトを介してプロキシされるため、チェーンに逆やプッシュを滑らせて配列を変更し続けることができます。

chain

_.chain(obj)

 

ラップされたオブジェクトを返します。

このオブジェクトのメソッドを呼び出すと、値が使用されるまでラップされたオブジェクトが引き続き返されます。

var stooges = [{name: 'curly', age: 25}, {name: 'moe', age: 21}, {name: 'larry', age: 23}];
var youngest = _.chain(stooges)
  .sortBy(function(stooge){ return stooge.age; })
  .map(function(stooge){ return <a href="http://stooge.name/">stooge.name</a> + ' is ' + stooge.age; })
  .first()
  .value();
=> "moe is 21"

value

_(obj).value()

ラップされたオブジェクトの値を抽出します。

_([1, 2, 3]).value();

=> [1, 2, 3]