论坛徽章:: 1

电梯直达

1楼 [收藏(0)] [报告]

发表于 2007-04-06 10:34 |只看该作者 |倒序浏览

最近需要在javascript中控制xml数据，前段时间用dojo，但这玩意是在是太重了，太重的东西有种本能的抗拒
现在又想找点轻型的库来用，prototype、script.aculo.us和ajaxslt就是我看了半天之后的选择，这里单说ajaxslt

ajaxslt是google提供的js库，bsd协议，可以放心使用，而且google也用在了gmail、google map这些产品上，所以还是很可靠的。唯一不爽的就是资料几乎没有，只有几篇很简单的文章说一下大概用法，其实这东西也不复杂，但是资料太少不易消除初学的恐惧。
资料少就只好自己读代码了，读代码的时候看到如下注释

// Parses the given XML string with our custom, JavaScript XML parser. Written
// by Steffen Meschkat (mesch@google.com).
// For the record: in Safari, we would create native DOM nodes, but
// in Opera that is not possible, because the DOM only allows HTML
// element nodes to be created, so we have to do our own DOM nodes.

复制代码

不得了，google的哥们就是牛啊，原来是完全写了个js原生的xml实现。
下面就零零碎碎的说一下看到的东西

function XNode(type, name, opt_value, opt_owner) {
this.attributes = [];
this.childNodes = [];
XNode.init.call(this, type, name, opt_value, opt_owner);
}
// Don't call as method, use apply() or call().
XNode.init = function(type, name, value, owner) {
this.nodeType = type - 0;
this.nodeName = '' + name;
this.nodeValue = '' + value;
this.ownerDocument = owner;
this.firstChild = null;
this.lastChild = null;
this.nextSibling = null;
this.previousSibling = null;
this.parentNode = null;
}

复制代码

这个地方用call方法做了一个构造函数，从这里可以看出node类型的属性就是这些了。和平时用的DOM模型不同，这里没有tagName，代替为nodeName

function XDocument() {
// NOTE(mesch): Acocording to the DOM Spec, ownerDocument of a
// document node is null.
XNode.call(this, DOM_DOCUMENT_NODE, '#document', null, null);
this.documentElement = null;
}
XDocument.prototype = new XNode(DOM_DOCUMENT_NODE, '#document');

复制代码

Document也作为一个节点对待，这逻辑也没错，根节点嘛，整个xml全部抽象成节点集合，干得漂亮！
没看过其它DOM实现的代码是不是这么干的，我是脚本技术原教旨主义分子，想看也看不懂……

常见的dom api都有了，appendChild() replaceChild() getElementsByTagName() ....
但是没有insertAfter()，只有insertBefore()，干脆DIY一个

XNode.prototype.insertAfter = function(newNode, oldNode){
if (oldNode == newNode){ return; }
if (newNode.parentNode) {
newNode.parentNode.removeChild(newNode);
}
var newChildren = [];
for (var i = 0; i < this.childNodes.length; i++){
var c = this.childNodes[i];
newChildren.push(c);
if (c == oldNode) {
newChildren.push(newNode);
newNode.parentNode = this;
newNode.nextSibling = oldNode.nextSibling;
if (newNode.nextSibling) {
newNode.nextSibling.previousSibling = newNode;
}
oldNode.nextSibling = newNode;
newNode.previousSibling = oldNode;
if (this.lastChild == oldNode) {
this.lastChild = newNode;
}
}
}
this.childNodes = newChildren;
}

复制代码

再来DIY点好用的

// 返回所有xpath查询结果
XDocument.prototype.selectNodes = function(/* string */xpathString){
var expr = xpathParse(xpathString);
var result = expr.evaluate(new ExprContext(this));
return result.nodeSetValue();
}
// 返回第一个xpath查询结果
XDocument.prototype.selectNode = function(/* string */xpathString){
var result = this.selectNodes(xpathString);
return result.length ? result[0] : null;
}

复制代码

selectNodes()包含了xpath的使用方法，凑合着参考吧
你可以这样写

// 获取所有require属性等于1的aaa元素
var node = xmldoc.selectNodes('//aaa[@require=1]');
// 获取第一个require属性等于1的aaa元素
var node = xmldoc.selectNode('//aaa[@require=1]');

复制代码

好用的函数，xmlValue()和xmlText()
用xmlValue()获得元素的文字内容，你就不用node.firstChild.nodeValue这么麻烦了，直接xmlValue(node)完事
xmlText()返回xml文本，参数可以用node，也可以用document

暂时就这么多，ajaxslt感觉还是不错的，js原生，不用考虑那么多浏览器DOM实现差异了
Hell is another browser!!!