<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>潔靜精微 &#187; spry</title>
	<atom:link href="http://julabs.me/blog/tags/spry/feed/" rel="self" type="application/rss+xml" />
	<link>http://julabs.me/blog</link>
	<description>想努力创造完美的东西，必须具备心灵的纯洁，同时富于宗教精神。</description>
	<lastBuildDate>Wed, 18 Jan 2012 06:34:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>Spry源码笔记——自动将Document转换成JSON格式</title>
		<link>http://julabs.me/blog/front/decode-document-to-object/</link>
		<comments>http://julabs.me/blog/front/decode-document-to-object/#comments</comments>
		<pubDate>Tue, 02 Feb 2010 05:02:29 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[json]]></category>
		<category><![CDATA[spry]]></category>
		<category><![CDATA[xml]]></category>

		<guid isPermaLink="false">http://julabs.me/blog/?p=167</guid>
		<description><![CDATA[在运用Ajax中，有很多操作都是将获得的XML文档转换成JSON格式的，方便JavaScript操作。在Adobe Spry源码里发现了有专门进行这种转换的函数，大大减轻了工作量。我把它提取出来，做了一些改动。 首先创建一个函数，用于判断一个节点是否只含有文本内容： /** * 判断该节点是否只包含文本节点 * @param {Object} node 用于判断的 节点 * @return {Boolean} 如果只包含文本内容为 true */ var nodeHasValue = function(node){ if(node){ var child = node.firstChild; if (child &#38;&#38; child.nextSibling === null &#38;&#38; (child.nodeType === 3 /* Node.TEXT_NODE */ &#8230; <a href="http://julabs.me/blog/front/decode-document-to-object/">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>在运用Ajax中，有很多操作都是将获得的<a href="http://www.w3.org/XML/" target="_blank">XML</a>文档转换成<a href="http://www.json.org/" target="_blank">JSON</a>格式的，方便JavaScript操作。在<a href="http://labs.adobe.com/technologies/spry/home.html" target="_blank">Adobe Spry</a>源码里发现了有专门进行这种转换的函数，大大减轻了工作量。我把它提取出来，做了一些改动。</p>
<p>首先创建一个函数，用于判断一个节点是否只含有文本内容：</p>
<pre><code class="javascript">/**
 * 判断该节点是否只包含文本节点
 * @param {Object} node 用于判断的 节点
 * @return {Boolean} 如果只包含文本内容为 true
 */
var nodeHasValue = function(node){
	if(node){
		var child = node.firstChild;
		if (child &amp;&amp; child.nextSibling === null &amp;&amp; (child.nodeType === 3 /* Node.TEXT_NODE */ || child.nodeType === 4 /* CDATA_SECTION_NODE */))
			return true;
	}
	return false;
}
</code></pre>
<p>下面是<code>nodeToObject</code>函数，是整个功能模块的核心，它的功能是把<strong>节点</strong>（node）转换成<a href="http://www.json.org/" target="_blank">JSON</a>格式：</p>
<pre><code class="javascript">/**
 * 把 Node 转换成 JSON 格式
 * @param {Object} node 用于转换的 节点
 * @requires EYoo.XML.nodeHasValue 判断该节点是否只包含文本节点
 * @return {Object} obj JSON 格式的信息
*/
var nodeToObject = function(node){
	if (!node)
		return null;
	var obj = {};
	// Add all attributes as properties of the object.
	for (var i = 0; i &lt; node.attributes.length; i++){
		var attr = node.attributes[i];
		var attrName = "@" + attr.name;
		obj[attrName] = attr.value;
	}

	var child;
	// 判断该节点是否只包含文本节点
	if(nodeHasValue(node)){
		try{
			child = node.firstChild;
			if (child.nodeType == 3 /* TEXT_NODE */){
				obj[child.nodeName] = child.data;
			}else if (child.nodeType == 4 /* CDATA_SECTION_NODE */){
				obj[child.nodeName] = child.data;
			}
		}catch(e){
			throw(&quot;nodeToObject() exception caught: &quot; + e + &quot;\n&quot;);
		}

	}else{
		// 如果不是文本节点
		child = node.firstChild;
		while(child){
			if (child.nodeType == 1 /* Node.ELEMENT_NODE */){
				var isArray = false;
				var tagName = child.nodeName;

				// 如果已经存在该节点信息了，则转换成 Array 类型
				if(obj[tagName]){
					if(obj[tagName].constructor != Array){
						var curValue = obj[tagName];
						obj[tagName] = new Array;
						obj[tagName].push(curValue);
					}
					isArray = true;
				}
				var childObj = nodeToObject(child);

				if (isArray)
					obj[tagName].push(childObj);
				else
					obj[tagName] = childObj;
			}
			child = child.nextSibling;
		}
	}
	return obj;
}
</code></pre>
<p><span id="more-167"></span></p>
<p>最后就是<code>documentToObject</code>函数，它的功能是把整个<a href="http://www.w3.org/XML/" target="_blank">XML</a>文档转换成<a href="http://www.json.org/" target="_blank">JSON</a>格式：</p>
<pre><code class="javascript">var documentToObject = function(xmlDoc){
	var obj = null;
	if(xmlDoc &amp;&amp; xmlDoc.firstChild){
		var child = xmlDoc.firstChild;
		while(child){
			if(child.nodeType == 1 /* Node.ELEMENT_NODE */){
				obj = {};
				obj[child.nodeName] = nodeToObject(child);
				break;
			}
			child = child.nextSibling;
		}
	}
	return obj;
}
</code></pre>
<p>另外还有一个<code>encodeEntities</code>函数，它的功能是对文本内容进行转义，防止在使用<code>innerHTML</code>方法时会出现错误：</p>
<pre><code class="javascript">var encodeEntities = function(str){
	if (str &amp;&amp; str.search(/[&amp;&lt;&gt;&quot;]/) != -1){
		str = str.replace(/&amp;/g, &quot;&amp;amp;&quot;);
		str = str.replace(/&lt;/g, &quot;&amp;lt;&quot;);
		str = str.replace(/&gt;/g, &quot;&amp;gt;&quot;);
		str = str.replace(/&quot;/g, &quot;&amp;quot;&quot;);
	}
	return str;
}
</code></pre>
]]></content:encoded>
			<wfw:commentRss>http://julabs.me/blog/front/decode-document-to-object/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Spry源码笔记——自动获得DOM元素所有的属性值</title>
		<link>http://julabs.me/blog/front/auto-get-attributes-of-dom/</link>
		<comments>http://julabs.me/blog/front/auto-get-attributes-of-dom/#comments</comments>
		<pubDate>Mon, 11 Jan 2010 15:23:26 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[前端]]></category>
		<category><![CDATA[attribute]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[spry]]></category>
		<category><![CDATA[属性]]></category>

		<guid isPermaLink="false">http://julabs.me/blog/?p=160</guid>
		<description><![CDATA[Adobe Spry是一个为Web设计人员开发的Ajax框架，它使得在一个HTML页面中创建丰富体验成为了可能。按说Spry是由Adobe公司开发，应该是非常强大的，但在中国却不是十分流行，可能是它的文档资料太少的缘故吧。但由于Spry是面向设计人员开发的，所以它的源码很容易看懂，对于学习来说十分合适。 以前一直在找一种能够自动获得DOM元素所有属性值的方法，今天在看Spry源码时找到了一段代码可以实现这种功能，我把它提取出来，单独作为一个函数： function getAllAttributes(node){ var obj = {}; // 判断输入的是否是元素节点 if(Boolean(node) &#38;&#38; node.nodeType == 1){ for(var i = 0; i &#60; node.attributes.length; i++){ var attr = node.attributes[i]; obj[attr.name] = attr.value; } } return obj; } 比如有下面的HTML代码： &#60;div id=&#34;testid&#34; style=&#34;width:100px;&#34; &#8230; <a href="http://julabs.me/blog/front/auto-get-attributes-of-dom/">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://labs.adobe.com/technologies/spry/home.html" target="_blank">Adobe Spry</a>是一个为Web设计人员开发的Ajax框架，它使得在一个HTML页面中创建丰富体验成为了可能。按说<a href="http://labs.adobe.com/technologies/spry/home.html" target="_blank">Spry</a>是由<a href="http://www.adobe.com/" target="_blank">Adobe</a>公司开发，应该是非常强大的，但在中国却不是十分流行，可能是它的文档资料太少的缘故吧。但由于<a href="http://labs.adobe.com/technologies/spry/home.html" target="_blank">Spry</a>是面向设计人员开发的，所以它的源码很容易看懂，对于学习来说十分合适。</p>
<p>以前一直在找一种能够自动获得DOM元素所有属性值的方法，今天在看<a href="http://labs.adobe.com/technologies/spry/home.html" target="_blank">Spry</a>源码时找到了一段代码可以实现这种功能，我把它提取出来，单独作为一个函数：</p>
<pre><code class="javascript">
function getAllAttributes(node){
	var obj = {};
	// 判断输入的是否是元素节点
	if(Boolean(node) &amp;&amp; node.nodeType == 1){
		for(var i = 0; i &lt; node.attributes.length; i++){
			var attr = node.attributes[i];
			obj[attr.name] = attr.value;
		}
	}
	return obj;
}
</code></pre>
<p>比如有下面的HTML代码：</p>
<pre><code class="html">
&lt;div id=&quot;testid&quot; style=&quot;width:100px;&quot; title=&quot;测试&quot;&gt;
	Test
&lt;/div&gt;</code></pre>
<p>利用下面的JS代码：</p>
<pre><code class="javascript">
console.log(getAllAttributes(document.getElementById('testid')));
</code></pre>
<p>可以得到JSON格式的DOM属性值：</p>
<pre><code class="javascript">
{
	id:&quot;testid&quot;,
	style:&quot;width:100px;&quot;,
	title:&quot;测试&quot;
}
</code></pre>
]]></content:encoded>
			<wfw:commentRss>http://julabs.me/blog/front/auto-get-attributes-of-dom/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

