json的引号之伤

浏览数：54 / 时间：2015年06月09日

最近读他们的jquery解读的源码，由于版本不同，我可能看的是他们解读的1.7的，但是我本身运行的可能是1.9的，所以有些出处，但是中心思想不变，我有疑问的时候，直接debug，让例子自己走一遍，好处是一目了然，缺点就是有些分支走不到，近我的可能吧！能理解的理解，理解不了的实践；这个是目前我的基本思路；

这几天在解读$.data(),$("").data()方法，之后会单独拿出文章来写自己的心得体会，看源码-》看一些前辈大神们的源码解读-》自己实践-》自己总结体会，扯远了

看到一篇文章写的是html5的属性data-xx的，即使咱们现在浏览器不支持html5，但是用jquery的话依然可以使用这些方法，举例说明（摘自网上）：

<div data-role="page" data-last-value="43" data-hidden="true" data-options=‘{"name":"John"}‘></div>
$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";

这里我把源码data在这里用到的主要方法说一下：

//elem代表div，key代表我们的role、lastValue等，data=undefined
function dataAttr( elem, key, data ) {
	// If nothing was found internally, try to fetch any
	// data from the HTML5 data-* attribute
　　　　 //这里主要工作就是解析“data-“形式的属性，判断data是否未定义，并且节点是不是element元素
　　　　 //如果data有值，则直接返回，因为在调用这个方法之前还有其他的方法调用，可能已经把data计算出来了
	if ( data === undefined && elem.nodeType === 1 ) {
　　　　　　　　　//组装name属性，例如name = "data-role"
		var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
　　　　　　　　　//js的原生代码得到data的值
		data = elem.getAttribute( name );
　　　　　　　　　//是否是string类型
		if ( typeof data === "string" ) {
			try {
　　　　　　　　　　　　　　　　　　//各种判断，boolean,null,数字，string
				data = data === "true" ? true :
					data === "false" ? false :
					data === "null" ? null :
					// Only convert to a number if it doesn‘t change the string
　　　　　　　　　　　　　　　　　　　　　　  //这里有个技巧：这个”+“可以用来判断数字，它先强制把对象转化成数字，如果对象本身不是数字，则返回NaN，例如：+5==5(true),+‘a‘==‘a‘(false)
					+data + "" === data ? +data :
　　　　　　　　　　　　　　　　　　　　　　　 //测试数据是否是以{}包裹，是则尝试转成对象，这里提一下jQuery.paseJSON()这个方法，它会按照json的定义去判断参数，然后返回对象，不符合的转换不了，返回undefined
					rbrace.test( data ) ? jQuery.parseJSON( data ) :
						data;
			} catch( e ) {}

			// Make sure we set the data so it isn‘t changed later
　　　　　　　　　　　　　　//保存数据
			jQuery.data( elem, key, data );

		} else {
			data = undefined;
		}
	}

	return data;
}

我这里说一下json对象，里面的属性必须是双引号，不能使用单引号，虽然页面界别不怎么区分，但是在json解析的时候会报错，例如

<div data-role="page" data-last-value="43" data-hidden="true" data-options=‘{"name":"John"}‘></div> ，

cache中的存储是一个obj{name:"John"};

data-options的内容引号互换

$("div").data("options").name === "undefined";

cache中的存储是一个字符串："{‘name‘:‘John‘}"

关于cache的相关知识同样在实例和静态方法data中会讲解

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

json的引号之伤