json的引号之伤

最近读他们的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-role="page" data-last-value="43" data-hidden="true" data-options="{‘name‘:‘John‘}"></div>

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

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

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

 

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