做插件、存数据我们可能大量用到了data属性,jQuery的data方法很大地方便了我们读取data的值,但是今天发现了一个奇怪的问题,生产系统中取到的值出现了错误,经过反复对比,结果发现是$(element).data(name)这一节在取的时候就出错了,传递给服务器当然会出问题。请看如下演示 http://jsfiddle.net/walker/yPpUR/2/
当存到data里面的是数字(只要是由数字构成就会被理解成数字)位数超过16位的时候,就已经失去了精度,而同时,我用了attr方法来取,却能得到原生的值,目前只能暂时把data(id)改为attr(“data-id”)
原因为何?
开始走了点弯路,在jQuery源码里找来找去,没发现原因,单步跟踪的时候发现一经过这一句,值就降低了精度:
if ( typeof data === "string" ) { try { data = data === "true" ? true : data === "false" ? false : data === "null" ? null : jQuery.isNumeric( data ) ? +data : 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; }
最后才发现是js本身的问题,然后由于jQuery的data方法的特性(支持传入和读取对象),所以把形如数字的字符串在取出的时候就变成了数字(上述代码第6行),然后假如这个“数字”的范围超过了js的精度范围,自然就不对了。
关于精度的演示,可见如下演示http://jsfiddle.net/walker/yPpUR/4/
就到此为止吧。