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

Function (uh, ahem) Functions

bind

_.bind(function, object, [*arguments])

function を object に束縛します。

関数が呼ばれたときはいつでも this の値が object になります。

オプションで、引数を事前に埋めるため arguments を function に束縛します。

var func = function(greeting){ return greeting + ': ' + this.name };
func = _.bind(func, {name: 'moe'}, 'hi');
func();
=> 'hi: moe'

example

(function() {
    var func = function(greeting){ return greeting + this.title };
    func = _.bind(func, { title: 'web帳' }, 'title:');
    console.log(func());
})();

bindAll

_.bindAll(object, *methodNames)

methodNames で指定された object 上のメソッドを束縛します。

イベントハンドラとして使われる予定の関数を束縛するのにとても重宝します。

束縛しないと、あまり役に立たない this とともに呼び出されることになります。

methodNames が供給されなければオブジェクトの関数プロパティすべべてが束縛されます。

var buttonView = {
  label  : 'underscore',
  onClick: function(){ alert('clicked: ' + this.label); },
  onHover: function(){ console.log('hovering: ' + this.label); }
};
_.bindAll(buttonView, 'onClick', 'onHover');
// When the button is clicked, this.label will have the correct value.
jQuery('#underscore_button').bind('click', buttonView.onClick);

example

(function() {
  var buttonView = {
    label : 'web帳',
    onClick: function(){ alert('clicked: ' + this.label); },
    onHover: function(){ console.log('hovering: ' + this.label); }
};
_.bindAll(buttonView, 'onClick', 'onHover');

var btn = document.querySelectorAll(".btn");
for(var i = 0, il = btn.length; i < il; i++) {
  btn[i].addEventListener('click', buttonView.onClick, false);
  btn[i].addEventListener('mouseover', buttonView.onHover, false);
})();

partial

_.partial(function, [*arguments])

引数の部分適応を行います。

このような引数の束縛は、関数をオブジェクトとして受け渡しをする際に便利です。

var add = function(a, b) { return a + b; };
add5 = _.partial(add, 5);
add5(10);
=> 15

example

(function() {
  var add = function(a, b) { return a + b; };
  var x = _.partial(add, 25);
  console.log(x(20));
})();

memoize

_.memoize(function, [hashFunction])

計算結果をキャッシュすることで与えられた function をメモ化します。

遅い計算を高速化するのに役立ちます。

オプションの hashFunction を渡すと、元の関数への引数に基づいて結果を保存するハッシュキーを計算するのに使われます。

デフォルトの hashFunction はただメモ化された関数への最初の引数をキーとして使います。

var fibonacci = _.memoize(function(n) {
  return n < 2 ? n: fibonacci(n - 1) + fibonacci(n - 2);
});

example

(function() {
  var fibonacci = _.memoize(function(n) {
  return n < 2 ? n: fibonacci(n - 2) + fibonacci(n - 2);
});
console.log(fibonacci(7));
})();

delay

_.delay(function, wait, [*arguments])

setTimeout,と同様に wait ミリ秒後に function を呼び出します。

arguments, を渡すと、呼び出す時にそれらを function に転送します。

var log = _.bind(console.log, console);
_.delay(log, 1000, 'logged later');
=> 'logged later' // Appears after one second.

example

(function() { 
  var log = _.bind(console.log, console);
  _.delay(log, 2000, 'web帳');
})();

defer

_.defer(function, [*arguments])

setTimeout を遅延 0 で使うのと似ていて、現在のコールスタックがクリアされるまで function の呼び出しを延期します。

贅沢な計算を実行したり、UIスレッドを更新からブロックせずにぶつ切りでHTMLレンダリングしたりするのに役立ちます。

_.defer(function(){ alert('deferred'); });
// Returns from the function before the alert runs.

throttle

_.throttle(function, wait, [options])

関数の減速 (throttled) 版を返します。

減速版は、繰り返し呼び出された時、実際にはラップされた関数を毎 wait ミリ秒毎に一回呼び出します。

var throttled = _.throttle(updatePosition, 100);
$(window).scroll(throttled);

debounce

_.debounce(function, wait, [immediate])

デバウンスされた関数をコールすると、最後にその関数を呼び出してから wait ミリ秒経過するまで実行を延期します。

入力が途絶えた後だけ起こるべき振る舞いを実装するのに役立ちます。

例えば: Markdown コメントのプレビューのレンダリング、ウィンドウがリサイズを止めた後のレイアウトの再計算等に利用したりします。

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

example

var timer;
   var messageView = function() {
    console.log("web帳");
    clearInterval(timer);
   };
   var buttonClick = _.debounce(messageView, 500);
   var set = function() {
     timer = setInterval(function(){
       console.log("wait");
     }, 100);
   }
var btn = document.querySelector(".btn");
btn.addEventListener('click', buttonClick, false);
btn.addEventListener('click', set, false);

once

_.once(function)

一回だけ呼び出せる関数を生成します。

修正された関数を繰り返し呼び出しても初回のコールの値を返すだけで効果を持ちません。

ブーリアンフラグを設定して後でチェックしなければいけない代わりになり、初期化関数に役に立ちます。

var initialize = _.once(createApplication);
initialize();
initialize();
// Application is only created once.

example

var a = function() {
  return console.log("web帳");
}
var initialize = _.once(a);

initialize();
initialize();
initialize();

after

_.after(count, function)

count 回コールされた後でだけ動作する関数を生成します。非同期応答に役に立ちます。

手続きの前に非同期コールがすべて完了したことを確実にしたいような場合です。

var renderNotes = _.after(notes.length, render);
_.each(notes, function(note) {
  note.asyncSave({success: renderNotes});
});
// renderNotes is run once, after all notes have saved.

example

var render = function() {
  console.log("web帳");
}
var renderNotes = _.after(3, render); 
for(var i = 0; i < 4; i++) {
  renderNotes();
}

wrap

_.wrap(function, wrapper) 

wrapper 関数に最初の function を最初の引数として渡し、wrapper 関数の内部で function をラップします。

これで wrapper が function が動作する前と後でコードを実行したり、引数を調整したり、条件付きで実行したりすることが可能になります。

var hello = function(name) { return "hello: " + name; };
hello = _.wrap(hello, function(func) {
  return "before, " + func("moe") + ", after";
});
hello();
=> 'before, hello: moe, after'

compose

_.compose(*functions)

Returns the composition of a list of functions のリストの合成を返します。

合成関数では、それぞれの関数が続く関数の戻り値を使います。数学用語では、関数 f()と, g(), h() を合成することはf(g(h())) を生成します。

var greet    = function(name){ return "hi: " + name; };
var exclaim  = function(statement){ return statement.toUpperCase() + "!"; };
var welcome = _.compose(greet, exclaim);
welcome('moe');
=> 'hi: MOE!'