add jquery/utility

grammar/function.md

@@ -309,14 +309,38 @@ Array.prototype.concat.apply([], [[[1]], [2]])
 
 ## bind方法
 
-该方法允许一个函数绑定运行时的上下文和参数。
+该方法将一个函数绑定运行时的上下文和参数，然后作为新函数返回。
 
 {% highlight javascript %}
 
 func.bind(thisValue, [arg1], [arg2], ...)
 
 {% endhighlight %}
 
+请看下面的例子。
+
+{% highlight javascript %}
+
+var o1 = {
+	p: 123,
+	m: function(){ console.log(this.p);}
+};
+
+// 不绑定上下文
+var o2 = { p: 246};
+o2.m = o1.m;
+o2.m()
+// 246
+
+// 绑定上下文
+o2.m = o1.m.bind(o1);
+o2.m()
+// 123
+
+{% endhighlight %}
+
+当上下文绑定之后，o1对象的m方法就不再读取o2对象的属性了。
+
 如果第一个参数是null或undefined，则函数运行时绑定全局环境的上下文。
 
 {% highlight javascript %}

index.md

@@ -62,6 +62,7 @@ modifiedOn: 2013-02-16
 <h2 id="jquery">jQuery</h2>
 
 - [选择器](jquery/selector.html)
+- [Utility方法](jquery/utility.html)
 - [deferred对象](jquery/deferred.html)
 
 <h2 id="library">函数库</h2>

jquery/utility.md

@@ -0,0 +1,50 @@
+---
+title: 工具方法
+layout: page
+category: jquery
+date: 2013-02-16
+modifiedOn: 2013-02-16
+---
+
+## jQuery.proxy()
+
+该方法用于绑定函数运行时的上下文和参数，也就是绑定this对象。
+
+正常情况下，下面代码中的this指向事件所针对的DOM对象。
+
+{% highlight javascript %}
+
+$('#myElement').click(function() {
+        // In this function, "this" is our DOM element.
+    $(this).addClass('aNewClass');
+});
+
+{% endhighlight %}
+
+如果我们把this对象放在setTimeout中，代码就会出错，因为函数运行的上下文已经不存在了，这时setTimeout是在全局环境的上下文运行，所以this对象指向全局对象。
+
+{% highlight javascript %}
+
+$('#myElement').click(function() {
+    setTimeout(function() {
+          // Problem! In this function "this" is not our element!
+        $(this).addClass('aNewClass');
+    }, 1000);
+});
+
+{% endhighlight %}
+
+我们可以用jQuery.proxy()方法，将this对象与DOM对象绑定。
+
+{% highlight javascript %}
+
+$('#myElement').click(function() {
+
+    setTimeout($.proxy(function() {
+        $(this).addClass('aNewClass');  // Now "this" is again our element
+    }, this), 1000);
+
+});
+
+{% endhighlight %}
+

library/underscore.md

@@ -3,7 +3,7 @@ title: Underscore.js
 layout: page
 category: library
 date: 2012-12-27
-modifiedOn: 2013-01-04
+modifiedOn: 2013-02-16
 ---
 
 ## 概述
@@ -182,6 +182,101 @@ _.pluck(stooges, 'name');
 
 ## 与函数相关的方法
 
+### bind
+
+该方法绑定函数运行时的上下文，作为一个新函数返回。
+
+{% highlight javascript %}
+
+_.bind(function, object, [*arguments]) 
+
+{% endhighlight %}
+
+请看下面的实例。
+
+{% highlight javascript %}
+
+var o = {
+	p: 2,
+	m: function (){console.log(p);}
+};
+
+o.m()
+// 2
+
+_.bind(o.m,{p:1})()
+// 1
+
+{% endhighlight %}
+
+### bindAll
+
+该方法将某个对象的所有方法（除非特别声明），全部绑定在该对象上面。
+
+{% highlight javascript %}
+
+var buttonView = {
+  label   : 'underscore',
+  onClick : function(){ alert('clicked: ' + this.label); },
+  onHover : function(){ console.log('hovering: ' + this.label); }
+};
+
+_.bindAll(buttonView);
+
+{% endhighlight %}
+
+### partial
+
+该方法绑定将某个函数与参数绑定，然后作为一个新函数返回。
+
+{% highlight javascript %}
+
+var add = function(a, b) { return a + b; };
+
+add5 = _.partial(add, 5);
+
+add5(10);
+// 15
+
+{% endhighlight %}
+
+### memoize
+
+该方法缓存一个函数针对某个参数的运行结果。
+
+{% highlight javascript %}
+
+var fibonacci = _.memoize(function(n) {
+  return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);
+});
+
+{% endhighlight %}
+
+如果一个函数有多个参数，则需要提供一个hashFunction，用来生成标识缓存的哈希值。
+
+### delay
+
+该方法可以将函数推迟指定的时间再运行。
+
+{% highlight javascript %}
+
+var log = _.bind(console.log, console);
+
+_.delay(log, 1000, 'logged later');
+// 'logged later'
+
+{% endhighlight %}
+
+## defer
+
+该方法可以将函数推迟到待运行的任务数为0时再运行，类似于setTimeout推迟0秒运行的效果。
+
+{% highlight javascript %}
+
+_.defer(function(){ alert('deferred'); });
+
+{% endhighlight %}
+
 ### throttle
 
 该方法返回一个函数的新版本。连续调用这个新版本的函数时，必须等待一定时间才会触发下一次执行。
@@ -191,7 +286,7 @@ _.pluck(stooges, 'name');
 // 返回updatePosition函数的新版本
 var throttled = _.throttle(updatePosition, 100);
 
-// 连续触发这个新版本的函数，但是每过100毫秒才会触发一次
+// 新版本的函数每过100毫秒才会触发一次
 $(window).scroll(throttled);
 
 {% endhighlight %}
@@ -206,6 +301,62 @@ $("button").on("click", _.debounce(submitForm, 1000));
 
 {% endhighlight %}
 
+### once
+
+该方法返回一个新版本的函数，使得这个函数只能被运行一次。主要用于对象的初始化。
+
+{% highlight javascript %}
+
+var initialize = _.once(createApplication);
+initialize();
+initialize();
+// Application只被创造一次
+
+{% endhighlight %}
+
+### after
+
+该方法返回一个新版本的函数，这个函数只有在被调用一定次数后才会运行，主要用于确认一组操作全部完成后，再做出反应。
+
+{% highlight javascript %}
+
+var renderNotes = _.after(notes.length, render);
+_.each(notes, function(note) {
+  note.asyncSave({success: renderNotes});
+});
+// 所有的note都被保存以后，renderNote才会运行一次
+
+{% endhighlight %}
+
+### wrap
+
+该方法将一个函数作为参数，传入另一个函数，最终返回前者的一个新版本。
+
+{% highlight javascript %}
+
+var hello = function(name) { return "hello: " + name; };
+hello = _.wrap(hello, function(func) {
+  return "before, " + func("moe") + ", after";
+});
+hello();
+// 'before, hello: moe, after'
+
+{% endhighlight %}
+
+### compose
+
+该方法接受一系列函数作为参数，由后向前依次运行，上一个函数的运行结果，作为后一个函数的运行参数。也就是说，将f(g(),h())的形式转化为f(g(h()))。
+
+{% highlight javascript %}
+
+var greet    = function(name){ return "hi: " + name; };
+var exclaim  = function(statement){ return statement + "!"; };
+var welcome = _.compose(exclaim, greet);
+welcome('moe');
+// 'hi: moe!'
+
+{% endhighlight %}
+
 ## 参考链接
 
 - [Using Underscore.js's debounce() to filter double-clicks](http://eng.wealthfront.com/2012/12/using-underscorejss-debounce-to-filter.html)