寫在前面

沒啥好說的，總結(jié)了點(diǎn)基礎(chǔ)知識查漏補(bǔ)缺。

fetch、ajax、axios

• Ajax(Asynchoronous javascript and XML)，一種技術(shù)的統(tǒng)稱。
• Fetch是一種具體的原生瀏覽器API，用于進(jìn)行網(wǎng)絡(luò)請求，和XMLHttpRequest是同等級別的，但是Fetch語法更加簡潔、易用，支持Promise
• Axios是一種第三方庫，是最常使用的網(wǎng)絡(luò)請求庫，內(nèi)部可以使用XMLHttpRequest和Fetch進(jìn)行封裝使用。

那么如何使用XHR或fetch實(shí)現(xiàn)一個(gè)Ajax呢?

function ajax(url, successFn){
  const xhr = new XMLHttpRequest();
  xhr.open("GET",url,false);
  xhr.onreadystatechange = function(){
    //這里的函數(shù)異步執(zhí)行，可以使用Promise進(jìn)行處理
    if(xhr.readyState === 4){
      if(xhr.state === 200){
        successFn(xhr.responseText);
      }
    }
  }
  xhr.send(null);
}
function ajax2(url){
  return fetch(url).then(res=>res.json);
}

px、%、em、rem和vw/vh

• px是像素的基本單位，是絕對單位(其他的單位都是相對單位)
• %是相對于父元素的寬度比例
• em是相對于當(dāng)前元素的font-size
• rem是相對于根節(jié)點(diǎn)的font-size，常用于移動(dòng)端適配
• vw/vh是屏幕視口寬度/高度的1%
• vmin/vmax指的是屏幕視口寬度和高度的最小值/最大值

箭頭函數(shù)的缺點(diǎn)和不能使用的場景?

箭頭函數(shù)的一些缺點(diǎn)：

• 箭頭函數(shù)沒有arguments
• 自身沒有this，this指向的是箭頭函數(shù)的父作用域的this，不能通過apply、bind、call修改this的指向
• 某些代碼使用箭頭函數(shù)時(shí)，難以閱讀
• 箭頭函數(shù)不能使用new去創(chuàng)建對象，構(gòu)造函數(shù)

箭頭函數(shù)不能使用的場景：

• 對象原型、對象方法、構(gòu)造函數(shù)
• 動(dòng)態(tài)上下文的回調(diào)函數(shù)
• Vue生命周期method

for...in 和 for...of的區(qū)別

• for...in遍歷得到的key，for...of遍歷得到的是value
• for...in常用于可枚舉數(shù)據(jù)，如：對象、數(shù)組、字符串，得到key值
• for...of常用于可迭代數(shù)據(jù)，如：數(shù)組、字符串、Map、Set，得到value值

那么，for await...of有什么作用呢?

for await...of用于遍歷多個(gè)Promise：

function createPromise(val){
    return new Promise((resolve)=>{
        setTimeout(()=>{
            resolve(val)
        },1000)
    })
}
(async function(){
    const p1 = createPromise(100)
    const p2 = createPromise(200)
    const p3 = createPromise(300)
    const list = [p1,p2,p3]
    // Promise.all(list).then(res=>
    //     console.log(res)
    // )    
    //等價(jià)于Promise.all
    for await(let p of list){
        console.log(p);
    }
})()

HTMLCollection和NodeList

DOM其實(shí)是一棵樹，多有的節(jié)點(diǎn)都是Node節(jié)點(diǎn)，而Node是Element的基類，Element是其它HTML元素的基類，如：HTMLDivElement、HTMLULElement等。

• HTMLCollection是Element的集合
• NodeList是Node的集合

 <div id="root">
    <ul>
        <li>一川</li>
        <li>二川</li>
    </ul>
    <p>你好呀</p>
</div>
<script>
    const p1 = document.querySelector("#root")
    console.log(p1.childNodes,p1.children);
</script>

我們可以看到最終打印的結(jié)果如下圖所示，NodeList打印的是所有的Node節(jié)點(diǎn)的集合，包括Element元素標(biāo)簽、文本、注釋等內(nèi)容。HTMLCollection打印的是純粹的Element元素標(biāo)簽的集合，不包含任何文本和注釋等。

因此：

• childNodes和children返回的結(jié)果不一樣，childNodes返回的是一個(gè)NodeList，children返回的是一個(gè)HTMLCollection
• 獲取Node和Element的返回結(jié)果可能不一樣，如果只有純粹的HTML標(biāo)簽，沒有文本Text、注釋Comment節(jié)點(diǎn)等其他內(nèi)容，那么返回的結(jié)果就是一樣的

如何將一個(gè)類數(shù)組轉(zhuǎn)為一個(gè)數(shù)組呢?

• Array.from(list)
• Array.prototype.slice.call(list)
• 擴(kuò)展運(yùn)算符 [...list]

比如，HTMLCollection和NodeList都是"類數(shù)組"，但不是數(shù)組。

const list1 = Array.from(list)
const list2 = Array.prototype.slice.call(list)
const list3 = [...list]

offsetHeight、scrollHeight和clientHeight的區(qū)別

要想理解offsetHeight、scrollHeight和clientHeight的區(qū)別，首先我們得了解下盒子模型：

不同部分的說明：

Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

標(biāo)準(zhǔn)W3C盒子模型：

• CSS中設(shè)置的元素寬度(width)=內(nèi)容(content)的寬
• CSS中設(shè)置的元素高度(height)=內(nèi)容(content)的高

而標(biāo)簽元素的實(shí)際高度=height+(padding+border+margin*2

標(biāo)準(zhǔn)W3C盒子模型

IE盒子模型：

• CSS中設(shè)置的寬度(width)=內(nèi)容(content)的寬+(border+padding)*2
• CSS中設(shè)置的高度(height)=內(nèi)容(content)的高+(border+padding)*2

而標(biāo)簽元素的實(shí)際高度=height+margin*2

IE盒子模型

我們在實(shí)際開發(fā)中，html標(biāo)簽?zāi)J(rèn)采用的W3C盒子模型，當(dāng)然你也可以設(shè)置box-sizing:border-box;將W3C盒子模型轉(zhuǎn)為IE盒子模型。

offsetHeight、scrollHeight和clientHeight的計(jì)算規(guī)則：

• offsetHeight=border+padding+content
• clientHeight=padding+content
• scrollHeight=padding+實(shí)際內(nèi)容尺寸

clientHeight

offsetHeight

scrollHeight

寫在最后

簡單總結(jié)了一些基礎(chǔ)知識，希望能夠幫到大家。