for JSDeferred
    Code Reading
Kenichirou Oyama (k1LoW)
What's JSDeferrd
   • JavaScript非同期/同期ライブラ
     リ
       –Author id:cho45
   • とにかくすごい




TechTouch #0b10                ...
JSDeferrd ex1
   Deferred
      .next(function(){
               two();
               //2
               return '2';
    ...
JSDeferrd ex2
   Deferred
      .next(function(){
               two();
               //2
               Deferrd.ng('erro...
JSDeferrd Code Reading
   • JSDeferrdを効果的に使用するた
     めにはソースを読む必要があるら
     しい。
   • 各地でJSDeferred Code Reading
     開催
    ...
TechTouch #0b10   6
next_default()
   Deferred.next_default = function (fun)
     {
     var d = new Deferred();
     var id = setTimeout(func...
?




TechTouch #0b10       8
意味不明




TechTouch #0b10          9
for JSDeferrd Code Reading
   • まずはJavaScriptを理解する必要
     がある。
       –setTimeout()
         •非同期
       –Method Chain
   ...
setTimeout()




TechTouch #0b10                  11
setTimeout()
   • タイマーイベント
   setTimeout("alert('three')",3000);
   alert('one');
   setTimeout("alert('two')",1000);




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




TechT...
Method Chain




TechTouch #0b10                  14
Method Chain
   var Hoge={
      call:function (str){
         console.log(str); return this;
      },
      callcall:func...
jQuery/jQuery Plugin
   (function($) {
     // $.tag
     $.tag = function(name) {
       return jQuery('<' + name + ' />'...
JSDeferred Code Readingまでの
                 道は遠い




TechTouch #0b10                    17
Help!




TechTouch #0b10           18
Upcoming SlideShare
Loading in …5
×

for JSDeferred Code Reading

1,502 views

Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

for JSDeferred Code Reading

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

×