Download - for JSDeferred Code Reading
![Page 1: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/1.jpg)
for JSDeferredCode Reading
Kenichirou Oyama (k1LoW)
![Page 2: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/2.jpg)
TechTouch #0b10 2
What's JSDeferrd
• JavaScript非同期/同期ライブラリ–Author id:cho45
• とにかくすごい
![Page 3: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/3.jpg)
TechTouch #0b10 3
JSDeferrd ex1Deferred
.next(function(){two();//2return '2';
}).next(function(x){
alert(x);//>2three();//3
});one();//1
![Page 4: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/4.jpg)
TechTouch #0b10 4
JSDeferrd ex2Deferred
.next(function(){two();//2Deferrd.ng('error');
}).next(function(res){
three();//スルー
}).error(function(e){
alert(e);//>'error'//3
}); one();//1
![Page 5: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/5.jpg)
TechTouch #0b10 5
JSDeferrd Code Reading• JSDeferrdを効果的に使用するためにはソースを読む必要があるらしい。
• 各地でJSDeferred Code Reading開催–Roppongi.JS–Kanasan.JS
• ソースコードはわずか400行弱
![Page 6: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/6.jpg)
TechTouch #0b10 6
![Page 7: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/7.jpg)
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;
};
![Page 8: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/8.jpg)
TechTouch #0b10 8
?
![Page 9: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/9.jpg)
TechTouch #0b10 9
意味不明
![Page 10: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/10.jpg)
TechTouch #0b10 10
for JSDeferrd Code Reading
•まずはJavaScriptを理解する必要がある。–setTimeout()•非同期
–Method Chain•jQueryでも重要
–Error Handling
![Page 11: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/11.jpg)
TechTouch #0b10 11
setTimeout()
![Page 12: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/12.jpg)
TechTouch #0b10 12
setTimeout()
•タイマーイベント
setTimeout("alert('three')",3000);alert('one');setTimeout("alert('two')",1000);
![Page 13: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/13.jpg)
TechTouch #0b10 13
setTimeout()
•イベントを割り当てる>イベント発火まではユーザ側にハンドリングが戻る–wait()やsleep()もブラウザに負荷をかけず作成可能
![Page 14: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/14.jpg)
TechTouch #0b10 14
Method Chain
![Page 15: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/15.jpg)
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
![Page 16: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/16.jpg)
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
![Page 17: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/17.jpg)
TechTouch #0b10 17
JSDeferred Code Readingまでの道は遠い
![Page 18: for JSDeferred Code Reading](https://reader036.vdocuments.pub/reader036/viewer/2022081821/547c307ab379594e2b8b4f14/html5/thumbnails/18.jpg)
TechTouch #0b10 18
Help!