利用360桌布介面,製作精美桌布站
一、谷歌不相容的window.setImmediate()
在 MDN 上看window.setImmediate() 描述
該方法可能不會被批准成為標準,目前只有最新版本的 Internet Explorer 和Node.js 0.10+實現了該方法。
它遇到了 Gecko(Firefox) 和Webkit (Google/Apple) 的阻力.
- 該特性是非標準的,所以說、請儘量不要在生產環境中使用它!
- 語法:
-
var immediateID = setImmediate(func, [param1, param2, ...]); var immediateID = setImmediate(func);
window.clearImmediate 方法可以用來取消通過 setImmediate 設定的將要執行的語句, 就像 window.clearTimeout 對應於 window.setTimeout一樣.
因為其相容性不好,所以會用 setTimeout(fn, 0) 來代替,常用來:處理 繁重任務(陣列操作等等)以避免 js 執行阻塞 ui 的更新
二、vue/react 是如何通過路由找到路由元件的?
通過配置 路由
程式設計時,將元件 (components) 對映到路由 (routes),然後告訴 Vue Router 在哪裡渲染它們
根據y使用者訪問的 path 來切換到對應的元件
- mode: 'hash'
在 URL 後面新增#和路由路徑 path
當 # 和 後面的 path 值發生變化時,會觸發 hashchange 事件,vue/react 會進行相應的 渲染邏輯,元件切換(掛載最新的虛擬 DOM 到 真實 DOM 容器中)
- mode: 'history'
會根據
- pushState 增加一條記錄
- replaceState 替換一條記錄
操作 瀏覽器的 history 物件
history 的變化 會觸發 popstate 事件,vue/react 會進行相應的 渲染邏輯,元件切換(掛載最新的虛擬 DOM 到 真實 DOM 容器中)
以上兩種方式都可以實現 無重新整理跳轉頁面 的體驗
只不過,
- history 模式需要 後端做相應的配置,避免 404 出現(前端方面,除了 mode 屬性不一樣,其他基本一致)
- history 模式的 url 更加簡潔
三、思考 axios 分析 Promise 封裝 ajax
- 原生 ajax
-
//對請求data進行格式化處理 function formateData(data) { let arr = []; for (let key in data) { //避免有&,=,?字元,對這些字元進行序列化 arr.push(encodeURIComponent(key) + '=' + data[key]) } return arr.join('&'); } function ajax(params) { // 先對params進行處理,防止為空 params = params || {}; params.data = params.data || {}; // 普通GET,POST請求 params.type = (params.type || 'GET').toUpperCase(); params.data = formateData(params.data); // 如果是在 ie6 瀏覽器,那麼 XMLHttoRequest 是不存在的,應該呼叫 ActiveXObject; let xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); if (params.type === 'GET') { xhr.open(params.type, params.url + '?' + params.data, true); xhr.send(); } else { xhr.open(params.type, params.url, true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded") xhr.send(params.data); } // 這裡有兩種寫法,第一種寫法:當xhr.readyState===4的時候,會觸發onload事件,直接通過onload事件 進行回撥函式處理 xhr.onload = function () { if (xhr.status === 200 || xhr.status === 304 || xhr.status === 206) { var res; if (params.success && params.success instanceof Function) { res = JSON.parse(xhr.responseText); params.success.call(xhr, res); } } else { if (params.error && params.error instanceof Function) { res = xhr.responseText; params.error.call(xhr, res); } } } //第二種寫法,當xhr.readyState===4時候,說明請求成功返回了,進行成功回撥 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { // 進行onload裡面的處理函式 } } }
Promise based HTTP client for the browser and node.js
即: 我,axios,就是基於Promise,服務於瀏覽器和 node.js 的HTTP客戶端。
特點:
基於 Promise
支援處理分發請求,並在返回的 Promise 一旦有響應被接收的情況下進行處理
-
function pajax({ url= null, method = 'GET', dataType = 'JSON', async = true
}){ return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest() xhr.open(method, url, async) xhr.responseType = dataType xhr.onreadystatechange = () => { if(!/^[23]\d{2}$/.test(xhr.status)) return if(xhr.readyState === 4) { let result = xhr.responseText resolve(result) } } xhr.onerror = (err) => { reject(err) } xhr.send() }) }