• 基礎知識與素養
• JS基本功訓練與思考
• 程序設計的滲透與應用
• 業務技巧的積累與訓練
• 生產力轉換
• 項目的組織架構
• 轉換專業人才的全面生產力

什么樣的技術水平決定了你應該學習什么樣的知識與技術，什么樣的知識與技術水平決定了你到什么樣的公司，到什么樣的公司決定了你在什么樣社會層次，什么樣的社會層次決定了你的眼界與發展的高度。

試題來源

一 面試題：

0、*浮動的影響

① 浮動元素不占位，脫離文檔流，可以達到文字環繞的排版效果，也會引起標準流div被浮動元素遮擋
② 父元素高度塌陷

1、*BFC：解決因為浮動引起的問題 BFC

1）觸發BFC的條件

① body元素
② float非none的
③ 絕對定位的（position：fixed/absolute）
④ display: flex/inline-block/table-cells
⑤ overflow非visible

2）BFC的特性

同一BFC內margin折疊

3）BFC的作用

① 清除浮動（解決父元素高度塌陷）
② 解決元素被浮動元素覆蓋（可用于做左右兩列布局，左寬度固定，右自適應）

2、*完整的web請求（返回了html）瀏覽器訪問地址

3、*頁面渲染HTML過程

4、*get、post請求的區別，解釋get請求可以被緩存（瀏覽器決策）、不想緩存如何做：

1）在ajax發送請求前加上xmlHttpRequest.setRequestheader(‘Cache-Control’,“no-cache”) 或者請求頭（“if-Modified-Since”:“0”）
2）在服務端加 header("cache-Control:no-cache,must-revalidate)
3）增加一個唯一值的參數：一般是使用timestamp = new Date().getTime() (推薦)
（場景：請求服務器資源，如下載文件，文件更新時）

5、下載文件，window.open、download屬性依然不下載（必須同源）

6、反向代理是什么、作用

1）反向代理

反向代理（Reverse Proxy）方式是指：代理服務器來接受 Internet 上的連接請求，然后將請求轉發給內部網絡上的服務器，并將從內部網絡上服務器得到的結果返回給 Internet 上請求連接的客戶端。此時代理服務器對外就表現為一個服務器，反向代理服務器對于客戶端而言它就像是原始服務器，并且客戶端不需要進行任何特別的設置。
反向代理的作用：
保證內網的安全，可以使用反向代理提供 WAF 功能，阻止 web 攻擊。
負載均衡，通過反向代理服務器來優化網站的負載。

7、**vue項目性能優化（小野森森）

8、**webpack打包工具 (小野森森)【考配置流程、loader的作用】

9、***Promise（小野森森）

const doSth = (t) => {return () => {if (--t === 0) {print1(() => {print2(() => {print3()})})}}
}
const print1 = (cb) => {console.log('第一次打印')// 打印出這句話后執行cbcb()
}
const print2 = (cb) => {console.log('第二次打印')cb()
}
const print3 = () => {console.log('第三次打印')
}
const fn = doSth(3, print1)
fn()
fn()
fn()

1. 基本

目的：需要處理異步請求的嵌套，比如，先根據接口判斷是否重復，拿到res后再進行下一次請求
① Promise是解決異步流程化的手段，Promise不是異步
② Promise是構造函數，需要new
③ Promise的唯一參數，executor函數，有參數resolve、reject
④ executor在new Promise的時候調用
⑤ executor是同步執行的，而then是異步調用的
⑥ 每個返回的Promise都有一個then方法，方法有2個回調函數cb，第一個cb的參數需由resolve執行時傳入，resolve時執行第一個cb，reject時執行第二個cb
⑦ 沒有第二個callback的時候可以通過.catch，優先走then里的第二個cb，且無論是第幾個then，總是優先于catch
⑧ reject能做的，throw new Error也可以
⑨ 每個then可以再繼續.then下去 （在第一個Promise里返回Promise）

⑤ ↓

let promise = new Promise((resolve, reject) => {console.log(1)reject(3)
})
promise.then((res) => {console.log('打印', res)
}, (err) => {console.log(err)
})
console.log(2)
// 打印 1 2 3

⑥ ↓

let promise = new Promise((resolve, reject) => {resolve('結果')
})
promise.then((err) => {console.log('打印', err)
})
// 打印 結果

let promise = new Promise((resolve, reject) => {reject('服務異常')
})
promise.then((res) => {console.log('打印', res)
}, (err) => {console.log(err)
})
// 服務異常

⑦ ↓

let promise = new Promise((resolve, reject) => {reject('服務異常')
})
promise.then().catch((err) => {console.log(err)
})
// 服務異常

let promise = new Promise((resolve, reject) => {reject('服務異常')
})
promise.then(() => { }, (err) => {console.log('優先then', err)
}).catch((res) => {console.log(res)
})
// 優先then 服務異常

let promise = new Promise((resolve, reject) => {reject('服務異常')
})
promise.then(() => { }).then().then(() => { }, (err) => {console.log('無論第幾個then，總是優先', err)
}).catch((res) => {console.log(res)
})
// 無論第幾個then，總是優先 服務異常

⑧ ↓

let promise = new Promise((resolve, reject) => {throw new Error('拋出錯誤')
})
promise.then(() => { }).then().then(() => { }, (err) => {console.log('無論第幾個then，總是優先', err)
}).catch((err) => {console.log(err)
})

let promise = new Promise((resolve, reject) => {throw new Error('拋出錯誤')
})
promise.then(() => { }).catch((err) => {console.log(err)
})

⑨ ↓

let promise = new Promise((resolve, reject) => {resolve('結果1')
})
promise.then((res) => {console.log('打印', res)return new Promise((resolve, reject) => {resolve('結果2')})
}).then((res) => {console.log('打印', res)
})
// 打印 結果1
// 打印 結果2

2. 語法糖Promise.resolve Promise.reject

相當于是 new Promise(…)

let promise = new Promise((resolve, reject) => {resolve('結果1')
})
promise.then((res) => {console.log('打印', res)return Promise.resolve('成功啦')
}).then((res) => {console.log(res)
})
// 打印 結果1
// 成功啦

3. Promise.all（通常用于等待多個異步任務完成）

① Promise.all接收iterable類型數據（如Array、Set、Map），數據的每一項可以是Promise也可以不是
② 返回值是Promise，因此可以.then。 如果resolve，則將iterable的每個Promise resolve的data依次放入數組
③ 若參數為空數組，返回空數組
④ 只要其中一個Promise的狀態rejected了，整個Promise.all的狀態便rejected，失敗的原因是第一個失敗的Promise的結果
⑤ 使用場景：一個頁面初始化需要請求多個接口，只要任何一個接口失敗，便認為初始化是失敗的，需要重新請求

4. Promise.race

① 誰先完成，就只返回那個Promise的結果，且無論成功或失敗，都會返回
② 若參數為空數組，Promise.race的結果永遠處于pending狀態，看起來是什么都沒返回
③ 可以比較資源或接口的響應速度

5. async、await

① await是一個操作符，她等待一個Promise對象產出結果，如果這個結果是rejected，就會拋出異常
② async函數返回一個pending狀態，這本身并沒有什么意義

10、***函數防抖與節流小野森森

1、函數防抖

1）含義：

① 延遲執行（時間被觸發n秒后再執行的回調）
② 如果在n秒內再次觸發，則重新開始計時

2）場景：

① ajax請求數據（比如下拉刷新、首次延遲）
② ajax提交數據（提交、支付等按鈕重復點擊、首次不延遲）
③ 表單校驗（input輸入時，延遲驗證，首次也延遲）否則可能無法得到校驗通過的結果

3）實現：

① clearTimeOut的返回值是計時器id，此時t還有值 只有t = null，t才會變成null
② 這里不要亂用箭頭函數
③ 不要debugger調試
④ 思路：考慮首次不延遲的情況→沒有定時器則為首次，因此time后要t = null
（time內頻繁觸發，計時器會頻繁重新開始計時）

domObj.onclick = debounce(myFn)

const myClick = () => {console.log('tag', Date.now())
}
var debounce = function (fn, time, triggleNow) {var t = null // 只有第一次點擊會走這里var debounced = function () {var _self = this,args = arguments;if (t) {console.log('t0', t)clearTimeout(t)// 清除定時器后，t的值還在 // 除非賦值null，否則隨著點擊次數而增加}console.log('t1', t)if (triggleNow) {var exec = !tconsole.log('t2', t)t = setTimeout(function () {t = null}, time)// 到這里 t必有idconsole.log('t3', t)if (exec) {fn.apply(_self, args)}} else {console.log('t4', t)t = setTimeout(function () {fn.apply(_self, args)}, time)}}debounced.remove = function () {clearTimeout(t)t = null}return debounced}
const box = document.getElementsByClassName('box')[0]
box.onclick = debounce(myClick, 1000, true)

表單輸入

const oInput = document.getElementById('input')
const myCheck = function () {var val = this.valueif (val.length < 6) {console.log('校驗失敗')} else {console.log('校驗成功')}
}
oInput.onkeyup = debounce(myCheck, 1000, true)
// 只會打印校驗失敗，之后即使長度滿足了，由于在time內頻繁鍵入，也不會再觸發了

若函數有返回值

var debounce = function (fn, time, triggleNow) {var t = null,res// console.log('t', t)// time內多次點擊，只有初次會走這里var debounced = function () {var _self = this,args = arguments;if (t) {console.log('t0', t)clearTimeout(t)// 清除定時器后，t的值還在 // 除非賦值null，否則隨著點擊次數而增加}console.log('t1', t)if (triggleNow) {var exec = !tconsole.log('t2', t)t = setTimeout(function () {t = null}, time)// 到這里 t必有idconsole.log('t3', t)if (exec) {res = fn.apply(_self, args)}} else {console.log('t4', t)t = setTimeout(function () {res = fn.apply(_self, args)}, time)}return res // 假若函數有返回值}debounced.remove = function () {clearTimeout(t)t = null}return debounced}

2、 函數節流

1）含義場景：

事件被觸發、n秒內只且必執行一次事件處理函數 ，可用于輸入驗證、ajax提交

2） 實現：

function throttle(fn, delay) {// 閉包var t = null,begin = new Date().getTime()return function () {var _self = this,args = arguments,cur = new Date().getTime()clearTimeout(t)if (cur - begin >= delay) {console.log(1)// 隔了很久后再在原來基礎上輸入，會先走1，再走2fn.apply(_self, args)begin = cur} else {console.log(2)t = setTimeout(function () {fn.apply(_self, args)}, delay)}}
}

對比：
n秒內頻繁觸發，永遠不讓執行，用函數防抖
n秒內頻繁觸發，有且執行一次，用函數節流

11、 事件循環 文

12、宏任務、微任務 文

13、this指向 文

11、****設計模式

1）單例模式

12、***原型鏈

13、***閉包

14、****事件循環

15、**vue路由模式、前端單頁面路由跳轉實現的原理是什么

1、Vue模板編譯（小野森森）

11、Vue2、3的區別（小野森森）

12、**call、bind、apply

• 改變this指向（第一個參數）
• 只有applay的參數是數組
• 只有bind返回的是函數
  案例

const doSth = (t, cb) => {return () => {if (--t === 0) {cb()}}
}
const print1 = (cb) => {console.log('第一次打印')// 打印出這句話后執行cbcb()
}
const fn = doSth(3, print1)
fn()
fn()
fn()

const doSth = (t, cb) => {return () => {if (--t === 0) {cb()}}
}
const print1 = (cb) => {console.log('第一次打印')// 打印出這句話后執行cbcb()
}
const print2 = (cb) => {console.log('第二次打印')cb()
}
const fn = doSth(3, print1.bind(null, print2))
fn()
fn()
fn()

13、401：沒有提供認證信息。請求的時候沒有帶上 Token 等

12. 預編譯、作用域、閉包
13. 內容字數位置，寬度高度不定，只展示2行，多余內容…
14. 中斷ajax請求（超時、手動中斷）后端響應超時：吉行無憂
15. 事件代理的使用場景
16. vue核心功能

微信網頁版：Http 請求報文頭部信息，其中 Connection: keep-alive 意味著這次請求結束后不會關閉 TCP 連接

待續…

es6程序設計
websocket
面試題
vue3.0+ts
響應式布局
vue3.0星座項目
使用開發者工具