files/zh-cn/archive/web/e4x_tutorial/introduction/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

---
title: Introduction
slug: Archive/Web/E4X_tutorial/Introduction
tags:
  - E4X
  - JavaScript
  - Tutorial
translation_of: Archive/Web/E4X_tutorial/Introduction
---
<h2 id="基本语法">基本语法</h2>
<p>如果启用了 E4X，基本的 XML 元素就是有效的语法。例如：</p>
<pre class="brush: js">var element = &lt;foo/&gt;
    </pre>
<p>在开启了 E4X 的浏览器里完全有效。</p>
<p>变量的声明也不局限于单个元素，并且和 JavaScript 一样可以扩多行。</p>
<pre class="brush: js">var element2 = &lt;foo&gt;
                     &lt;bar/&gt;
               &lt;/foo&gt;
</pre>
<p>此外，和一般的 XML 文档一样，你能给一个元素指定属性。</p>
<pre class="brush: js">var element3 = &lt;foo baz="1"/&gt;
    </pre>
<p>操作元素</p>
<p>E4X 的目标是为 JavaScript 程序员提供一个简单的方法来操作 XML 文档，而无需通过 DOM 接口。不过，很多你在 DOM 中用过的函数也能用到 E4X 中。最基本的就是 appendChild：</p>
<pre class="brush: js">var element1 = &lt;foo/&gt;
var element2 = &lt;bar/&gt;
element1.appendChild(element2);
</pre>
<p>它会产生你期望的正确的 XML 文档：</p>
<p><code>&lt;foo&gt;<br>
   &lt;bar/&gt;<br>
 &lt;/foo&gt; </code></p>
<p><code>JavaScript 变量</code></p>
<p><code>当 XML 文档需要和 JavaScript 做紧密交互时，E4X 真正强大的地方才得以彰显。通过特定的语法，我们能将 JavaScript 变量的值赋给 E4X 元素。这是用大括号（{}）标记。</code></p>
<pre class="brush: js"><code>var a = 2;
var b = &lt;foo&gt;{a}&lt;/foo&gt;;
</code></pre>
<p><code>创建了一段 XML 文档，内容为 &lt;foo&gt;2&lt;/foo&gt;。</code></p>
<p><code>你也可以将大括号标记用于元素的属性（名字或值）。例如：</code></p>
<pre class="brush: js"><code>var a = 2;
var b = 'bar';
var c = &lt;foo {b}={a}&gt;"hi"&lt;/foo&gt;;</code></pre>
<p><code>创建的 XML 稍有不同：&lt;foo bar="2"&gt;"hi"&lt;/foo&gt;。</code></p>
<p><code>注意：XML 元素只接受文本作为他们的值。大括号标记真正发生的是调用变量的 toString 方法，并将返回值填到相应位置。例如：</code></p>
<pre class="brush: js"><code>var a = {foo: 1};
var b = &lt;bar&gt;{a}&lt;/bar&gt;</code></pre>
<p><code>实际上产生的文档是 &lt;bar&gt;[object Object]&lt;/bar&gt;。</code></p>
<h2 id="在内容中使用内联函数"><code>在内容中使用内联函数</code></h2>
<p><code>虽然大括号限定执行单条语句，但通过匿名函数内联可以执行一些额外的处理：</code></p>
<pre class="brush: js"><code>var a = 'foo';
var b = &lt;bar&gt;{function () {var c = a.toUpperCase(); var d = 5 * 5; return c + d;}()}&lt;/bar&gt;</code></pre>
<p><code>上述代码产生：&lt;bar&gt;FOO25&lt;/bar&gt;</code></p>
<p><code>该用法更多的讨论请参加 <a href="/en/E4X_for_templating#Inline_functions" title="en/E4X_for_templating#Inline_functions">E4X for templating</a> 。</code></p>
<h2 id="序列化"><code>序列化</code></h2>
<p><code>E4X 最强大的工具就是简单地调用 .toXMLString() 就可以将整个 XML 文档（或其中部分）序列化到字符串中。</code></p>
<pre class="brush: js"><code>var element1 = &lt;foo/&gt;;
var element2 = &lt;bar/&gt;;
element1.apppendChild(element2);
element1.toXMLString();</code></pre>
<p><code>输出为：</code></p>
<p><code><code>&lt;foo&gt;<br>
   &lt;bar/&gt;<br>
 &lt;/foo&gt;</code></code></p>
<p><code>本例使用 toString() 也能达到相同效果，不过在一个只有文本内容的元素上调用 toString() 将之产生文本内容（例如，&lt;foo&gt;abc&lt;/foo&gt;.toString(); 会只产生 'abc'）。</code></p>