js基礎知識積累

1. js 事件委託

事件冒泡（從觸發事件的dom到window），事件捕獲(從window到觸發事件的dom)

/* * @param event {string} 必須。事件名 * @param function 必須。指定要事件觸發時執行的函數 * @param useCapture {bool} 可選。false: 默認值，冒泡階段, true: 捕獲階段 */
element.addEventListener(event, function, useCapture) 複製代碼

爲動態建立的元素綁定點擊事件

// 給 id 爲 ul 的元素添加 5個 li 元素
let ul = document.getElementById('ul')
for(let i=0; i<5; i++){
    let liDOM = document.createElement('li')
    liDOM.innerHTML = i
    ul.append(liDOM)
}
// 將 li 的點擊事件委託到 ul
ul.addEventListener('click', function(event) {
    const currentDOM = event.target
    if (currentDOM.tagName === 'LI') {
        console.log(currentDOM.innerHTML)
    }
})
複製代碼

2. ajax 請求的五個步驟

// 1. 建立 xhr 對象
let xhr
if (window.XmlHttpRequest) {
    xhr = new XmlHttpRquest()
} else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
// 2. 設置回調函數
xhr.onReadyStateChange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr)
        // 得到字符串形式的響應數據
        console.log(xhr.responseText)
    }
}
// get
// 3. open
xhr.open('get', '/test.php', true)
// 4. send
xhr.send()
// post
// 3. open(請求方式， 請求url, 是否異步)
xhr.open('post', '/test.php', true)
// 4. setRequestHeader(請求頭名稱，請求頭地址)
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
// 5. send(string) string: 僅用於Post請求
xhr.send('fname=Henry&lname=Ford')
複製代碼

3. 實現一個EventEmitter(發佈訂閱)

class EventEmitter {
    constructor() {
        this._events = {}
    }
    // 發佈
    emit(eventName) {
        let args = [].slice.call(arguments, 1)
        if (this._events[eventName]) {
            this._events[name].forEach(callback => {
                callback.apply(this, args)
            })
        }
    }
    // 訂閱
    on(eventName, callback) {
        (this._events[eventName] || this._events[eventName] = []).push(callback)
    }
}
複製代碼