jQuery1.5のsubとthenを使ってRSSリーダーを作る

jQuery1.5がリリースされたのでさっそく新機能を使ってみました。  
jQuery.sub jQueryのクローンを作って、jQueryを汚さずにメソッド拡張したり既存のメソッドを上書きしたり出来る。 という事なので、prependToを上書きしてprependToが実行されたら何かする事が出来るんじゃないか?と思いました。  
deferred.then() $.getや$.getJSONした時にthenをメソッドチェーンすることで第一引数に成功時のコールバック関数、第二引数に失敗時のコールバック関数を指定できます。  
とりあえず習うより慣れろということでドキュメント見ながら作ってみました。 ・RSSを読み込んで(xmlしかなかったのでyahooPipesでjson化しました) ・DOMに挿入 ・挿入された時点で「追加されました」と表示する

jQuery1.5 sub()とthen() – jsdo.it – share JavaScript, HTML5 and CSS

 

解説してみる・・・

(function() {
/*
myjQueryというjQueryオブジェクトのクローンを作ります。
myjQuery(elm).prependToが実行されたらjQuery(elm).prependToを実行します。
<em>/
  var myjQuery = jQuery.sub();
  myjQuery.fn.prependTo = function() {
    this.trigger("prependTo");
    return jQuery.fn.prependTo.apply( this, arguments );
  };
/</em>
myjQuery(elm).prependToはmyjQueryの中でしか使えないので
jQuery(function()ではなくmyjQuery(function($)にします。
<em>/
  myjQuery(function($) {
/</em>
input id="getdata"をクリックしたら
<em>/
    $("#getdata").click(function(e) {
      var $result = $('#result');
      var $this = $(this);
      var url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=0371a830783da87b5a140d750377503e&amp;_render=json';
      var timer;
/</em>
  $.getJSONを実行します。
  thenを使って成功時、失敗時のコールバック関数を指定する
<em>/
      $.getJSON(url+'&amp;_callback=?').then(
/</em>
通信成功
<em>/
        function(e){
          $result.html('');
          $this.slideUp();
          var json = e.value.items;
          var max = (json.length>10)? 10 : json.length;
          var counter = 0;
          var spd = 5000;
/</em>
myjQueryを使ってprependToした時にイベントが起こるようにする
<em>/
          var $dl = myjQuery(tmpl(json,counter));
          $dl.prependTo($result).hide().delay(500).slideDown();
          counter ++;
          timer = setInterval(function(){
            if(counter<max ){
              var $dl = myjQuery(tmpl(json,counter));
              $dl.prependTo($result).hide().delay(500).slideDown();
              counter ++;
            }else{
              clearInterval(timer);
            }
          },spd);
        },
/</em>
通信失敗。
<em>/
        function(e){
          alert(e.statusText+'\n通信に失敗しました...');
        }
      );
    });
/</em>
jsonと番号をもらってテンプレートに当てはめて返す関数。($.tmplつかえばいいんですけど・・・)
*/
    function tmpl(json,counter){
      var t = '\</p>

<p>&lt;</p>

<p>dl class="list">\
          <dt><a href="'+json[counter].link+'" target="_blank">'+(counter+1)+':'+json[counter].title+'</a></dt>\
          <dd class="cate">'+json[counter].category.join(' > ')+'</dd>\
          <dd class="desc">'+json[counter].description+'</dd>\
          \
          ';
      return t;
    }
/*
documentにprependToをイベントとしてbindして
prependToが実行されたら#appendStatusを表示して消す。
*/<br />
    $(document).bind("prependTo", function(e) {
      $('#appendStatus').stop(true,true).animate({
        top:"5px"
      },500,function(){
        $(this).delay(1500).animate({
          top:"-100px"
        },500);
      });
    });
  });
})();
 
書いていて詰まった事 「prependToしたら一旦非表示にして、表示する」という動きをしたくて 以下のようなコードを書いてました。
  var myjQuery = jQuery.sub();
  myjQuery.fn.prependTo = function() {
    this.trigger("prependTo");
    return jQuery.fn.prependTo.apply( this, arguments );
  };
  myjQuery(function($){
    var $div = myjQuery('</p>

<div />

<p>');
    $div.text('でぃぶ');
    $div.prependTo('body').hide();
  });
  $(document).bind("prependTo", function(e) {
    $(e.target).show();
  });
prependToされたらshowする。  
・・・表示されない・・・  
おかしいなぁと思って見ていたら ■頭の中の動き prependTo -> hide -> show ■実際の動き prependTo -> show -> hide  
prependToが起こったときに実行されるんだから当たり前なんですが・・・ そこで躓きました・・・  
 

1.5以前で「DOMが挿入されたら何か実行する」という動きを実装するには jQueryの$(document).readyをセレクタで使いたい | Mach3.laBlog まっはさんの作ったプラグインで実装出来ました。 1.5にバージョンアップできない環境ならこのプラグインを使うのがよさそう。

 
 


Tags: ,

 
 
 

コメントをどうぞ