E4X教程[1] - 入门

基本语法

如果启用了 E4X，基本的 XML 元素就是有效的语法。例如：

var element = <foo/>

在开启了 E4X 的浏览器里完全有效。

变量的声明也不局限于单个元素，并且和 JavaScript 一样可以扩多行。

var element2 = <foo> <bar/> </foo>

此外，和一般的 XML 文档一样，你能给一个元素指定属性。

var element3 = <foo baz="1"/>

操作元素

E4X 的目标是为 JavaScript 程序员提供一个简单的方法来操作 XML 文档，而无需通过 DOM 接口。不过，很多你在 DOM 中用过的函数也能用到 E4X 中。最基本的就是 appendChild：

var element1 = <foo/>var element2 = <bar/>element1.appendChild(element2);

它会产生你期望的正确的 XML 文档：

<foo> <bar/></foo>

JavaScript 变量

当 XML 文档需要和 JavaScript 做紧密交互时，E4X 真正强大的地方才得以彰显。通过特定的语法，我们能将 JavaScript 变量的值赋给 E4X 元素。这是用大括号（{}）标记。

var a = 2;var b = <foo>{a}</foo>;

创建了一段 XML 文档，内容为 <foo>2</foo>。

你也可以将大括号标记用于元素的属性（名字或值）。例如：

var a = 2;var b = 'bar';var c = <foo {b}={a}>"hi"</foo>;

创建的 XML 稍有不同：<foo bar="2">"hi"</foo>。

注意：XML 元素只接受文本作为他们的值。大括号标记真正发生的是调用变量的 toString 方法，并将返回值填到相应位置。例如：

var a = {foo: 1};var b = <bar>{a}</bar>

实际上产生的文档是 <bar>[object Object]</bar>。

在内容中使用内联函数

虽然大括号限定执行单条语句，但通过匿名函数内联可以执行一些额外的处理：

var a = 'foo';var b = <bar>{function () {var c = a.toUpperCase(); var d = 5 * 5; return c + d;}()}</bar>

上述代码产生：<bar>FOO25</bar>

该用法更多的讨论请参加 E4X for templating。

序列化

E4X 最强大的工具就是简单地调用 .toXMLString() 就可以将整个 XML 文档（或其中部分）序列化到字符串中。

var element1 = <foo/>;var element2 = <bar/>;element1.apppendChild(element2);element1.toXMLString();

输出为：

<foo> <bar/></foo>

本例使用 toString() 也能达到相同效果，不过在一个只有文本内容的元素上调用 toString() 将之产生文本内容（例如，<foo>abc</foo>.toString(); 会只产生 'abc'）。

---

为方便其他朋友提问和指正，转载是请保持文章完整性，并以超链接形式注明原始作者“redraiment”和主站点地址，谢谢。

联系方式

我的邮箱，欢迎来信（[e-mail]）
我的CSDN博客（梦婷轩）：http://blog.csdn.net/redraiment
我的百度空间（梦婷轩）：http://hi.baidu.com/redraiment