es2-postprocessorでOpera8未満、IE5.5未満でも動くJavaScriptを書く

本件で得られた知見を水平展開すれば、Ajax 時代(2005年～)のコード資産の恩恵をよりレガシーなブラウザへもたらすことが出来るでしょう。多分。

1. これまでに確認したレガシーな DHTML ブラウザの ES3 サポートと実装のバグ

最初期の DHTML ブラウザの中には、IE6(2001年)をサポートするライブラリが動かないものがあります。これらのブラウザはデバッグ機能も貧弱で対応は困難を極めたりします。あらかじめこのような対応表を参照することで状況は一歩前進します。多分。

構文エラーが解消するバージョン

1. 対処法は 2. を参照。

2. 「ラベル付きステートメント」を使うコードはほぼ見ませんが、Closure Compiler がアグレッシブにコードの最適化を行った結果、出力されることがあります。

   do{break}while(false) に書き換えることで構文エラーを回避できます。

3. IE5 以下の Object リテラルのプロパティは数値文字列には対応するので、コードを書き換えます。Closure Compiler は常に Object リテラルの数値文字プロパティを数値に書き換えてしまうので、es2-postprocessor で修正します。

4. JavaScript Object Reference > RegExp (Built-in Object) の各構文の実装状況。

実行時に起きるエラーや問題が解消するバージョン

1. buggy な挙動は「Javascript 実装状況と深刻なバグ」で確認してください。
2. 未検証ですが ActiveXObject や CSSOM でも起きそうです。ofk 氏による Function.prototype.apply の polyfill からの変更点。
3. IE5 では空の配列に --this.length の操作を行うと、長さが 4294967296 の配列になってしまう。shift と pop の polyfill で問題を起こしていました。
4. Opera 7.x は空の配列に --this.length の操作を行うと、エラーは起きず this.length === 0 です。

2. ES3 をよりレガシーな DHTML ブラウザ用に書き換えるポイント

2.1. instanceof オペレーター

instanceof の替わりに constructor を調べる。継承クラスの可能性がある場合は、__proto__ を使えない為、スーパークラスを辿る仕組みを用意する必要があります。

次のコードは、ブラウザの開発メニューのコンソールで試す為のコードです。

(function(){
  function SuperClass(){};
  function SubClass(){};
  SubClass.prototype = new SuperClass();
  SubClass.prototype.__super__ = SubClass.prototype.constructor;
  SubClass.prototype.constructor = SubClass;

  return (function(instance, Class){
    if(instance != null){
      var proto = instance;
      do{
        if(proto.constructor === Class){
          return (instance instanceof Class) ? 'Good.' : 'Bad!';
        };
        proto = proto.__super__ && proto.__super__.prototype;
      }while(proto);
    };
    return (instance instanceof Class) ? 'Bad!' : 'Good.'
  })(new SubClass(), SuperClass);
})();

但し、このような簡単なコードの場合、new SubClass(), Object などの組み込みオブジェクトの調査に失敗します。

2.2. try~catch ステートメントと throw ステートメント

そもそも、エラーの出る条件を特定して、条件に合致した場合は、トライしない。

エラーの発生する可能性のあるブラウザオブジェクトに VBScript で触ってエラーをキャッチする(Windows 版 IE のみ, document.activeElement など。)。

または非同期に書き換える事が許されるなら、タイマー(setTimeout)のコールバック内でエラーの可能性のある関数を実行して、エラーが起きた場合は window.onerror ハンドラーでコールバック等の処理をする。(未検証)

2.3. in オペレーター

in の替わりに this.XX !== undefined か調べる。undefined のプロパティが存在する場合は for in 文を使う。

function isMember(key, obj){
  if(obj != null){
    if(obj[key] !== void 0){
      return true;
    };
    for(var prop in obj){
      if(prop === key) return true;
    };
  };
  return false;
};

また for(prop in null) は Opera~7.2x でエラーになるので、事前に null のチェックをする事。

3. es2-postprocessor のご紹介