前端學習總結——JS-web-API

• JS-web-API
  • DOM
  • BOM
  • 事件
  • Ajax
  • 存儲

DOM

• DOM本質是一棵樹, 節點樹
• DOM節點操做
  • 獲取節點: id\ tagname( 集合 )\ classname( 集合 )\ css選擇器獲取( queryselector\ queryselectall )
  • attribute: getAttribute(), setAttribute(), 修改HTML屬性, 會改變HTML結構
  • property: p1.style.width = '100px'; 對DOM元素的對象屬性作修改, 不會體現到HTML結構中( 儘可能用property操做, 避免從新渲染耗費性能 )
  • 新建節點: createElement()
  • 插入節點: appendChild()
  • 移動節點: 對現有節點直接執行appendChild會移動這個節點
  • 獲取父元素: div1.parentNode
  • 獲取子元素列表: div1.childNodes( 包括標籤元素, text文本元素 )
  • 子元素中文本元素的nodeType = 3; 標籤元素nodeType = 1;
  • 刪除子元素: removeChild( p[0] );
• DOM性能:
  • DOM操做很是"昂貴", 避免頻繁的DOM操做
  • 對DOM查詢作緩存
  • 將頻繁操做改成一次性操做
  • 建立文件片斷：
    • 此時這個片斷尚未插入到DOM樹中: let frag = document.createDocumentFragment()
    • 在循環體中執行插入: frag.appendChild(li);
    • 在循環體外, 一塊兒插入到DOM樹中: listNode.appendChild(frag);

BOM

• navigator.userAgent：查看瀏覽器信息
• location：地址讀取和設置
• 拆解地址信息各個部分：
  • location.protocol：https:，http: 協議
  • location.href：完整地址
  • location.host：域（服務器名+端口號）www.bilili.com:8080
  • location.hostname：域名（服務器名）www.bilili.com
  • location.pathname：url中的路徑和文件名 /a/b/practice.html
  • location.search：query參數，以？開頭的查詢字段 ?a=12&b=1
  • location.hash：url散列值， #contents
• screen：screen.witch，screen.height
• history：history.back(); history.forward(); history.go();

事件

• 事件代理
  • event.target() 獲取觸發的元素
  • event.preventDefault() 阻止默認行爲發生
  • event.stopPropagation() 阻止冒泡（event.cancelBubble = true）
• 事件冒泡
  • 一個元素髮生事件，此元素的事件處理完會逐級再向上發生父級的事件，並一直追溯到最終沒有事件祖先爲止（document）
  • 事件流階段：捕獲階段（document -> target）、冒泡階段（target -> document）

Ajax(Asynchronous JavaScript + XML)

function ajax(url) {
    const p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest(); // 建立xhr實例
        xhr.open('get', url, true); // 定義請求
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4) { // 數據響應階段0-4，未初始化到完成接收全部響應
                if(xhr.status === 200) { // HTTP狀態碼，數據響應成功與否
                    resolve(
                        JSON.parse(xhr.responseText)  // 響應數據
                    )
                } else if (xhr.status === 404) {
                    reject(new Error('404 not found')) 
                }
            }
        }
        xhr.send(null);  // 發送請求
    })
    return p;
}

 

• 同源請求：協議、域名、端口三者必須全一致纔是同源。
  • 同源策略：ajax請求時，瀏覽器爲了安全要求當前網頁和服務器必須同源。
  • 跨源資源共享（CORS：Cross-Origin Resource Sharing）要求服務端支持，設置HTTP-header
  • 圖片探測：利用<img>標籤實現跨域通訊，只能發送get請求，沒法獲取服務器響應的內容，通常用於跟蹤用戶在頁面上的點擊操做或者動態顯示廣告
  • jsonp（json with padding）：動態建立script元素併爲src屬性指定跨域的url，例如： http://freelife.net/json?callback=handleResponse（以回調函數的形式指定回調函數名稱）
• get請求和post請求：
  • get請求用於向server查詢某些信息
  • post請求用於向server發送應該保存的數據，能夠發送任意格式和較大的數據，但post請求在發送相同量數據狀況下比get請求慢兩倍
• ajax經常使用插件： fetch API、jQuery、axios

fetch('/url/bar')
.then(response => {
  console.log(response.status); 
  console.log(response.text());  
})

 

 

存儲

• 描述cookie、localStorage、sessionStorage(從存儲容量、易用性、是否跟隨HTTP請求發送)
  • cookie：用於瀏覽器和server通訊，早期被借用到本地存儲，可用 document.cookie = " " 來修改，用法單一易用性差，存儲大小最多4kb，發送HTTP請求時要發給服務端，會增長請求的數據量；
  • localStorage和sessionStorage是HTML5專門爲本地存儲設置的，最大可存儲5M（每一個域名、每一個host），api簡單易用：setItem、getItem，不會跟着HTTP請求發送出去；
  • localStorage數據永久存儲，除非代碼或手動刪除
  • sessionStorage數據只存在於當前會話，瀏覽器關閉就清空