1.URL和URI的區(qū)別似谁？
URI: Uniform Resource Identifier 指的是統(tǒng)一資源標(biāo)識符哼蛆，用唯一的標(biāo)識來確定一個資源，它是一種抽象的定義咆爽，也就是說梁棠，不管使用什么方法來定義，只要能唯一的標(biāo)識一個資源伍掀，就可以稱為 URI掰茶。
URL: Uniform Resource Location 指的是統(tǒng)一資源定位符
URN: Universal Resource Name 指的是統(tǒng)一資源名稱
URL 和 URN 是 URI 的子集，URL 可以理解為使用地址來標(biāo)識資源蜜笤，URN 可以理解為使用名稱來標(biāo)識資源濒蒋。
2.get和post請求在緩存方面的區(qū)別？
get請求類似于查找的過程把兔，用戶獲取數(shù)據(jù)沪伙，可以不用每次都與數(shù)據(jù)庫連接，所以可以使用緩存县好。post 不同围橡，post 做的一般是修改和刪除的工作，所以必須與數(shù)據(jù)庫交互缕贡，所以不能使用緩存翁授。因此get請求適合于請求緩存拣播。
回答：緩存一般只適用于那些不會更新服務(wù)端數(shù)據(jù)的請求。一般get請求都是查找請求收擦，不會對服務(wù)器資源數(shù)據(jù)造成修改贮配，而 post 請求一般都會對服務(wù)器數(shù)據(jù)造成修改，所以塞赂，一般會對get請求進行緩存泪勒，很少會對 post 請求進行緩存。
3.圖片的懶加載和預(yù)加載宴猾？
預(yù)加載：提前加載圖片圆存，當(dāng)用戶需要查看時可直接從本地緩存中渲染。懶加載：懶加載的主要目的是作為服務(wù)器前端的優(yōu)化仇哆，減少請求數(shù)或延遲請求數(shù)沦辙。兩種技術(shù)的本質(zhì)：兩者的行為是相反的，一個是提前加載税产，一個是遲緩甚至不加載怕轿。 懶加載對服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會增加服務(wù)器前端壓力辟拷。
懶加載也叫延遲加載撞羽，指的是在長網(wǎng)頁中延遲加載圖片的時機，當(dāng)用戶需要訪問時衫冻，再去加載诀紊，這樣可以提高網(wǎng)站的首屏加載速度，提升用戶的體驗隅俘，并且可以減少服務(wù)器的壓力邻奠。它適用于圖片很多，頁面很長的電商網(wǎng)站的場景为居。懶加載的實現(xiàn)原理是碌宴，將頁面上的圖片的 src 屬性設(shè)置為空字符串掠归，將圖片的真實路徑保存在一個自定義屬性中伙菜，當(dāng)頁面滾動的時候，進行判斷孽惰，如果圖片進入頁面可視區(qū)域內(nèi)膳凝，則從自定義屬性中取出真實路徑賦值給圖片的 src 屬性碑隆，以此來實現(xiàn)圖片的延遲加載。預(yù)加載指的是將所需的資源提前請求加載到本地蹬音，這樣后面在需要用到時就直接從緩存取資源上煤。通過預(yù)加載能夠減少用戶的等待時間，提高用戶的體驗著淆。我了解的預(yù)加載的最常用的方式是使用 js 中的 image 對象劫狠，通過為 image 對象來設(shè)置 scr 屬性拴疤，來實現(xiàn)圖片的預(yù)加載。這兩種方式都是提高網(wǎng)頁性能的方式嘉熊，兩者主要區(qū)別是一個是提前加載遥赚，一個是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用阐肤，預(yù)加載則會增加服務(wù)器前端壓力。
4.mouseover和mouseenter的區(qū)別讲坎？
當(dāng)鼠標(biāo)移動到元素上時就會觸發(fā) mouseenter 事件孕惜，類似 mouseover，它們兩者之間的差別是 mouseenter 不會冒泡晨炕。由于 mouseenter 不支持事件冒泡衫画，導(dǎo)致在一個元素的子元素上進入或離開的時候會觸發(fā)其 mouseover 和 mouseout 事件，但是卻不會觸發(fā) mouseenter 和 mouseleave 事件瓮栗。
5.js拖拽功能的實現(xiàn)削罩？
首先是三個事件，分別是 mousedown费奸，mousemove弥激，mouseup當(dāng)鼠標(biāo)點擊按下的時候，需要一個 tag 標(biāo)識此時已經(jīng)按下愿阐，可以執(zhí)行 mousemove 里面的具體方法微服。clientX，clientY 標(biāo)識的是鼠標(biāo)的坐標(biāo)缨历，分別標(biāo)識橫坐標(biāo)和縱坐標(biāo)以蕴，并且我們用 offsetX 和 offsetY 來表示元素的元素的初始坐標(biāo)，移動的舉例應(yīng)該是：鼠標(biāo)移動時候的坐標(biāo)-鼠標(biāo)按下去時候的坐標(biāo)辛孵。也就是說定位信息為：鼠標(biāo)移動時候的坐標(biāo)-鼠標(biāo)按下去時候的坐標(biāo)+元素初始情況下的 offetLeft.
回答：一個元素的拖拽過程丛肮，我們可以分為三個步驟，第一步是鼠標(biāo)按下目標(biāo)元素魄缚，第二步是鼠標(biāo)保持按下的狀態(tài)移動鼠標(biāo)宝与，第三步是鼠標(biāo)抬起，拖拽過程結(jié)束鲜滩。這三步分別對應(yīng)了三個事件伴鳖，mousedown 事件，mousemove 事件和 mouseup 事件徙硅。只有在鼠標(biāo)按下的狀態(tài)移動鼠標(biāo)我們才會執(zhí)行拖拽事件榜聂，因此我們需要在 mousedown 事件中設(shè)置一個狀態(tài)來標(biāo)識鼠標(biāo)已經(jīng)按下，然后在 mouseup 事件中再取消這個狀態(tài)嗓蘑。在 mousedown 事件中我們首先應(yīng)該判斷须肆，目標(biāo)元素是否為拖拽元素匿乃，如果是拖拽元素，我們就設(shè)置狀態(tài)并且保存這個時候鼠標(biāo)的位置豌汇。然后在 mousemove 事件中幢炸，我們通過判斷鼠標(biāo)現(xiàn)在的位置和以前位置的相對移動，來確定拖拽元素在移動中的坐標(biāo)拒贱。最后 mouseup 事件觸發(fā)后宛徊，清除狀態(tài)，結(jié)束拖拽事件逻澳。
6.為什么使用setTimeout實現(xiàn)setInterval闸天？怎么模擬？
// 思路是使用遞歸函數(shù)斜做，不斷地去執(zhí)行 setTimeout 從而達到 setInterval 的效果function mySetInterval(fn, timeout) { // 控制器苞氮，控制定時器是否繼續(xù)執(zhí)行 var timer = { flag: true }; // 設(shè)置遞歸函數(shù)，模擬定時器執(zhí)行瓤逼。 function interval() { if (timer.flag) { fn(); setTimeout(interval, timeout); } } // 啟動定時器 setTimeout(interval, timeout); // 返回控制器 return timer;}
回答：setInterval 的作用是每隔一段指定時間執(zhí)行一個函數(shù)笼吟，但是這個執(zhí)行不是真的到了時間立即執(zhí)行，它真正的作用是每隔一段時間將事件加入事件隊列中去霸旗，只有當(dāng)當(dāng)前的執(zhí)行棧為空的時候贷帮，才能去從事件隊列中取出事件執(zhí)行。所以可能會出現(xiàn)這樣的情況定硝，就是當(dāng)前執(zhí)行棧執(zhí)行的時間很長皿桑，導(dǎo)致事件隊列里邊積累多個定時器加入的事件，當(dāng)執(zhí)行棧結(jié)束的時候蔬啡，這些事件會依次執(zhí)行诲侮，因此就不能到間隔一段時間執(zhí)行的效果。針對 setInterval 的這個缺點箱蟆，我們可以使用 setTimeout 遞歸調(diào)用來模擬 setInterval沟绪，這樣我們就確保了只有一個事件結(jié)束了，我們才會觸發(fā)下一個定時器事件空猜，這樣解決了 setInterval 的問題绽慈。
7.let和const的注意點？1.聲明的變量只在聲明時的代碼塊內(nèi)有效辈毯，2.不存在聲明提升坝疼，3.存在暫時性死區(qū)，如果在變量聲明前使用谆沃，會報錯
4.不允許重復(fù)聲明钝凶，重復(fù)聲明會報錯
8.什么是rest參數(shù)？?rest 參數(shù)（形式為...變量名）唁影，用于獲取函數(shù)的多余參數(shù)耕陷。
9.什么是尾調(diào)用掂名，使用尾調(diào)用有什么好處？
尾調(diào)用指的是函數(shù)的最后一步調(diào)用另一個函數(shù)哟沫。我們代碼執(zhí)行是基于執(zhí)行棧的饺蔑，所以當(dāng)我們在一個函數(shù)里調(diào)用另一個函數(shù)時，我們會保留當(dāng)前的執(zhí)行上下文嗜诀，然后再新建另外一個執(zhí)行上下文加入棧中猾警。使用尾調(diào)用的話，因為已經(jīng)是函數(shù)的最后一步裹虫，所以這個時候我們可以不必再保留當(dāng)前的執(zhí)行上下文肿嘲，從而節(jié)省了內(nèi)存，這就是尾調(diào)用優(yōu)化筑公。但是 ES6 的尾調(diào)用優(yōu)化只在嚴(yán)格模式下開啟，正常模式是無效的尊浪。
10.Symbol類型的注意點匣屡？
1.Symbol 函數(shù)前不能使用 new 命令，否則會報錯拇涤。
2.Symbol 函數(shù)可以接受一個字符串作為參數(shù)捣作，表示對 Symbol 實例的描述，主要是為了在控制臺顯示鹅士，或者轉(zhuǎn)為字符串時券躁，比較容易區(qū)分。
3.Symbol 作為屬性名掉盅，該屬性不會出現(xiàn)在 for...in也拜、for...of 循環(huán)中，也不會被 Object.keys()趾痘、Object.getOwnPropertyNames()慢哈、JSON.stringify() 返回。
4.Object.getOwnPropertySymbols 方法返回一個數(shù)組永票，成員是當(dāng)前對象的所有用作屬性名的 Symbol 值卵贱。
5.Symbol.for 接受一個字符串作為參數(shù)，然后搜索有沒有以該參數(shù)作為名稱的 Symbol 值侣集。如果有键俱，就返回這個 Symbol 值，否則就新建并返回一個以該字符串為名稱的 Symbol 值世分。
6.Symbol.keyFor 方法返回一個已登記的 Symbol 類型值的 key编振。
11.set和weakset結(jié)構(gòu)？
1.ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set罚攀。它類似于數(shù)組党觅，但是成員的值都是唯一的雌澄，沒有重復(fù)的值。
2.WeakSet 結(jié)構(gòu)與 Set 類似杯瞻，也是不重復(fù)的值的集合镐牺。但是 WeakSet 的成員只能是對象，而不能是其他類型的值魁莉。WeakSet 中的對象都是弱引用睬涧，即垃圾回收機制不考慮 WeakSet 對該對象的引用
12.map和weakmap結(jié)構(gòu)？
1.Map 數(shù)據(jù)結(jié)構(gòu)旗唁。它類似于對象畦浓，也是鍵值對的集合，但是“鍵”的范圍不限于字符串检疫，各種類型的值（包括對象）都可以當(dāng)作鍵讶请。
2.WeakMap 結(jié)構(gòu)與 Map 結(jié)構(gòu)類似，也是用于生成鍵值對的集合屎媳。但是 WeakMap 只接受對象作為鍵名（ null 除外）夺溢，不接受其他類型的值作為鍵名。而且 WeakMap 的鍵名所指向的對象烛谊，不計入垃圾回收機制
13.reflect對象創(chuàng)建目的风响？
1.將 Object 對象的一些明顯屬于語言內(nèi)部的方法（比如 Object.defineProperty，放到 Reflect 對象上丹禀。
2.修改某些 Object 方法的返回結(jié)果状勤，讓其變得更合理。
3.讓 Object 操作都變成函數(shù)行為双泪。
4.Reflect 對象的方法與 Proxy 對象的方法一一對應(yīng)持搜，只要是 Proxy 對象的方法，就能在 Reflect 對象上找到對應(yīng)的方法攒读。這就讓 Proxy 對象可以方便地調(diào)用對應(yīng)的 Reflect 方法朵诫，完成默認(rèn)行為，作為修改行為的基礎(chǔ)薄扁。也就是說剪返，不管 Proxy 怎么修改默認(rèn)行為，你總可以在 Reflect 上獲取默認(rèn)行為邓梅。
14.什么是Promise對象脱盲，身， 是Promises/A+規(guī)范日缨？
Promise 對象是異步編程的一種解決方案钱反，最早由社區(qū)提出。Promises/A+規(guī)范是 JavaScript Promise 的標(biāo)準(zhǔn)，規(guī)定了一個 Promise 所必須具有的特性面哥。Promise 是一個構(gòu)造函數(shù)哎壳，接收一個函數(shù)作為參數(shù)，返回一個 Promise 實例尚卫。一個 Promise 實例有三種狀態(tài)归榕，分別是 pending、resolved 和 rejected吱涉，分別代表了進行中刹泄、已成功和已失敗。實例的狀態(tài)只能由 pending 轉(zhuǎn)變 resolved 或者 rejected 狀態(tài)怎爵，并且狀態(tài)一經(jīng)改變特石，就凝固了，無法再被改變了鳖链。狀態(tài)的改變是通過resolve()和reject()函數(shù)來實現(xiàn)的姆蘸，我們可以在異步操作結(jié)束后調(diào)用這兩個函數(shù)改變 Promise 實例的狀態(tài)，它的原型上定義了一個 then 方法芙委，使用這個 then 方法可以為兩個狀態(tài)的改變注冊回調(diào)函數(shù)乞旦。這個回調(diào)函數(shù)屬于微任務(wù)，會在本輪事件循環(huán)的末尾執(zhí)行题山。
15.require模塊引入的查找方式？
當(dāng) Node 遇到require(X)時故痊，按下面的順序處理顶瞳。（1）如果X是內(nèi)置模塊（比如require('http')） a.返回該模塊。 b.不再繼續(xù)執(zhí)行愕秫。（2）如果X以"./"或者"/"或者"../"開頭 a.根據(jù)X所在的父模塊慨菱，確定X的絕對路徑。 b.將X當(dāng)成文件戴甩，依次查找下面文件符喝，只要其中有一個存在，就返回該文件甜孤，不再繼續(xù)執(zhí)行协饲。XX.jsX.jsonX.node c.將X當(dāng)成目錄，依次查找下面文件缴川，只要其中有一個存在茉稠，就返回該文件，不再繼續(xù)執(zhí)行把夸。X/package.json（main字段）X/index.jsX/index.jsonX/index.node（3）如果X不帶路徑 a.根據(jù)X所在的父模塊而线，確定X可能的安裝目錄。 b.依次在每個目錄中，將X當(dāng)成文件名或目錄名加載膀篮。（4）拋出"not found"
16.手寫一個Promise嘹狞？
const PENDING = "pending";const RESOLVED = "resolved";const REJECTED = "rejected";function MyPromise(fn) { // 保存初始化狀態(tài) var self = this; // 初始化狀態(tài) this.state = PENDING; // 用于保存 resolve 或者 rejected 傳入的值 this.value = null; // 用于保存 resolve 的回調(diào)函數(shù) this.resolvedCallbacks = []; // 用于保存 reject 的回調(diào)函數(shù) this.rejectedCallbacks = []; // 狀態(tài)轉(zhuǎn)變?yōu)?resolved 方法 function resolve(value) { // 判斷傳入元素是否為 Promise 值，如果是誓竿，則狀態(tài)改變必須等待前一個狀態(tài)改變后再進行改變 if (value instanceof MyPromise) { return value.then(resolve, reject); } // 保證代碼的執(zhí)行順序為本輪事件循環(huán)的末尾 setTimeout(() => { // 只有狀態(tài)為 pending 時才能轉(zhuǎn)變磅网， if (self.state === PENDING) { // 修改狀態(tài) self.state = RESOLVED; // 設(shè)置傳入的值 self.value = value; // 執(zhí)行回調(diào)函數(shù) self.resolvedCallbacks.forEach(callback => { callback(value); }); } }, 0); } // 狀態(tài)轉(zhuǎn)變?yōu)?rejected 方法 function reject(value) { // 保證代碼的執(zhí)行順序為本輪事件循環(huán)的末尾 setTimeout(() => { // 只有狀態(tài)為 pending 時才能轉(zhuǎn)變 if (self.state === PENDING) { // 修改狀態(tài) self.state = REJECTED; // 設(shè)置傳入的值 self.value = value; // 執(zhí)行回調(diào)函數(shù) self.rejectedCallbacks.forEach(callback => { callback(value); }); } }, 0); } // 將兩個方法傳入函數(shù)執(zhí)行 try { fn(resolve, reject); } catch (e) { // 遇到錯誤時，捕獲錯誤烤黍，執(zhí)行 reject 函數(shù) reject(e); }}MyPromise.prototype.then = function(onResolved, onRejected) { // 首先判斷兩個參數(shù)是否為函數(shù)類型知市，因為這兩個參數(shù)是可選參數(shù) onResolved = typeof onResolved === "function" ? onResolved : function(value) { return value; }; onRejected = typeof onRejected === "function" ? onRejected : function(error) { throw error; }; // 如果是等待狀態(tài)，則將函數(shù)加入對應(yīng)列表中 if (this.state === PENDING) { this.resolvedCallbacks.push(onResolved); this.rejectedCallbacks.push(onRejected); } // 如果狀態(tài)已經(jīng)凝固速蕊，則直接執(zhí)行對應(yīng)狀態(tài)的函數(shù) if (this.state === RESOLVED) { onResolved(this.value); } if (this.state === REJECTED) { onRejected(this.value); }};
17.如何檢測瀏覽器所支持的最小字體大猩┍？?用 JS 設(shè)置 DOM 的字體為某一個值规哲，然后再取出來跟啤，如果值設(shè)置成功，就說明支持唉锌。
18.怎么做js代碼Error統(tǒng)計隅肥？?error 統(tǒng)計使用瀏覽器的 window.error 事件。
19.單例模式是什么袄简？?單例模式保證了全局只有一個實例來被訪問腥放。比如說常用的如彈框組件的實現(xiàn)和全局狀態(tài)的實現(xiàn)。
20.策略模式是什么绿语？?策略模式主要是用來將方法的實現(xiàn)和方法的調(diào)用分離開秃症，外部通過不同的參數(shù)可以調(diào)用不同的策略。我主要在 MVP 模式解耦的時候用來將視圖層的方法定義和方法調(diào)用分離吕粹。
21.代理模式是什么种柑？ 代理模式是為一個對象提供一個代用品或占位符，以便控制對它的訪問匹耕。比如說常見的事件代理聚请。
22.中介者模式是什么？?中介者模式指的是稳其，多個對象通過一個中介者進行交流驶赏，而不是直接進行交流，這樣能夠?qū)⑼ㄐ诺母鱾€對象解耦欢际。
23.適配器模式是什么母市？?
適配器用來解決兩個接口不兼容的情況，不需要改變已有的接口损趋，通過包裝一層的方式實現(xiàn)兩個接口的正常協(xié)作患久。假如我們需要一種新的接口返回方式椅寺，但是老的接口由于在太多地方已經(jīng)使用了，不能隨意更改蒋失，這個時候就可以使用適配器模式返帕。比如我們需要一種自定義的時間返回格式，但是我們又不能對 js 時間格式化的接口進行修改篙挽，這個時候就可以使用適配器模式荆萤。
24.觀察者模式和發(fā)布訂閱模式有什么不同？
發(fā)布訂閱模式其實屬于廣義上的觀察者模式在觀察者模式中铣卡，觀察者需要直接訂閱目標(biāo)事件链韭。在目標(biāo)發(fā)出內(nèi)容改變的事件后，直接接收事件并作出響應(yīng)煮落。而在發(fā)布訂閱模式中敞峭，發(fā)布者和訂閱者之間多了一個調(diào)度中心。調(diào)度中心一方面從發(fā)布者接收事件蝉仇，另一方面向訂閱者發(fā)布事件旋讹，訂閱者需要在調(diào)度中心中訂閱事件。通過調(diào)度中心實現(xiàn)了發(fā)布者和訂閱者關(guān)系的解耦轿衔。使用發(fā)布訂閱者模式更利于我們代碼的可維護性沉迹。
25.vuede生命周期是什么？?Vue 的生命周期指的是組件從創(chuàng)建到銷毀的一系列的過程害驹，被稱為 Vue 的生命周期鞭呕。通過提供的 Vue 在生命周期各個階段的鉤子函數(shù)，我們可以很好的在 Vue 的各個生命階段實現(xiàn)一些操作宛官。
26.vue的各個生命階段是什么琅拌？
Vue 一共有8個生命階段，分別是創(chuàng)建前摘刑、創(chuàng)建后、加載前刻坊、加載后枷恕、更新前、更新后谭胚、銷毀前和銷毀后徐块，每個階段對應(yīng)了一個生命周期的鉤子函數(shù)。（1）beforeCreate 鉤子函數(shù)灾而，在實例初始化之后胡控，在數(shù)據(jù)監(jiān)聽和事件配置之前觸發(fā)。因此在這個事件中我們是獲取不到data數(shù)據(jù)的旁趟。（2）created 鉤子函數(shù)昼激，在實例創(chuàng)建完成后觸發(fā)，此時可以訪問data、methods 等屬性橙困。但這個時候組件還沒有被掛載到頁面中去瞧掺，所以這個時候訪問不到 $el 屬性。一般我們可以在這個函數(shù)中進行一些頁面初始化的工作凡傅，比如通過 ajax 請求數(shù)據(jù)來對頁面進行初始化辟狈。（3）beforeMount 鉤子函數(shù)，在組件被掛載到頁面之前觸發(fā)夏跷。在 beforeMount 之前哼转，會找到對應(yīng)的 template，并編譯成 render 函數(shù)槽华。（4）mounted 鉤子函數(shù)壹蔓，在組件掛載到頁面之后觸發(fā)。此時可以通過 DOM API 獲取到頁面中的 DOM 元素硼莽。（5）beforeUpdate 鉤子函數(shù)庶溶，在響應(yīng)式數(shù)據(jù)更新時觸發(fā)，發(fā)生在虛擬 DOM 重新渲染和打補丁之前懂鸵，這個時候我們可以對可能會被移除的元素做一些操作偏螺，比如移除事件監(jiān)聽器。（6）updated 鉤子函數(shù)匆光，虛擬 DOM 重新渲染和打補丁之后調(diào)用套像。（7）beforeDestroy 鉤子函數(shù)，在實例銷毀之前調(diào)用终息。一般在這一步我們可以銷毀定時器夺巩、解綁全局事件等。（8）destroyed 鉤子函數(shù)周崭，在實例銷毀之后調(diào)用柳譬，調(diào)用后，Vue 實例中的所有東西都會解除綁定续镇，所有的事件監(jiān)聽器會被移除美澳，所有的子實例也會被銷毀。當(dāng)我們使用 keep-alive 的時候摸航，還有兩個鉤子函數(shù)制跟，分別是 activated 和 deactivated 。用 keep-alive 包裹的組件在切換時不會進行銷毀酱虎，而是緩存到內(nèi)存中并執(zhí)行 deactivated 鉤子函數(shù)雨膨，命中緩存渲染后會執(zhí)行 actived 鉤子函數(shù)。
27.vue組件間的參數(shù)傳遞方式读串？
（1）父子組件間通信第一種方法是子組件通過 props 屬性來接受父組件的數(shù)據(jù)聊记，然后父組件在子組件上注冊監(jiān)聽事件撒妈，子組件通過 emit 觸發(fā)事件來向父組件發(fā)送數(shù)據(jù)。第二種是通過 ref 屬性給子組件設(shè)置一個名字甥雕。父組件通過 $refs 組件名來獲得子組件踩身，子組件通過 $parent 獲得父組件，這樣也可以實現(xiàn)通信社露。第三種是使用 provider/inject挟阻，在父組件中通過 provider 提供變量，在子組件中通過 inject 來將變量注入到組件中峭弟。不論子組件有多深附鸽，只要調(diào)用了 inject 那么就可以注入 provider 中的數(shù)據(jù)。（2）兄弟組件間通信第一種是使用 eventBus 的方法瞒瘸，它的本質(zhì)是通過創(chuàng)建一個空的 Vue 實例來作為消息傳遞的對象坷备，通信的組件引入這個實例，通信的組件通過在這個實例上監(jiān)聽和觸發(fā)事件情臭，來實現(xiàn)消息的傳遞省撑。第二種是通過 $parent.$refs 來獲取到兄弟組件，也可以進行通信俯在。（3）任意組件之間使用 eventBus 竟秫，其實就是創(chuàng)建一個事件中心，相當(dāng)于中轉(zhuǎn)站跷乐，可以用它來傳遞事件和接收事件肥败。如果業(yè)務(wù)邏輯復(fù)雜，很多組件之間需要同時處理一些公共的數(shù)據(jù)愕提，這個時候采用上面這一些方法可能不利于項目的維護馒稍。這個時候可以使用 vuex ，vuex 的思想就是將這一些公共的數(shù)據(jù)抽離出來浅侨，將它作為一個全局的變量來管理纽谒，然后其他組件就可以對這個公共數(shù)據(jù)進行讀寫操作，這樣達到了解耦的目的如输。
28.computer和watch的差異佛舱？
（1）computed 是計算一個新的屬性，并將該屬性掛載到 Vue 實例上挨决，而 watch 是監(jiān)聽已經(jīng)存在且已掛載到 Vue 實例上的數(shù)據(jù)，所以用 watch 同樣可以監(jiān)聽 computed 計算屬性的變化订歪。（2）computed 本質(zhì)是一個惰性求值的觀察者脖祈，具有緩存性，只有當(dāng)依賴變化后刷晋，第一次訪問 computed 屬性盖高，才會計算新的值慎陵。而 watch 則是當(dāng)數(shù)據(jù)發(fā)生變化便會調(diào)用執(zhí)行函數(shù)。（3）從使用場景上說喻奥，computed 適用一個數(shù)據(jù)被多個數(shù)據(jù)影響席纽，而 watch 適用一個數(shù)據(jù)影響多個數(shù)據(jù)。
區(qū)別：computed 是計算屬性撞蚕，依賴其他屬性計算值润梯，并且 computed 的值有緩存，只有當(dāng)計算值變化才會返回內(nèi)容甥厦。watch 監(jiān)聽到值的變化就會執(zhí)行回調(diào)纺铭，在回調(diào)中可以進行一些邏輯操作。
29.vue-router中的導(dǎo)航鉤子函數(shù)刀疙？
（1）全局的鉤子函數(shù) beforeEach 和 afterEachbeforeEach 有三個參數(shù)舶赔，to 代表要進入的路由對象，from代表離開的路由對象谦秧。next 是一個必須要執(zhí)行的函數(shù)竟纳，如果不傳參數(shù)，那就執(zhí)行下一個鉤子函數(shù)疚鲤，如果傳入false锥累，則終止跳轉(zhuǎn)，如果傳入一個路徑石咬，則導(dǎo)航到對應(yīng)的路由揩悄，如果傳入 error ，則導(dǎo)航終止鬼悠，error 傳入錯誤的監(jiān)聽函數(shù)删性。（2）單個路由獨享的鉤子函數(shù) beforeEnter，它是在路由配置上直接進行定義的焕窝。（3）組件內(nèi)的導(dǎo)航鉤子主要有這三種：beforeRouteEnter蹬挺、beforeRouteUpdate、beforeRouteLeave它掂。它們是直接在路由組件內(nèi)部直接進行定義的巴帮。
30.$router和$route 的區(qū)別？
$route 是“路由信息對象”虐秋，包括 path榕茧，params，hash客给，query用押，fullPath，matched靶剑，name 等路由信息參數(shù)蜻拨。而 $router 是“路由實例”對象包括了路由的跳轉(zhuǎn)方法池充，鉤子函數(shù)等。
31.vue的常用的修飾符缎讼？prevent:提交事件不再重載頁面收夸；.stop:阻止單擊事件冒泡；.self:當(dāng)事件發(fā)生在該元素本身而不是子元素的時候會觸發(fā)血崭；
32.vue中key值的作用卧惜？
vue 中 key 值的作用可以分為兩種情況來考慮。第一種情況是 v-if 中使用 key功氨。由于 Vue 會盡可能高效地渲染元素序苏，通常會復(fù)用已有元素而不是從頭開始渲染。因此當(dāng)我們使用 v-if 來實現(xiàn)元素切換的時候捷凄，如果切換前后含有相同類型的元素忱详，那么這個元素就會被復(fù)用。如果是相同的 input 元素跺涤，那么切換前后用戶的輸入不會被清除掉匈睁，這樣是不符合需求的。因此我們可以通過使用 key 來唯一的標(biāo)識一個元素桶错，這個情況下航唆，使用 key 的元素不會被復(fù)用。這個時候 key 的作用是用來標(biāo)識一個獨立的元素院刁。第二種情況是 v-for 中使用 key糯钙。用 v-for 更新已渲染過的元素列表時，它默認(rèn)使用“就地復(fù)用”的策略退腥。如果數(shù)據(jù)項的順序發(fā)生了改變任岸，Vue 不會移動 DOM 元素來匹配數(shù)據(jù)項的順序，而是簡單復(fù)用此處的每個元素狡刘。因此通過為每個列表項提供一個 key 值享潜，來以便 Vue 跟蹤元素的身份，從而高效的實現(xiàn)復(fù)用嗅蔬。這個時候 key 的作用是為了高效的更新渲染虛擬 DOM剑按。
33.keep-alive組件有什么作用？ 如果你需要在組件切換的時候，保存一些組件的狀態(tài)防止多次渲染，就可以使用 keep-alive 組件包裹需要保存的組件。
34.vue中mixin和mixins區(qū)別？
mixin 用于全局混入佩微，會影響到每個組件實例。mixins 應(yīng)該是我們最常使用的擴展組件的方式了。如果多個組件中有相同的業(yè)務(wù)邏輯扮休，就可以將這些邏輯剝離出來锣枝，通過 mixins 混入代碼，比如上拉下拉加載數(shù)據(jù)這種邏輯等等兰英。另外需要注意的是 mixins 混入的鉤子函數(shù)會先于組件內(nèi)的鉤子函數(shù)執(zhí)行撇叁，并且在遇到同名選項的時候也會有選擇性的進行合并
35.開發(fā)中常用的幾種Content-Type?
（1）application/x-www-form-urlencoded瀏覽器的原生 form 表單，如果不設(shè)置 enctype 屬性畦贸，那么最終就會以 application/x-www-form-urlencoded 方式提交數(shù)據(jù)陨闹。該種方式提交的數(shù)據(jù)放在 body 里面，數(shù)據(jù)按照 key1=val1&key2=val2 的方式進行編碼薄坏，key 和val都進行了 URL轉(zhuǎn)碼趋厉。（2）multipart/form-data該種方式也是一個常見的 POST 提交方式，通常表單上傳文件時使用該種方式胶坠。（3）application/json告訴服務(wù)器消息主體是序列化后的 JSON 字符串君账。（4）text/xml該種方式主要用來提交 XML 格式的數(shù)據(jù)。
36.如何封裝一個javascript的類型判斷函數(shù)沈善？
function getType(value) {?
?// 判斷數(shù)據(jù)是 null 的情況
?if (value === null) { return value + ""; }
?// 判斷數(shù)據(jù)是引用類型的情況
?if (typeof value === "object") { let valueClass = Object.prototype.toString.call(value), type = valueClass.split(" ")[1].split(""); type.pop(); return type.join("").toLowerCase(); }?
else { // 判斷數(shù)據(jù)是基本數(shù)據(jù)類型的情況和函數(shù)的情況 return typeof value; }}
37.使用閉包實現(xiàn)每隔一秒打印1乡数，2，3闻牡，4净赴？
// 使用閉包實現(xiàn)for (var i = 0; i < 5; i++) { (function(i) { setTimeout(function() { console.log(i); }, i * 1000); })(i);}// 使用 let 塊級作用域for (let i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, i * 1000);}
38.手寫一個jsonp？
function jsonp(url, params, callback) {
?// 判斷是否含有參數(shù) let queryString = url.indexOf("?") === "-1" ? "?" : "&";?
?// 添加參數(shù) for (var k in params) { if (params.hasOwnProperty(k)) { queryString += k + "=" + params[k] + "&"; } }?
?// 處理回調(diào)函數(shù)名 let random = Math.random() .toString() .replace(".", ""), callbackName = "myJsonp" + random; // 添加回調(diào)函數(shù) queryString += "callback=" + callbackName;?
?// 構(gòu)建請求 let scriptNode = document.createElement("script"); scriptNode.src = url + queryString;?
?window[callbackName] = function() {?
?// 調(diào)用回調(diào)函數(shù) callback(...arguments);?
?// 刪除這個引入的腳本 document.getElementsByTagName("head")[0].removeChild(scriptNode); };?
?// 發(fā)起請求 document.getElementsByTagName("head")[0].appendChild(scriptNode);}
39.手寫一個觀察者模式罩润？
var events = (function() {
?var topics = {}; return {?
?// 注冊監(jiān)聽函數(shù) subscribe: function(topic, handler) { if (!topics.hasOwnProperty(topic)) { topics[topic] = []; } topics[topic].push(handler); },?
?// 發(fā)布事件玖翅，觸發(fā)觀察者回調(diào)事件 publish: function(topic, info) { if (topics.hasOwnProperty(topic)) { topics[topic].forEach(function(handler) { handler(info); }); } },
?// 移除主題的一個觀察者的回調(diào)事件 remove: function(topic, handler) { if (!topics.hasOwnProperty(topic)) return; var handlerIndex = -1; topics[topic].forEach(function(item, index) { if (item === handler) { handlerIndex = index; } }); if (handlerIndex >= 0) { topics[topic].splice(handlerIndex, 1); } },?
?// 移除主題的所有觀察者的回調(diào)事件 removeAll: function(topic) { if (topics.hasOwnProperty(topic)) { topics[topic] = []; } } };})();
40.EventEmitter實現(xiàn)？
classEventEmitter{constructor(){this.events={};}
on(event,callback){letcallbacks=this.events[event]||[];callbacks.push(callback);this.events[event]=callbacks;returnthis;}
off(event,callback{letcallbacks=this.events[event];this.events[event]=callbacks&&callbacks.filter(fn=>fn!==callback);returnthis;}
emit(event,...args){letcallbacks=this.events[event];callbacks.forEach(fn=>{fn(...args);});returnthis;}
once(event,callback){letwrapFun=function(...args){callback(...args);
this.off(event,wrapFun);};
this.on(event,wrapFun);returnthis;}}
41.js中的命名規(guī)則割以？
（1）第一個字符必須是字母金度、下劃線（_）或美元符號（$）（2）余下的字符可以是下劃線、美元符號或任何字母或數(shù)字字符一般我們推薦使用駝峰法來對變量名進行命名拳球，因為這樣可以與ECMAScript內(nèi)置的函數(shù)和對象命名格式保持一致审姓。
42.js語句末尾分號是否可以省略？
在 ECMAScript 規(guī)范中祝峻，語句結(jié)尾的分號并不是必需的魔吐。但是我們一般最好不要省略分號，因為加上分號一方面有利于我們代碼的可維護性莱找，另一方面也可以避免我們在對代碼進行壓縮時出現(xiàn)錯誤酬姆。
43.obiect.assign()？?Object.assign()方法用于將所有可枚舉屬性的值從一個或多個源對象復(fù)制到目標(biāo)對象奥溺。它將返回目標(biāo)對象辞色。
44.Math.ceil和Math.floor的區(qū)別？
Math.ceil()===向上取整浮定，函數(shù)返回一個大于或等于給定數(shù)字的最小整數(shù)相满。Math.floor()===向下取整层亿，函數(shù)返回一個小于或等于給定數(shù)字的最大整數(shù)。
45.jsfor循壞的注意點立美？
for(vari=0,j=0;i<5,j<9;i++,j++){console.log(i,j);}
// 當(dāng)判斷語句含有多個語句時匿又，以最后一個判斷語句的值為準(zhǔn)，因此上面的代碼會執(zhí)行 10 次建蹄。
// 當(dāng)判斷語句為空時碌更，循環(huán)會一直進行。
46.js中倒計時的實現(xiàn)洞慎？
在前端實現(xiàn)中我們一般通過 setTimeout 和 setInterval 方法來實現(xiàn)一個倒計時效果痛单。但是使用這些方法會存在時間偏差的問題，這是由于 js 的程序執(zhí)行機制造成的劲腿，setTimeout 和 setInterval 的作用是隔一段時間將回調(diào)事件加入到事件隊列中旭绒，因此事件并不是立即執(zhí)行的，它會等到當(dāng)前執(zhí)行棧為空的時候再取出事件執(zhí)行谆棱，因此事件等待執(zhí)行的時間就是造成誤差的原因快压。一般解決倒計時中的誤差的有這樣兩種辦法：（1）第一種是通過前端定時向服務(wù)器發(fā)送請求獲取最新的時間差，以此來校準(zhǔn)倒計時時間垃瞧。（2）第二種方法是前端根據(jù)偏差時間來自動調(diào)整間隔時間的方式來實現(xiàn)的蔫劣。這一種方式首先是以 setTimeout 遞歸的方式來實現(xiàn)倒計時，然后通過一個變量來記錄已經(jīng)倒計時的秒數(shù)个从。每一次函數(shù)調(diào)用的時候脉幢，首先將變量加一，然后根據(jù)這個變量和每次的間隔時間嗦锐，我們就可以計算出此時無偏差時應(yīng)該顯示的時間嫌松。然后將當(dāng)前的真實時間與這個時間相減，這樣我們就可以得到時間的偏差大小奕污，因此我們在設(shè)置下一個定時器的間隔大小的時候萎羔，我們就從間隔時間中減去這個偏差大小，以此來實現(xiàn)由于程序執(zhí)行所造成的時間誤差的糾正碳默。
47.進程間通信的方式贾陷？1.管道通信，2.消息隊列通信嘱根，3.信號量通信髓废，4.信號通信，5.共享內(nèi)存通信该抒，6.套接字通信
HTML部分:
?1.了解meta viewport 嗎慌洪？怎么寫？（移動端開發(fā)）
[if !supportLists]第一、[endif]如果不設(shè)置meta viewport標(biāo)簽冈爹，那么移動設(shè)備上瀏覽器默認(rèn)的寬度值為800px涌攻，980px，1024px等這些频伤，是大于屏幕寬度的癣漆。這里的寬度所用的單位px都是指css中的px，它跟代表實際屏幕物理像素的px不同剂买。[if !supportLists]第二、[endif]每個移動設(shè)備瀏覽器中都有一個理想的寬度癌蓖，相當(dāng)于css中的100%所代表的寬度瞬哼。設(shè)置理想的寬度可以使得網(wǎng)站在尺寸近似但分辨率不同的設(shè)備上看起來是差不多的。市面上的手機品牌種類繁多租副，但是理想的viewport歸納起來只有320/360/384/400等
2.行內(nèi)元素有哪些坐慰？塊級元素有哪些？
行內(nèi)元素有: span a b i img input select strong
塊級元素有：div p h1-h6 ul table form ul ol li dl dt dd
3.a標(biāo)簽中如何禁用href 跳轉(zhuǎn)頁面用僧？
1结胀、e.preventDefault();
2、href="javascript:void(0);"
4.Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分责循？
https://www.cnblogs.com/wuqiutong/p/5986191.html
用自己的話總結(jié)
5.HTML與XHTML 二者有什么區(qū)別糟港？
(1)、在XHTML中標(biāo)記名稱必須小寫<body><p>hello</p></body>
(2)院仿、在XHTML中屬性名稱必須小寫<img src="1.jpg" /> src必須小寫
(3)秸抚、在XHTML中標(biāo)記必須嚴(yán)格嵌套<p><b>hello</b></p>
(4)、在XHTML中標(biāo)記必須封閉<p>hello</p>
(5)歹垫、在XHTML中即使是空元素的標(biāo)記也必須封閉<br/>
(6)剥汤、在XHTML中屬性值用雙引號括起來<img src="1.jpg" width="60" />
(7)、在XHTML中屬性值必須使用完整形式 <Input disablade="true" />
(8)排惨、在XHTML中應(yīng)該區(qū)分“內(nèi)容標(biāo)記” 和 “結(jié)構(gòu)標(biāo)記”
CSS部分:
1.邊距重疊解決方案(BFC) BFC原理?
(1)吭敢、BFC的基本概念？
塊級格式化上下文暮芭。與之并列的是IFC（內(nèi)聯(lián)元素的格式化上下文鹿驼，此處先不討論哈）。
(2)谴麦、說下BFC的原理蠢沿？
BFC原理就是BFC的渲染規(guī)則，共四點：
a)在BFC這個元素垂直方向的邊距會發(fā)生重疊匾效。
b) BFC的區(qū)域不會與浮動元素box重疊舷蟀，用來清除浮動的和布局的。
c) BFC在頁面上是一個獨立的容器，外面的元素不會影響里面的元素野宜，里面的元素也不會影響外面的元素扫步。
d)計算BFC元素的高度的時候，浮動元素也會參與計算匈子。
2.CSS選擇器列表優(yōu)先級及權(quán)重?
2.1選擇器類型
1河胎、ID #id
2、class .class
3虎敦、標(biāo)簽 p
4游岳、通用 *
5、屬性 [type="text"]
6其徙、偽類 ∨咂取：hover
7、偽元素 ::first-line
8唾那、子選擇器访锻、相鄰選擇器
2.2權(quán)重計算規(guī)則
(1).第一等：代表內(nèi)聯(lián)樣式，如: style=””闹获，權(quán)值為1000期犬。
(2).第二等：代表ID選擇器，如：#content避诽，權(quán)值為0100龟虎。
(3).第三等：代表類，偽類和屬性選擇器沙庐，如.content遣总，權(quán)值為0010。
(4).第四等：代表類型選擇器和偽元素選擇器轨功，如div p旭斥，權(quán)值為0001。
(5).通配符古涧、子選擇器垂券、相鄰選擇器等的。如*羡滑、>菇爪、+,權(quán)值為0000。
(6).繼承的樣式?jīng)]有權(quán)值柒昏。
2.3CSS優(yōu)先級算法如何計算?
優(yōu)先級就近原則凳宙，同權(quán)重情況下樣式定義最近者為準(zhǔn);
載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級為:
同權(quán)重: 內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）。
???!important > ?id > class > tag
important比 內(nèi)聯(lián)優(yōu)先級高
JavaScript部分：
1.簡單說瀏覽器本地存儲是怎樣的职祷？
比較詳細：https://blog.csdn.net/u011927449/article/details/107123151/
著重看常用的cookie sessionStorage localStorage 然后主動擴展到vuex與上述存儲的區(qū)別
2.對象的拷貝氏涩？
2.1深拷貝淺拷貝
Js的數(shù)據(jù)類型有基本數(shù)據(jù)類型和引用類型届囚，基本數(shù)據(jù)類型保存在棧內(nèi)存，引用類型保存在堆內(nèi)存是尖。
淺拷貝只復(fù)制指向某個對象的指針意系，而不復(fù)制對象本身，新舊對象還是共享同一塊內(nèi)存饺汹。
深拷貝就是能夠?qū)崿F(xiàn)真正意義上的數(shù)組和對象的拷貝蛔添。遞歸調(diào)用"淺拷貝"。
2.2具體深拷貝的方法
jquery有提供一個$.extend可以用來做 Deep Copy兜辞。
函數(shù)庫lodash迎瞧，有提供_.cloneDeep用來做 Deep Copy。
通過JSON對象來實現(xiàn)深拷貝先JSON.stringify再JSON.parse（無法實現(xiàn)對對象中方法的深拷貝）
手動循環(huán)遍歷賦值
↓
使用ES6的擴展運算符 實現(xiàn)深拷貝
3.防抖與節(jié)流逸吵？
首先明確應(yīng)用場景：在一些持續(xù)觸發(fā)的事件：resize, scroll, mousemove等 不希望頻繁的執(zhí)行函數(shù)夹攒。
防抖(debounce)觸發(fā)事件后的n秒內(nèi)函數(shù)只執(zhí)行一次，重復(fù)觸發(fā)胁塞，重新計算函數(shù)執(zhí)行時間。
節(jié)流(throttle)連續(xù)觸發(fā)事件压语，但是n秒內(nèi)只執(zhí)行一次啸罢。重復(fù)觸發(fā)不重新計算時間。
4.函數(shù)柯里化胎食？
函數(shù)的柯里化扰才，是Javascript 中函數(shù)式編程的一個重要概念。它返回的厕怜，是一個函數(shù)的函數(shù)衩匣。其實現(xiàn)方式，需要依賴參數(shù)以及遞歸粥航，通過拆分參數(shù)的方式琅捏，來調(diào)用一個多參數(shù)的函數(shù)方法，以達到減少代碼冗余递雀，增加可讀性的目的柄延。
框架VUE部分：
1.Vue的雙向綁定的原理是什么？（重點記粗體其余用自己的話串聯(lián)）
實現(xiàn)mvvm的雙向綁定缀程，是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式搜吧，通過Object.defineProperty()來劫持各個屬性的setter，getter杨凑，在數(shù)據(jù)變動時發(fā)布消息給訂閱者滤奈，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。就必須要實現(xiàn)以下幾點：1撩满、實現(xiàn)一個數(shù)據(jù)監(jiān)聽器Observer蜒程，能夠?qū)?shù)據(jù)對象的所有屬性進行監(jiān)聽绅你，如有變動可拿到最新值并通知訂閱者2、實現(xiàn)一個指令解析器Compile搞糕，對每個元素節(jié)點的指令進行掃描和解析勇吊，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)3窍仰、實現(xiàn)一個Watcher汉规，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個屬性變動的通知驹吮，執(zhí)行指令綁定的相應(yīng)回調(diào)函數(shù)针史，從而更新視圖4、mvvm入口函數(shù)碟狞，整合以上三者
2.Vue生命周期鉤子函數(shù)有哪些啄枕？
從創(chuàng)建到銷毀4個步驟 分別加before 和ed，Beforecreate created族沃，Beforemount mounted频祝，Beforeupdate updated，Beforedestory destoryed
3.Vue組件中 data 為什么必須是函數(shù)脆淹？
與js本身的特性相關(guān)
如果data是一個對象常空，那么重復(fù)使用相同的組件，每個組件都會從data對象中取值盖溺，也是取的同一個值漓糙，這就會對組件之間造成互相干擾。
如果是一個函數(shù)烘嘱，在每次組件實例化的時候會return出不同地址的對象昆禽，不會干擾組件。
4.vuex的使用場景蝇庭， 屬性醉鳖， 對應(yīng)的作用？
場景：使用vuex 解決跨組件通信問題哮内，或者是相隔多個層級
屬性：vuex作為數(shù)據(jù)存儲中心辐棒，主要存放：1、組件之間全局共享的數(shù)據(jù)2牍蜂、通過后端異步請求的數(shù)據(jù)
作用：vuex的幾個核心概念
Store：Vuex 使用一個 Store 對象管理應(yīng)用的狀態(tài)漾根，一個 Store 包括 State, Getter, Mutation, Action 四個屬性。
State：State 意為“狀態(tài)”鲫竞，是 vuex 狀態(tài)管理的數(shù)據(jù)源辐怕。
Getter：Getter 的作用與 filters 有一些相似，可以將 State 進行過濾后輸出从绘。
Mutation：Mutaion 是 vuex 中改變 State 的唯一途徑（嚴(yán)格模式下）寄疏，并且只能是同步操作是牢。Mutaion 使得狀態(tài)變得可追蹤，配合一些 devtools 可以實現(xiàn) time-travel 的調(diào)試體驗陕截。
Action：一些對 State 的異步操作可以放在Action 中驳棱，并通過在 Action 提交 Mutaion 變更狀態(tài)。
Module：當(dāng) Store 對象過于龐大時农曲，可根據(jù)具體的業(yè)務(wù)需求分為多個Module社搅。
5：說說Vue Router的路由模式 hash 和 history 的實現(xiàn)原理？
5.1：hash路由模式的實現(xiàn)特性：
1.URL中hash值只是客戶端的一種狀態(tài)乳规，當(dāng)服務(wù)器端發(fā)送請求時形葬，hasj部分不會被發(fā)送
2.Hash值的改變，都會在瀏覽器的訪問歷史中增加一個記錄暮的，因此我們能通過瀏覽器的回退笙以，前進按鈕控制hash的切換
3.可以通過a標(biāo)簽，并設(shè)置href屬性冻辩，當(dāng)用戶點擊這個標(biāo)簽后猖腕，URL的hash值會發(fā)生改變，4.或者使用JavaScript來對loaction.hash進行賦值恨闪，改變URL的hash值
我們可以使用hashchange事件來監(jiān)聽hash值的變化倘感，從而對頁面進行跳轉(zhuǎn)(渲染)
5.2：history模式中的原理:
History中有倆個神器就是pushState和replaceState
pushState: 瀏覽器不會向服務(wù)器請求數(shù)據(jù)，直接改變URL地址凛剥，可以類似的理解為變相版的hash，但不像hash一樣轻姿，瀏覽器會記錄pushState的歷史記錄犁珠，可以使用瀏覽器的前進后退功能作用
relpaceState：不同于pushState，replaceState僅僅是修改了對應(yīng)的歷史記錄
5.3：hash 模式：#后面 hash 值的變化互亮，不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求犁享，瀏覽器不發(fā)出請求，就不會刷新頁面
通過監(jiān)聽hashchange 事件可以知道 hash 發(fā)生了哪些變化豹休，然后根據(jù) hash 變化來實現(xiàn)更新頁面部分內(nèi)容的操作炊昆。
5.4：history 模式：history模式的實現(xiàn)，主要是 HTML5 標(biāo)準(zhǔn)發(fā)布的兩個 API威根，pushState 和 replaceState凤巨，這兩個 API 可以在改變 url，但是不會發(fā)送請求洛搀。這樣就可以監(jiān)聽 url 變化來實現(xiàn)更新頁面部分內(nèi)容的操作
5.5：區(qū)別：url展示上敢茁，hash 模式有“#”，history 模式?jīng)]有
刷新頁面時留美，hash 模式可以正常加載到 hash 值對應(yīng)的頁面彰檬，而 history 沒有處理的話伸刃，會返回 404，一般需要后端將所有頁面都配置重定向到首頁路由
5.6：兼容性逢倍，hash可以支持低版本瀏覽器和 IE捧颅。
174道JavaScript 面試知識點總結(jié)（上）
174道JavaScript 面試知識點總結(jié)（下）
JS語法 ES6、ES7较雕、ES8碉哑、ES9、ES10郎笆、ES11谭梗、ES12新特性
