纯干货分享（JSON与JS对象的关系、JS关于尺寸的解释）

一、在学习JS的时候，很多人搞不清楚JSON和JS对象的关系，甚至连谁是谁都不清楚。其实，可以这么理解:
JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。

var obj = {a: 'Hello', b: "World'};    //这是一个对象，注意键名也是可以使用引号 包裏的
var json= '{"a": "Hello", "b": "World"}'; //这是一个JSON 字符串，本质是一个字符串

JSON和JS对象的相互转换：
       1.要实现从JSON字符串转换为JS对象，使用JSON.parse方法:

var obj = JSON.parse('{"a": "Hell0"， "b": "World"}'); //结果是{a: 'He1lo', b: 'World'}

2.要实现从JS对象转换为JSON字符串,使用JSON.stringify()方法:

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是'{"a": "Hello", "b": "World"}'

二、JS中的各种尺寸计算问题

clientWidth/clientHeight——视口大小：可见区域的宽度或高度，不包括border、水平滚动条、margin的元素的宽度或高度，只包括元素的内容区域和padding值。（如下图：）

offsetWidth/offsetHeight——视觉大小：看得见的大小，不包括margin的元素的宽度或高度，只包括padding、border、水平滚动条的宽度或高度。（如下图：）

offsetTop/offsetLeft——当前元素的偏移量：当父级有定位，根据父级的偏移量，父级没有定位则是根据页面的偏移量。表示相对父级顶部或者左边的距离。（如下图：）

scrollWidth/scrollHeight——当产生滚动条时，元素里边全文内容的宽度或高度，包含溢出的文本的尺寸，也就是包含可滚动的距离(scrollTop/scrollLeft)。 scrollTop/scrollLeft——滚动的距离到顶部或左边的位置。

当本元素的子元素比本元素高且overflow=scroll时，本元素会scroll，这时： scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。

screenX/screenY——表示事件发生时，鼠标相对于当前显示器的X/Y坐标

clientX/clientY——表示事件发生时，鼠标相对于页面可视区域的X/Y坐标。

pageX/pageY——表示事件发生时，鼠标相对于页面的X/Y坐标，其中已经把滚动条滚过的高或宽计算在内。

offsetX/offsetY——表示事件发生时，鼠标相对于当前点击元素的X/Y坐标。有兼容，谷歌有，火狐没有。

pageX >= clientX, pageY >= clientY

pageX = clientX + ScrollLeft(滚动条滚过的水平距离)

pageY = clientY + ScrollTop(滚动条滚过的垂直距离)

当没有产生滚动条时， pageX = clientX。