12.2 样式
12.2.3 元素大小
DOM中没有规定如何确定页面中元素的大小
1、偏移量
◆ offsetHeight：元素在垂直方向上占用的空间大小，以像素计算
◆ offsetWidth：元素在水平方向上占用的空间大小，以像素计算
◆ offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离
◆ offsetTop：元素的上边外框至包含元素的上内边框质检的像素距离
offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。
下面的图形象的展示了上面几个属性表示的不同大小：
image.png
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent();
}
return actualLeft;
}
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetTop;
current = current.offsetParent();
}
return offsetTop;
}
//通过这两个函数就可以用于分别取得元素的左和上偏移量
所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性；如果需要重复使用其中某些属性的值，可以将它们保存在局部变量中，以提高性能。
2、客户区大小
元素的客户区大小，指的事元素内容及其内边距所占据的空间大小。
有关客户区大小的属性有两个：
① clientWidth：是元素内容区宽度加上左右内边距宽度
② clientHeight：是元素内容区高度加上上下内边距高度
image.png
从字面上看，客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内。
与偏移量相似，客户区大小也是只读的，也是每次访问都要重新计算的
3、滚动大小
滚动大小，指的是包含滚动内容的元素的大小。
有些元素（例如html元素），即使没有执行任何代码也能自动的添加滚动条；但是另外一些元素，则需要通过CSS的overflow属性进行设置才能滚动。
下面是4个与滚动大小相关的属性：
◆ scrollHeight：在没有滚动条的情况下，元素内容的总高度
◆ scrollWidth：在没有滚动条的情况下，元素内容的总宽度
◆ scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
◆ scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollWidth和scrollHeight主要用于确定元素内容的实际大小。
通过scrollLeft和scrollTop属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位置。元素尚未滚动式，这两个属性的值都等于0，如果元素滚动了，那么就会大于0。这两个属性都是可以设置的，因此将元素的scrollLeft和scrollTop设置为0，就可以重置元素的滚动位置。
function scrollToTop(element){
if(element.scrollTop != 0){
element.scrollTop =0;
}
}
//这段函数会检测元素是否位于顶部，如果不是就将其滚到顶部
4、确定元素大小
getBoundingClientRect()：这个方法会返回一个矩形对象，包含4个属性：left、top、right和bottom。这些属性给出了元素在页面中相对于视口的位置。
在IE8及更早版本认为文档的左上角坐标是（2,2），而其他浏览器包括IE9则将传统的（0,0）作为起点坐标。
function getBoundingClientRect(element){
if(typeof arguments.callee.offset != "number"){
var scrollTop = document.documentElement.scrollTop;
var temp = document.createElement("div");
temp.style.cssText = "position:absolute;left:0;top:0;";
document.body.appendChild(temp);
temp = null;
}
var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;
return{
left:rect.left + offset,
right:rect.right + offset,
top:rect.top + offset,
bottom:rect.bottom + offset
}
}
——————————————————————————————————————————————————————————————————————
React
为什么要使用React：
1、使用组件化开发方式，符合现代web开发的趋势
2、使用方式简单，性能非常高，支持服务端渲染
JSX嵌套
如果JSX标签是闭合的，那么需要在结尾处用/>，就好像XML/HTML一样：
const element = <img src={user.avatarUrl}/>;
JSX标签同样可以相互嵌套：
const element=(
<div>
<h1>Hello!</h1>
<h2>Good to see you here</h2>
</div>
)
因为JSX的特性更接近Javascript而不是HTML，所以ReactDOM使用camelCase小驼峰命名来定义属性的名称，而不是使用HTML的属性名称。例如：class变成了className，而tabindex则对应着tabIndex
JSX防注入攻击
可以放心的在JSX当中使用用户输入：
const title = response.potentiallyMaliciousInput;
//直接使用时安全的：
const element = <h1>{title}</h1>
React DOM 在渲染之前默认会过滤所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效的防止XSS（跨站脚本）攻击
let命令
ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量只在let命令所在的代码块内有效：
{
let a = 10;
var b =1;
}
a //ReferenceError: a is not defined
b //1
从上面的代码表明了let声明的变量只在它所在的代码块有效
看两个例子，在for循环中使用var或者let的结果也会大有不同：
var a = [ ];
for(var i =0; i<10;i++){
a[i]=function(){
console.log(i);
};
}
a[6]();//10
变量 i 是var命令声明的，在全局范围都有效，所以全局只有一个变量 i。每次循环的时候变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log( i )，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个 i，所以最后一轮的i的值也就是10。
如果使用let，声明的变量仅在块级作用域内有效：
var a = [ ];
for(let i =0; i<10;i++){
a[i]=function(){
console.log(i);
};
}
a[6]();//6
变量 i 是let声明的，当前的 i 只在本轮循环有效，所有每一次循环的 i 其实都是一个新的变量，最后输出的是6.
A：如果每一轮循环的变量 i 都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？
Q：因为Javascript引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。
另外for循环还有一个特别之处，就是循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域：
for(let i = 0;i<3;i++){
let i = 'abc';
console.log(i);
}
//abc
//abc
//abc
以上代码输出了3次abc。
表明函数内部的变量 i 与循环变量 i 不在同一个作用域，有各自单独的作用域。
网友评论