瀏覽器是一個JS的運(yùn)行時環(huán)境，它基于JS解析器的同時，增加了許多環(huán)境相關(guān)的內(nèi)容，用一張圖表示各個運(yùn)行環(huán)境和JS解析器的關(guān)系如下：
我們把常見的，能夠用JS這門語言控制的內(nèi)容稱為一個JS的運(yùn)行環(huán)境，常見的運(yùn)行環(huán)境又Nodejs，瀏覽器，小程序，一些物聯(lián)網(wǎng)設(shè)備等等，所有運(yùn)行環(huán)境都必須有一個JS的解釋器，在解釋器層面符合ECMAScript規(guī)范，定義了JS本身語言層面的東西如關(guān)鍵字，語法等等。
在每個環(huán)境中，也會基于JS開發(fā)一些當(dāng)前環(huán)境的特性，例如Nodejs中的global對象，process對象，瀏覽器環(huán)境中的window對象，document對象等等，這些屬性屬于運(yùn)行環(huán)境在JS基礎(chǔ)上的內(nèi)容。
這也就解釋了為什么在Nodejs和瀏覽器中都能使用數(shù)組、函數(shù)，但是只能在nodejs中使用require加載模塊，而不能在瀏覽器端使用，因為require是nodejs特有的運(yùn)行環(huán)境中的內(nèi)容。
內(nèi)置對象屬性
window
window是在瀏覽器中代表全局作用域，所有在全局作用域下聲明的變量和內(nèi)容最終都會變成window對象下的屬性。例：
var num = 123
console.log(window.num) // 123
訪問未聲明的變量時，如果直接訪問則會報錯，而如果使用window進(jìn)行訪問，就像通過對象訪問那樣，會返回undefined
var name = oldName // 報錯
var name2 = window.oldName // undefined
setTimeout 和 setInterval
setTimeout 和 setInterval他們都可以接受兩個參數(shù)，第一個參數(shù)是回調(diào)函數(shù)，第二個參數(shù)是等待執(zhí)行的時間，在等待時間結(jié)束之后，就會將回調(diào)函數(shù)放到event loop中進(jìn)行執(zhí)行，他們都返回一個id，傳入clearTimeout和clearInterval都能夠清除這次的定時操作。
var id = setTimeout(function () {
console.log("hello")
}, 1000)
clearTimeout(id)
可視化工具網(wǎng)站： http://latentflip.com/loupe
alert，confirm，prompt 等交互api
這里使用了這類API后，會導(dǎo)致頁面JS停止執(zhí)行
Location
屬性：
- hash：返回URL的錨部分
- host：返回一個URL的主機(jī)名和端口
- hostname：返回一個URL的主機(jī)名
- href：當(dāng)前url
- pathname：返回URL的路徑名
- port：返回URL服務(wù)器使用的端口號
- protocol：返回一個URL的協(xié)議
- search：返回URL的查詢部分
方法：
- reload：重新載入當(dāng)前頁面
- replace：用新的頁面替換當(dāng)前頁面
Document
方法：選擇器
getElementById、getElementByClassName等API
方法：創(chuàng)建元素
createElement
屬性：
- title：可以設(shè)置或返回當(dāng)前頁面標(biāo)題
- domain：展示當(dāng)前網(wǎng)站的域名
- url：當(dāng)前網(wǎng)站的鏈接
- anchors：返回所有錨點(diǎn)，帶name屬性的a標(biāo)簽
- forms：返回所有form標(biāo)簽集合
- images：返回所有img標(biāo)簽集合
- links：返回所有帶href屬性的a標(biāo)簽
Element
Element元素的nodeType均為1，大多數(shù)變遷都是一個Element實例
屬性：
tagName：返回當(dāng)前元素的標(biāo)簽名
方法：
setAttribute：獲取當(dāng)前節(jié)點(diǎn)屬性的結(jié)果
setAttrbute：設(shè)置當(dāng)前節(jié)點(diǎn)屬性
Text類型
Text類型包括所有村文本內(nèi)容，它不支持子節(jié)點(diǎn)，同時他的nodeType為3
History
History對象包含用戶訪問過的URL，在HTML5中，history還與客戶端路由息息相關(guān)
屬性：
length：返回歷史歷史列表中的網(wǎng)址數(shù)
方法：
back：加載history列表中的前一個URL
forward：加載history列表中的下一個URL
go：加載history列表中的某個具體頁面
pushState：替換地址欄地址，并且加入history列表，但并不會刷新頁面
replaceState：替換地址欄地址，替換當(dāng)前頁面在history列表中的記錄，并不刷新頁面
總結(jié)
- 全局定義的變量均可通過window來進(jìn)行訪問，使用setInterval需要注意，有可能并不是以相同間隔執(zhí)行，使用alert等api需要注意js代碼可能會被阻塞
- location對象需要明確對于URL來說每個類型代表的具體值是什么
- document對象主要銜接js和DOM元素，需要注意這里很多結(jié)果是array-like類數(shù)組元素，以及使用createFragment代碼片斷等優(yōu)化，來防止瀏覽器多次重排造成的性能問題
- Element和Text是兩個我們常見且易考的DOM對象，熟悉常見的方法和debug方式
- history因為和路由息息相關(guān)，我們需要熟悉新增的pushState和replaceState方法
事件
定義事件
我們可以通過多種方式對DOM元素定義一個事件
<p>點(diǎn)擊后彈出alert</p>
第一種方式直接在dom元素中添加，這種方式不推薦
<p onclick="showAlert()">點(diǎn)擊后彈出alert</p>
<script>
function showAlert() {
alert('hello')
}
</script>
第二種方式，純JS解決，獲取dom元素之后通過設(shè)置其onclick屬性
document.getElementByTagName('p')[0].onclick = function () {
alert('hello')
}
// 取消事件只需要設(shè)置onclick屬性為null即可
document.getElementByTagName('p')[0].onclick = null
優(yōu)點(diǎn)：純JS實現(xiàn)，視圖與邏輯解耦
缺點(diǎn)：一個dom元素僅能設(shè)置一個onclick事件
第三種方式，純JS解決，DOM2級規(guī)范實現(xiàn)新的API，addEventListener和removeEventListener兩個API
var onClickFunc = function () {
alert('hello')
}
document.getElementByTagName('p')[0].addEventListener('click', onClickFunc)
// 取消事件
document.getElementByTagName('p')[0].removeEventListener('click', onClickFunc)
優(yōu)點(diǎn)：純JS實現(xiàn)，視圖與邏輯解耦，可以設(shè)置多個回調(diào)函數(shù)
缺點(diǎn)：removeEventListener刪除事件函數(shù)必須與設(shè)置時保持相同的函數(shù)引用，所以設(shè)置事件盡量不要用匿名函數(shù)
事件捕獲及冒泡
DOM是一個嵌套性的樹形樹狀結(jié)構(gòu)，在瀏覽器中的表現(xiàn)就是疊加在一起的，所以在瀏覽器中點(diǎn)擊一個區(qū)域，在DOM結(jié)構(gòu)中會一次遍歷多個dom，自頂向下稱為【事件捕獲】自下而上稱為【事件冒泡】
DOM2事件規(guī)范規(guī)定，一個標(biāo)準(zhǔn)事件流氛圍三個階段，首先手自上而下的【事件捕獲】狀態(tài)，然后是真正觸發(fā)事件的元素，最后這個元素再回到頂部的事件冒泡
DOM2級事件規(guī)范新增的事件定義函數(shù)addEventListener就可以通過第三個參數(shù)來指定究竟是在捕獲階段觸發(fā)還是在冒泡階段觸發(fā)，第三個參數(shù)為true則是在捕獲階段觸發(fā)，第三個參數(shù)為false，則在冒泡階段觸發(fā)
事件對象
觸發(fā)事件之后，瀏覽器會傳入一個事件對象進(jìn)入事件回調(diào)函數(shù)本身
document.getElementsByTagName('p')[0].onclick = function (event) {
console.log(event)
}
document.getElementsByTagName('p')[0].addEventListener('click', function (event) {
consolel.log(event)
})
event 對象屬性如下：
- bubbles：表明事件是否冒泡
- cancelable：表示是否可以取消事件的默認(rèn)行為
- currentTarget：事件當(dāng)前正在處理的元素
- defaultPrevented： 為true則代表已經(jīng)調(diào)用了preventDefault函數(shù)
- detail：事件細(xì)節(jié)
- eventPhase：事件所處階段，1代表捕獲，2代表在事件目標(biāo)，3代表冒泡
- type：事件類型（click等）
event對象方法如下：
- preventDefault：取消事件的默認(rèn)行為
- stopImmediatePropagation：取消事件的進(jìn)一步捕獲或冒泡，同時組織事件處理程序調(diào)用
- stopPropagation：取消事件進(jìn)一步捕獲或冒泡
事件委托
// html
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
// js
document.getElementById("ul").onclick = function (event) {
var target = event.target
if (target.nodeName.toLowerCase === 'li') {
alert(target.innerHTML)
}
}
AJAX
2005年開始，ajax作為一項新興的交互開始影響web的發(fā)展，ajax的核心是XMLHttpRequest對象。文章來源：http://www.zghlxwxcb.cn/news/detail-503982.html
var xhr = new XMLHttpRequest()
// xhr.open接受三個參數(shù)，要發(fā)送的請求類型get post 請求的url、是否異步發(fā)送的布爾值
xhr.open('get', '/url', true)
// 調(diào)用send函數(shù)發(fā)送這個請求，參數(shù)為攜帶的參數(shù)
xhr.send(null)
// 通過onreadystatechange事件監(jiān)聽當(dāng)前xhr實例的階段，通過判斷xhr.readyState的階段，來判斷當(dāng)前請求的狀態(tài)
// 0:未調(diào)用open方法
// 1:已調(diào)用open方法 未調(diào)用send方法
// 2:已調(diào)用send方法但尚未收到返回
// 3:已收到部分響應(yīng)數(shù)據(jù)
// 4:已收到所有響應(yīng)數(shù)據(jù)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
console.log(xhr.responseText)
}
}
ES6 之后的fetch API
在ES6之后，瀏覽器端新增了一個fetch api 有以下幾個特點(diǎn)文章來源地址http://www.zghlxwxcb.cn/news/detail-503982.html
- 返回一個promise結(jié)果
- 默認(rèn)不帶cookie，需要使用配置credentials: ‘include’
- 當(dāng)網(wǎng)絡(luò)故障或請求被阻止時，才會標(biāo)記為reject，否則即時返回狀態(tài)碼是500，也會resolve這個promise
fetch('/ajax.json').then(function (response) {
response.text() // 返回字符串
response.json() // 返回json
response.blob() // 一般指返回文件對象
response.arrayBuffer() // 返回一個二進(jìn)制文件
response.formData() // 返回表單格式內(nèi)容
})
到了這里，關(guān)于03 Web全棧 瀏覽器內(nèi)置對象/事件/ajax的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
