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 ”和主站点 地址,谢谢。
联系方式
我的邮箱,欢迎来信(redraiment@gmail.com
)
我的CSDN博客(梦婷轩
):http://blog.csdn.net/redraiment
我的百度空间(梦婷轩
):http://hi.baidu.com/redraiment
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的