for JSDeferredCode Reading

Kenichirou Oyama (k1LoW)

TechTouch #0b10 2

What's JSDeferrd

• JavaScript非同期/同期ライブラリ–Author id:cho45

• とにかくすごい

TechTouch #0b10 3

JSDeferrd ex1Deferred

.next(function(){two();//2return '2';

}).next(function(x){

alert(x);//>2three();//3

});one();//1

TechTouch #0b10 4

JSDeferrd ex2Deferred

.next(function(){two();//2Deferrd.ng('error');

}).next(function(res){

three();//スルー

}).error(function(e){

alert(e);//>'error'//3

}); one();//1

TechTouch #0b10 5

JSDeferrd Code Reading• JSDeferrdを効果的に使用するためにはソースを読む必要があるらしい。

• 各地でJSDeferred Code Reading開催–Roppongi.JS–Kanasan.JS

• ソースコードはわずか400行弱

TechTouch #0b10 6

TechTouch #0b10 7

next_default()Deferred.next_default = function (fun)

{var d = new Deferred();var id = setTimeout(function () { d.call() }, 0);d.canceller = function () { clearTimeout(id) };if (fun) d.callback.ok = fun;return d;

};

TechTouch #0b10 8

？

TechTouch #0b10 9

意味不明

TechTouch #0b10 10

for JSDeferrd Code Reading

•まずはJavaScriptを理解する必要がある。–setTimeout()•非同期

–Method Chain•jQueryでも重要

–Error Handling

TechTouch #0b10 11

setTimeout()

TechTouch #0b10 12

setTimeout()

•タイマーイベント

setTimeout("alert('three')",3000);alert('one');setTimeout("alert('two')",1000);

TechTouch #0b10 13

setTimeout()

•イベントを割り当てる>イベント発火まではユーザ側にハンドリングが戻る–wait()やsleep()もブラウザに負荷をかけず作成可能

TechTouch #0b10 14

Method Chain

TechTouch #0b10 15

Method Chain

var Hoge={call:function (str){

console.log(str); return this; },callcall:function (str){

console.log(str);console.log(str); return this; }

}

Hoge.call('a').callcall('b');//> abb

TechTouch #0b10 16

jQuery/jQuery Plugin(function($) {

// $.tag$.tag = function(name) {

return jQuery('<' + name + ' />');};// tag$.fn.tag = function(name) {

var self = this;return self.pushStack($.tag(name));

};// gat$.fn.gat = function() {

var self = this;return self.end().append(self);

};})($); // function($)

Method Chain

TechTouch #0b10 17

JSDeferred Code Readingまでの道は遠い

TechTouch #0b10 18

Help!