Day21：三大系列总结

元素的偏移值

作用

动态获取元素的位置和大小

属性

offsetTop

offsetLeft

offsetWidth

offsetHeight

offsetParent

和style的区别

offset

可以得到任意样式中的样式值

得到的数值没有单位

offsetWidth宽度包含边框和内边距

offsetWidth是一个只读属性，只能获取不能设置

style

只能得到行内样式中设置的样式

得到的是带有单位的字符串

宽度不包含边框和边距

宽度是可读写属性，可以设置也可以获取

总结

想要获取元素的大小和位置，offset更方便（主要用于获取

想要修改元素的属性，使用style更方便（主要用于设置

1.元素可视区client

概念

client：客户端，通过它的相关属性，可以动态获取元素边框大小、元素大小等属性

可视区域包含内边距

element.clientTop	表示一个元素的顶部边框的宽度，以像素表示。
element.clientLeft	表示一个元素的左边框的宽度，以像素表示。
element.clientHeight	在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）
element.clientWidth	在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）

2.元素滚动scroll

概念

scroll

滚动的意思，通过它的相关属性可以动态获取元素的大小，滚动的距离

element.scrollHeight	返回整个元素的高度（包括内边距，不包括外边距和边框）
element.scrollLeft	返回元素内容水平滚动的像素值
element.scrollTop	返回元素内容垂直滚动的像素值
element.scrollWidth	返回元素的整个宽度（包括内边距，不包括外边距和边框）

监听页面文档滚动

pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

这些属性是只读的。

针对window对象进行监听，可以获取页面文档的滚动

pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

3.三大系列总结

offset

经常用于获取元素的位置（offsetTop offsetLeft）

client

经常用于获取元素的大小（clientHeight clientWidth，包含内边距，不含边框）

scroll

经常用于获取滚动的距离（scrollTop垂直滚动 scrollLeft水平滚动）

监听文档滚动，改绝对定位为固定定位案例

// 获取slider-bar的offset值 - banner的offset值
const slider = document.querySelector('.slider-bar')
const banner = document.querySelector('.banner')
const goBack = document.querySelector('.goBack')
const sliderTop = slider.offsetTop
const bannerTop = banner.offsetTop
const mainTop   = document.querySelector('.main').offsetTop

// 计算差值，将来用于设置slider固定定位top的偏移值
const fixedTopValue = sliderTop - bannerTop
console.log(fixedTopValue) // 130

// 监听文档滚动
window.addEventListener('scroll',function(){
    console.log(window.pageYOffset)
    // 滚动到一定距离的时候
    if(scrollY >= bannerTop){
        // 变成固定定位
        slider.style.position = 'fixed'
        slider.style.top = fixedTopValue + 'px'
    }else{
        slider.style.position = 'absolute'
        slider.style.top = '300px'
    }
    // 当滚动到一定区域，goBack就显示
    if(scrollY >= mainTop){
        goBack.style.display = 'block'
    }else{
        goBack.style.display = 'none'
    }
})

4.异常

异常

程序出现了不正常的情况（除0异常，数组索引越界，语法错误）程序一般会自己停掉

处理异常的方式

1.抛出（甩锅

throw关键字，可以手动抛出异常信息

程序会将抛出的信息打印到控制台上，并且停掉程序，并且后续代码也无法执行

本质是没有解决问题，只是抛出了问题

const a = 20
if(a>10){
  throw 'a大于10'
}
console.log(a)

2.处理（接盘

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

try …… catch 处理异常，处理后程序仍能继续运行，可以提高程序的健壮性

 /* try {
    ...    //异常的抛出,一般会把可能会出现问题的代码放这里。也可以做异常的手动抛出
} catch(e) {
    ...    //一般写异常的捕获与处理的代码。
} finally {
    ...    //结束处理，不管有没有异常，都必须执行的代码放在这里（记录日志等操作）
} */
var txt="";
function message(){
	try {
		adddlert("Welcome guest!");
	}
	catch(err) {
		txt="本页有一个错误。\n\n";
		txt+="错误描述：" + err.message + "\n\n";
		txt+="点击确定继续。\n\n";
		alert(txt);
	}
	alert(111)
}

function myFunction() {
  const input = document.querySelector('#demo')
  const p01   = document.querySelector('#p01')
  const num = input.value

  try {
    if (num == '') throw '值是空的' 
    if (num < 5) throw  '太小'
    if (num > 10) throw '太大'
    if (num >= 5 && num <= 10) throw '正确'
  } catch (error) {
    p01.innerHTML = `输入的值:${error}`
  } finally {
    input.value = '' 
  }
}

5.promise

概念

本身就是一个对象（类似正则），对象拥有属性和方法。它有两个属性和一个方法

// 创建promise属性
// 必须要传一个函数作为参数
// 在函数里面，一般有两个形参，
const p1 = new Promise((relove,rejeck)=>{})

// 打印p1可以看出，它有两个属性一个方法
console.log(p1)

状态属性是PromiseState——默认pending状态

结果属性名是PromiseResult——默认undefined结果（因为里面没有数据

创建

new方法 必须要传一个函数

在函数里面，一般有两个形参

它有两个属性一个方法

修改

修改promise状态属性

调用resolve()方法,当前promise状态会从pending转成[[PromiseState]] : "fulfilled" 实现状态

调用reject()方法,当前promise状态会从pending转成[[PromiseState]] : "rejected" 拒绝状态

修改Promise结果属性

调用resolve（）方法传递参数，它会将传递的参数保存在结果属性中[[PromiseResult]]: "success"

promise状态不可逆

(resolve,reject)=>{resolve(),reject()}

不是先成功后失败，而是成功状态fulfilled

方法

then方法

接收两个函数作为参数

第一个参数是promise执行成功后的回调函数

第二个参数是promise执行失败后的回调函数

两个函数只能有一个被执行

通常情况下，then方法中更多的是只有一个函数，这个函数只有在成功的时候才会调用

回调函数

不是立马就被调用的函数，而是根据执行结果的情况，执行完后回头调用的函数

注意

回调函数能被执行的前提是——promise状态必须发生改变

要么是resolve，要么是reject，不能是pending状态

链式编程

调用完then后，返回值是一个promise对象，并且默认是pending状态

then返回值是一个promise对象,则可以继续调用then方法，从而实现链式编程

链式编程能够执行下去的前提，第一个promise的状态必须发生改变，不能是pending状态

数据传递

将当前then方法中的数据带到下一个then，有三种方式

resolve(1)

return value * 2;

Promise.resolve('resolve');或者Promise.reject('reject');