(1)JavaScriptのオープンソースのコードを読んでいく #JavaScript

「2048」というゲームのソースコードを読んでいきます

ソースには以下のサイトよりアクセスできます

animframe_polyfill.jsを読んでいく

ソースコードには以下のURLよりアクセスできます

３行目の

var vendors = ['webkit', 'moz'];

これは、ブラウザのベンダーを指定していますね。webkitはおそらく、Appleのブラウザと考えることができます。mozはもちろんmozilla FireFoxですね。

４行目から８行目までの

  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
      window[vendors[x] + 'CancelRequestAnimationFrame'];
  }

ここで、windowはグローバルの変数を格納するオブジェクトですね。window.requestAnimationFrameが格納されている場合はこのループは実行されません。
まずは、
window.webkitRequestAnimationFrameの内容を
window.requestAnimationFrameに代入しています。
同じく、
window.webkitCancelAnimationFrameの内容が存在すればその内容を、存在しなければ
window.webkitCancelRequestAnimationFrameの内容を
window.cancelAnimationFrameに代入しています
それぞれ関数が代入されるわけですね。
そのあと、window.requestAnimationFrameを再びループの最初でチェックすることにより、代入されているかわかります。
おそらくですが、Appleのブラウザの場合には代入されることとなり、mozなどの他のブラウザの場合は次のループで代入されることとなります。

では、次のループでは
window.requestAnimationFrameに
window.mozRequestAnimationFrameの内容が代入され、

window.calcelAnimationFrameに
window.mozCancelAnimationFrameの内容が、それが存在しなければ
window.mozCancelRequestAnimationFrameの内容が代入されます

この２回のループでも代入されない場合は

10行目から２１行目まで

  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function (callback) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function () {
        callback(currTime + timeToCall);
      },
      timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  }

ここで、関数が代入されることとなります。
ここでは、currTimeで現在のタイムスタンプを取得し、lastTimeは最初は０で初期化されているので、timeToCallは０を代入される。
そして、callbackには、現在の時間が代入されることとなり、即座に描画が実行される。
lastTimeには、描画が実行された時間が代入されることとなり、次にrequestAnimationFrameが呼び出されると、１６秒後に描画が実行されることとなる。
つまり、このルーチンは、１６秒ごとに描画を実行する仕組みを記述したものとなる。

２３行目から２７行目では、cancelAnimationFrameがもし設定されていなければ代入されることとなる

  if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function (id) {
      clearTimeout(id);
    };
  }

では、次回は別のコードを読み解いて行きます。