E4X 概要

• ECMAScript for XML の略
• ECMAScript を拡張してネイティブで XML をサポートする仕様
• DOM ではない
• 仕様: Standard ECMA-357
• 和訳版: ECMAScript for XML (E4X) 仕様

    var x = 
      hoge
      piyo
    ;
    alert(x.item[0]); // hoge
  

みたいなことができる

E4X 概要 - 2

• Mozilla は JavaScript 1.6 からサポート
• Mozilla独自拡張あり
• ブラウザで実装されているのはFirefoxのみ

詳しいことは、前項の仕様か、E4X in Firefox 発表資料を読もう

XML_toString

名前空間がからむと、文字列化時に変なことになる

    default xml namespace = "";
    var x = <div xmlns="http://www.w3.org/1999/xhtml"/>
    x.appendChild(
non-namespace
);
    x.appendChild(
xhtml namespace
);
  

toString() すると...

    

      
non-namespace
      
xhtml namespace
    
  

空の名前空間を指定した部分が無くなってる。本来は下記のようになっているべき。

    

      
non-namespace
      
xhtml namespace
    
  

文字列化にバグがあるだけ

名前空間が上書きされているように見えるだけ

    x.*[0].name() // p == QName("", "p")
    x.*[1].name() // http://www.w3.org/1999/xhtml::p == QName("http://www.w3.org/1999/xhtml", "p")
  

XML_toString - 2

変な名前空間名が付く

    var ns = "http://www.w3.org/1999/xhtml";
    var x = <div xmlns={ns}>
      
hoge
    </div>;
    x.ns::p.@class = "hogeClass";
  

ごく普通の操作ですね？

toString() すると...

    

      
hoge
    
  

XML_toString - 3

もう一つ

    var ns = "@mozilla";
    var x = <div xmlns={ns}>
      
hoge
    </div>;
    x.ns::p.@class = "hogeClass";
  

ちょっと変な名前空間にしてみますよ...

toString() すると...

    

      
hoge
    
  

何ですか、この接頭辞は？

x.a === x.a ではない

    var x = 
      hoge
      piyo
    ;
  

    x.a === x.a // false
    x.a[0] === x.a[0] // true
  

特殊な内部メソッド[[Get]]

• E4X では Object にある内部メソッドの[[Get]]を上書き
• 新規 XMLList を作成して適合する XML オブジェクトを追加して返す。
• つまり、毎回別インスタンスを返す。
• 添字等を付けた個々の XML オブジェクトの参照先は同じ

function 名前空間

Mozilla の独自拡張

• 内部メソッド[[Get]]/[[Put]]の動きを変更させる
• プロトタイプチェーンをさかのぼったプロパティ名取得を行う

    var x = 
      hoge
      foo
      xml element
    ;
  

    x.length // xml element
    x.function::length // function length() { [native code] }
  

function 名前空間 - フィルタ編

idがbの要素を取りたいな

    var x = 
      hoge
      piyo
      fuga
    ;
  

    x.list.(@id == "b");
    // ReferenceError: reference to undefined XML name @id
  

    x.list.(hasOwnProperty("@id") && @id == "b");
    // <></>
  

    x.list.(function::hasOwnProperty("@id") && @id == "b");
    // piyo
  

function 名前空間 - prototype拡張編

XML オブジェクトを prototype 拡張して使いやすく

    XML.prototype.function::toDOMNode = function toDOMNode(){
      // ...
    }
  

• 代入できるのは function オブジェクトのみ

          XML.prototype.function::foo = "abc";
          alert(XML.prototype.function::foo); // "undefined"
          var x = <root/>;
          alert(x.function::foo); // "undefined"
        

  ブラックホールに飲み込まれた？
• __defineGetter__とか罠チック

          XML.prototype.__defineGetter__("hoge", function(){
            alert(this);
            return "HOGE";
          });
          var x = 
  hoge
  ;
          x.function::hoge; // alert が２回出る しかも、return値なし
        

初期化

• まぁ基本的に遅い
• new XML(...)より、リテラルで書いた方が多少速い
  • Firefox4β4だと逆に遅くなる
• Firefox4β4は式評価やDOM APIが速くなっている
• Firefox 3.6.8 では E4X と DOM とで速度差はほとんどない

実験ページ

ノードの参照

• 因に DOM でノードを10個作って参照したところ、5ミリ秒であった
• 遅いですね〜

実験ページ

要素追加

• appendChild遅い
• +=演算子による追加は超スーパー遅い
• XMLList に添字付きでの追加は遅くない

要素追加 - appendChild

• 2次曲線的に増加
• ブレがあるのはガーベージコレクションのせい？

実験ページ

    var x = 
;
    for (var i = 0; i < times; i++){
      x.appendChild(hoge);
    }
  

要素追加 - +=演算子

• 2次曲線的に増加
• 超遅い

実験ページ

    var x = <div/>;
    for (var i = 0; i < times; i++){
      x.* += hoge;
    }
  

要素追加 - xlist[i]に代入

• 1次曲線的な増加傾向
• 結構速い

実験ページ

    var xlist = new XMLList();
    for (var i = 0; i < times; i++){
      xlist[i] = hoge;
    }
    var x = 
{xlist}
;
  

Twitterのツイートで実験

実用面を考慮して、Twitterのツイートを50個作成し追加

• innerHTMLに一括代入速い
• ただし、+=で代入は超遅い
• E4X 実用的じゃね？

実験ページ

DOM APIを使用した要素作成は気持ちが萎えて、やってません。すみません。

まとめ

• 名前空間は弄るなｗ
  • toString()するなら要注意
• パフォーマンス
  • 基本的には遅い
  • 初期化後にあまり弄らなければ使えるレベル
    • 参照もあまりするな
    • 要素の追加厳禁
  • 複雑なノードを作成するなら E4X はそんなに遅くない
• そんなことより、見易さ、書き易さですよ！！！

ご清聴ありがとうございました
↓↓資料↓↓
http://teramako.github.com/doc/modest-20100904/index.html