1.盒子模型
一個盒子中主要的屬性就5個：width、height、padding（內邊距）、border、margin（外邊距），
盒模型有標準盒模型和IE的盒模型，
不同之處就是標準盒模型的內容大小就是content的大小，而IE的則是content + padding +border 總的大小，
那么隨之而來第二個問題–怎么設定這兩種模型呢？
很簡單，通過設定 box-sizing:content-box(W3C)/border-box(IE)就可以達到自由切換的效果，
2.js有幾種資料型別？null與undefined的區別？
JS有7種資料型別：三種基本型別（數字，字串，布爾），兩種參考資料型別（物件，陣列)，兩種特殊資料型別（undefined，null）
其中上面的四種（undefined, number, string, boolean）屬于簡單的值型別，不是物件，
剩下的幾種情況——函式、陣列、物件、null、new Number(10)都是物件，他們都是參考型別，
值型別的型別判斷用typeof，參考型別的型別判斷用instanceof，
null與undefined的區別
undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義，undefined型別只有一個值，undefined.
（1）所有已宣告但是沒有初始化的變數，默認值都為undefined，
（2）函式沒有明確回傳值的時候，會默認回傳undefined，
null為一個空指標物件null表示"沒有物件"，即該處不應該有值
當函式回傳的物件不存在時，回傳null，
當某個物件不需要時，可將值設為null，
3.js閉包
閉包是指有權訪問另一個函式作用域變數的函式，
清晰的講：閉包就是一個函式，這個函式能夠訪問其他函式的作用域中的變數，
創建閉包的通常方式，是在一個函式內部創建另一個函式，
由于作用域鏈的結構，外圍函式是無法訪問內部變數的，為了能夠訪問內部變數，我們就可以使用閉包，閉包的本質還是函式
4.重繪和回流
只是樣式的變化，不會引起DOM樹變化，頁面布局變化的行為叫重繪，且重繪不一定會伴隨回流
引起DOM樹結構變化，頁面布局變化的行為叫回流，且回流一定伴隨重繪，
什么情況下回導致回流，如何避免回流？
1.頁面初次渲染
2.瀏覽器視窗尺寸改變
resize事件發生也會引起回流，
3.DOM的增刪行為
比如你要洗掉某個節點，給某個父元素增加子元素，這類操作都會引起回流，
如果要加多個子元素，最好使用documentfragment，（讓要操作的元素進行離線處理，處理完事以后再一起更新）
documentFragment是一個保存多個element的容器物件（保存在記憶體）當更新其中的一個或者多個element時，頁面不會更新，只有當documentFragment容器中保存的所有element更新后再將其插入到頁面中才能更新頁面，
documentFragment用來批量更新
4.幾何屬性的變化
比如元素寬高變了，border變了，字體大小變了，這種直接會引起頁面布局變化的操作也會引起回流，
如果你要改變多個屬性，最好將這些屬性定義在一個class中，直接修改class名，這樣只用引起一次回流，
5.元素位置的變化
改一個元素的左右margin，padding之類的操作
所以在做元素位移的影片，不要更改margin之類的屬性，使用定位脫離檔案流后改變位置會更好
5.本地存盤和離線快取
5.1本地存盤
1.cookie
（1）在h5之前，存盤主要用的是cookie，cookie會隨著每次http請求頭資訊一起發送，無形中增加了網路流量，另外，cookie能存盤的資料容量有限，根據瀏覽器型別不同而不同
（2）cookie的優缺點
- 優點：
- 可控制過期時間，使其不會長期有效
- 可擴展、可用性比較好
- 可加密減少cookie被破解的可能性
- 缺點：
- 數量和長度有限制，最多20條，最長不能超過4k
- 在請求頭上帶著資料安全性差
（3）cookie的應用場景：主要應用：購物車、客戶端登錄
2.localStorage
（1）localStorage（本地存盤）,可以長期存盤資料，沒有時間限制，一天，一年，兩年甚至更長，資料都可以使用
（2）優缺點
- 優點：
localStorage拓展了cookie的4k限制
localStorage可以將第一次請求的5M大小資料直接存盤到本地，相比于cookie可以節約帶寬
localStorage的使用也是遵循同源策略的，所以不同的網站直接是不能共用相同的localStorage - 缺點：
需要手動洗掉，否則長期存在
瀏覽器大小不一，版本的支持也不一樣
localStorage只支持string型別的存盤，JSON物件需要轉換
localStorage本質上是對字串的讀取，如果存盤內容多的話會消耗記憶體空間，會導致頁面變卡 - 特點：
同源策略限制、只在本地存盤、永久保存、同瀏覽器共享
（3）應用場合
- 資料比較大的臨時保存方案，如在線編輯文章時的自動保存，
- 多頁面訪問共同資料，sessionStorage只適用于同一個標簽頁，localStorage相比而言可以在多個標簽頁中共享資料，
3.sessionStorage
（1）sessionStorage（會話存盤），只有在瀏覽器被關閉之前使用，創建另一個頁面時同意可以使用，關閉瀏覽器之后資料就會消失
（2）特點
- 同源策略限制，若想在不同頁面之間對同一個sessionStorage進行操作，這些頁面必須在同一協議、同一主機名和同一埠下，
- 單標簽頁限制，sessionStorage操作限制在單個標簽頁中，在此標簽頁進行同源頁面訪問都可以共享sessionStorage資料，
- 只在本地存盤，seesionStorage的資料不會跟隨HTTP請求一起發送到服務器，只會在本地生效，并在關閉標簽頁后清除資料
- 存盤方式，seesionStorage的存盤方式采用key、value的方式，value的值必須為字串型別(傳入非字串，也會在存盤時轉換為字串，)，
- 存盤上限限制：不同的瀏覽器存盤的上限也不一樣，但大多數瀏覽器把上限限制在5MB以下，
（3）應用場合：sessionStorage 非常適合單頁應用程式，可以方便在各業務模塊進行傳值，
5.2離線快取
Application Cache （Manifest）
1）使用方法：
1> 在html標簽添加manifest屬性
在頁面的html標簽中添加manifest屬性，屬性值為manifest檔案的路徑，如：
<!DOCTYPE HTML>
<html manifest="../js/demo.manifest">
...
</html>
2）撰寫manifest檔案
manifest檔案是簡單的文本檔案，它會告知瀏覽器需要快取的內容以及不需要快取的內容，
manifest檔案可分為三部分：
(1) CACHE MANIFEST - 在此標題下列出的檔案將在首次下載后進行快取
(2)NETWORK - 在此標題下列出的檔案需要與服務器的連接，且不會被快取
(3)FALLBACK - 在此標題下列出的檔案規定當頁面無法訪問時的回退頁面（比如 404 頁面）
簡單示例：
CACHE MANIFEST
#version 1.1 /*版本號*/
CACHE:
html/index.html /*需要快取的檔案*/
NETWORK:
js/jquery.js /*不需要快取的檔案*/
FALLBACK:
html/index.html /*當頁面無法訪問時的回退頁面*/
3)離線快取與傳統瀏覽器快取區別：
瀏覽器快取（Browser Caching）是為了節約網路的資源加速瀏覽，瀏覽器在用戶磁盤上對最近請求過的檔案進行存盤，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁盤顯示檔案，這樣就可以加速頁面的閱覽
區別：
1、離線快取是針對整個應用，瀏覽器快取是單個檔案
2、離線快取斷網了還是可以打開頁面，瀏覽器快取不行
3、離線快取可以主動通知瀏覽器更新資源
5.3、本地存盤和離線存盤有什么不同
本地存盤與離線快取都是為了方便網頁的加載，提高用戶體驗等，
本地存盤一般存盤的都是資料，而離線快取一般存盤的是網頁等，
6.冒泡演算法思想
交換排序的基本思想是：兩兩比較待排序記錄的關鍵字，發現兩個記錄的次序相反時即進行交換，直到沒有反序的記錄為止，
應用交換排序基本思想的主要排序方法有：冒泡排序和快速排序，
7.vue中的key值作用
需要使用key來給每個節點做一個唯一標識，Diff演算法就可以正確的識別此節點，找到正確的位置區插入新的節點，
所以一句話，key的作用主要是為了高效的更新虛擬DOM
8.v-if和v-show的差別
v-if 是動態添加，當值為 false 時，是完全移除該元素，即 dom 樹中不存在該元素，
v-show 僅是隱藏 / 顯示，值為 false 時，該元素依舊存在于 dom 樹中，若其原有樣式設定了 display: none 則會導致其無法正常顯示
9.vue的生命周期
從開始創建、初始化資料、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列程序
簡單講是一個組件從開始到最后消亡所經歷的各種狀態，就是一個組件的生命周期
一個vue實體在創建程序中呼叫的幾個生命周期鉤子，
1.beforeCreate 說明：在實體初始化之后，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫 注意：此時，無法獲取 data中的資料、methods中的方法
2.created 這是一個常用的生命周期，可以呼叫methods中的方法、改變data中的資料，最常見的就是發送ajax請求來對已經構建完畢的vue物件的靜態屬性進行一些初始化，
3.beforeMount 在掛載開始之前被呼叫
4.mounted 此時，vue實體已經掛載到頁面中，可以獲取到el中的DOM元素，進行DOM操作
5.beforeUpdate 資料更新時呼叫，發生在虛擬 DOM 重新渲染和打補丁之前，你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染程序，
6.updated 組件 DOM 已經更新，所以你現在可以執行依賴于 DOM 的操作，
7.beforeDestroy 實體銷毀之前呼叫，在這一步，實體仍然完全可用，使用場景：實體銷毀之前，執行清理任務，比如：清除定時器等
8.destroyed 說明：Vue 實體銷毀后呼叫，呼叫后，Vue 實體指示的所有東西都會解系結，所有的事件監聽器會被移除，所有的子實體也會被銷毀，
10.跨域
1. 什么是跨域請求
? 在 HTML 中，<a>, <form>, <img>, <script>, <iframe>, <link> 等標簽以及 Ajax 都可以指向一個資源地址，而所謂的跨域請求就是指：當前發起請求的域與該請求指向的資源所在的域不同時的請求，這里的域指的是這樣的一個概念：我們認為如果 “協議 + 域名 + 埠號” 均相同，那么就是同域，
舉個例子：假如一個域名為 aaa.cn的網站，它發起一個資源路徑為 aaa.cn/books/getBookInfo的 Ajax 請求，那么這個請求是同域的，因為資源路徑的協議、域名以及埠號與當前域一致（例子中協議名默認為http，埠號默認為80），但是，如果發起一個資源路徑為 bbb.com/pay/purchase的 Ajax 請求，因為請求域 http://bbb.com:80和發起請求的域 http://aaa.cn:80不同，那么這個請求就是跨域請求，
域名、協議、埠有一個不同就不是同源，三者均相同，這兩個網站才是同源
2.跨域的解決方案
1、 通過jsonp跨域
??jsonp的原理就是利用<script>標簽沒有跨域限制，通過<script>標簽src屬性，發送帶有callback引數的GET請求，服務端將介面回傳資料拼湊到callback函式中，回傳給瀏覽器，瀏覽器決議執行，從而前端拿到callback函式回傳的資料，只能發送get一種請求，
2、跨域資源共享（CORS）
??CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing），它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制，CORS需要瀏覽器和服務器同時支持，目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10，
3、nginx代理跨域
??nginx代理跨域，實質和CORS跨域原理一樣，通過組態檔設定請求回應頭Access-Control-Allow-Origin…等欄位，
1）nginx配置解決iconfont跨域
??瀏覽器跨域訪問js、css、img等常規靜態資源被同源策略許可，但iconfont字體檔案(eot|otf|ttf|woff|svg)例外，此時可在nginx的靜態資源服務器中加入以下配置，
location / {
add_header Access-Control-Allow-Origin *;
}
2）nginx反向代理介面跨域
跨域問題：同源策略僅是針對瀏覽器的安全策略，服務器端呼叫HTTP介面只是使用HTTP協議，不需要同源策略，也就不存在跨域問題，
實作思路：通過Nginx配置一個代理服務器域名與domain1相同，埠不同）做跳板機，反向代理訪問domain2介面，并且可以順便修改cookie中domain資訊，方便當前域cookie寫入，實作跨域訪問，
4、nodejs中間件代理跨域
??node中間件實作跨域代理，原理大致與nginx相同，都是通過啟一個代理服務器，實作資料的轉發，也可以通過設定cookieDomainRewrite引數修改回應頭中cookie中域名，實作當前域的cookie寫入，方便介面登錄認證，
5、document.domain + iframe跨域
??此方案僅限主域相同，子域不同的跨域應用場景，實作原理：兩個頁面都通過js強制設定document.domain為基礎主域，就實作了同域，
6、location.hash + iframe跨域
??實作原理： a欲與b跨域相互通信，通過中間頁c來實作， 三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信，
7、window.name + iframe跨域
??window.name屬性的獨特之處：name值在不同的頁面（甚至不同域名）加載后依舊存在，并且可以支持非常長的 name 值（2MB），
??通過iframe的src屬性由外域轉向本地域，跨域資料即由iframe的window.name從外域傳遞到本地域，這個就巧妙地繞過了瀏覽器的跨域訪問限制，但同時它又是安全操作，
8、postMessage跨域
??postMessage是HTML5 XMLHttpRequest Level 2中的API，且是為數不多可以跨域操作的window屬性之一，它可用于解決以下方面的問題：
- 頁面和其打開的新視窗的資料傳遞
- 多視窗之間訊息傳遞
- 頁面與嵌套的iframe訊息傳遞
- 上面三個場景的跨域資料傳遞
9、WebSocket協議跨域
??WebSocket protocol是HTML5一種新的協議，它實作了瀏覽器與服務器全雙工通信，同時允許跨域通訊，是server push技術的一種很好的實作，
原生WebSocket API使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket介面，提供了更簡單、靈活的介面，也對不支持webSocket的瀏覽器提供了向下兼容，
小結
??以上就是9種常見的跨域解決方案，jsonp（只支持get請求，支持老的IE瀏覽器）適合加載不同域名的js、css，img等靜態資源；CORS（支持所有型別的HTTP請求，但瀏覽器IE10以下不支持）適合做ajax各種跨域請求；Nginx代理跨域和nodejs中間件跨域原理都相似，都是搭建一個服務器，直接在服務器端請求HTTP介面，這適合前后端分離的前端專案調后端介面，document.domain+iframe適合主域名相同，子域名不同的跨域請求，postMessage、websocket都是HTML5新特性，兼容性不是很好，只適用于主流瀏覽器和IE10+，
11.http狀態碼
HTTP狀態碼總的分為五類：
1開頭：資訊狀態碼
2開頭：成功狀態碼
3開頭：重定向狀態碼
4開頭：客戶端錯誤狀態碼
5開頭：服務端錯誤狀態碼
1XX：資訊狀態碼
| 狀態碼 | 含義 | 描述 |
| 100 | 繼續 | 初始的請求已經接受，請客戶端繼續發送剩余部分 |
| 101 | 切換協議 | 請求這要求服務器切換協議，服務器已確定切換 |
2XX：成功狀態碼
| 狀態碼 | 含義 | 描述 |
| 200 | 成功 | 服務器已成功處理了請求 |
| 201 | 已創建 | 請求成功并且服務器創建了新的資源 |
| 202 | 已接受 | 服務器已接受請求，但尚未處理 |
| 203 | 非授權資訊 | 服務器已成功處理請求，但回傳的資訊可能來自另一個來源 |
| 204 | 無內容 | 服務器成功處理了請求，但沒有回傳任何內容 |
| 205 | 重置內容 | 服務器處理成功，用戶終端應重置檔案視圖 |
| 206 | 部分內容 | 服務器成功處理了部分GET請求 |
3XX：重定向狀態碼
| 狀態碼 | 含義 | 描述 |
| 300 | 多種選擇 | 針對請求，服務器可執行多種操作 |
| 301 | 永久移動 | 請求的頁面已永久跳轉到新的url |
| 302 | 臨時移動 | 服務器目前從不同位置的網頁回應請求，但請求仍繼續使用原有位置來進行以后的請求 |
| 303 | 查看其他位置 | 請求者應當對不同的位置使用單獨的GET請求來檢索回應時，服務器回傳此代碼 |
| 304 | 未修改 | 自從上次請求后，請求的網頁未修改過 |
| 305 | 使用代理 | 請求者只能使用代理訪問請求的網頁 |
| 307 | 臨時重定向 | 服務器目前從不同位置的網頁回應請求，但請求者應繼續使用原有位置來進行以后的請求 |
4XX：客戶端錯誤狀態碼
| 狀態碼 | 含義 | 描述 |
| 400 | 錯誤請求 | 服務器不理解請求的語法 |
| 401 | 未授權 | 請求要求用戶的身份演驗證 |
| 403 | 禁止 | 服務器拒絕請求 |
| 404 | 未找到 | 服務器找不到請求的頁面 |
| 405 | 方法禁用 | 禁用請求中指定的方法 |
| 406 | 不接受 | 無法使用請求的內容特性回應請求的頁面 |
| 407 | 需要代理授權 | 請求需要代理的身份認證 |
| 408 | 請求超時 | 服務器等候請求時發生超時 |
| 409 | 沖突 | 服務器在完成請求時發生沖突 |
| 410 | 已洗掉 | 客戶端請求的資源已經不存在 |
| 411 | 需要有效長度 | 服務器不接受不含有效長度表頭欄位的請求 |
| 412 | 未滿足前提條件 | 服務器未滿足請求者在請求中設定的其中一個前提條件 |
| 413 | 請求物體過大 | 由于請求物體過大，服務器無法處理，因此拒絕請求 |
| 414 | 請求url過長 | 請求的url過長，服務器無法處理 |
| 415 | 不支持格式 | 服務器無法處理請求中附帶媒體格式 |
| 416 | 范圍無效 | 客戶端請求的范圍無效 |
| 417 | 未滿足期望 | 服務器無法滿足請求表頭欄位要求 |
5XX：服務端錯誤狀態碼
| 狀態碼 | 含義 | 描述 |
| 500 | 服務器錯誤 | 服務器內部錯誤，無法完成請求 |
| 501 | 尚未實施 | 服務器不具備完成請求的功能 |
| 502 | 錯誤網關 | 服務器作為網關或代理出現錯誤 |
| 503 | 服務不可用 | 服務器目前無法使用 |
| 504 | 網關超時 | 網關或代理服務器，未及時獲取請求 |
| 505 | 不支持版本 | 服務器不支持請求中使用的HTTP協議版本 |
12.MVVM模式
MVVM 由 Model、View、ViewModel 三部分構成，Model 層代表資料模型，也可以在Model中定義資料修改和操作的業務邏輯；View 代表UI 組件，它負責將資料模型轉化成UI 展現出來，ViewModel 是一個同步View 和 Model的物件，
在MVVM架構下，View 和 Model 之間并沒有直接的聯系，而是通過ViewModel進行互動，Model 和 ViewModel 之間的互動是雙向的， 因此View 資料的變化會同步到Model中，而Model 資料的變化也會立即反應到View 上，
ViewModel 通過雙向資料系結把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步作業完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM， 不需要關注資料狀態的同步問題，復雜的資料狀態維護完全由 MVVM 來統一管理，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/224039.html
標籤：其他
上一篇：兩邊寬度固定，中間自適應的布局實作總結（重點學習網格布局）
下一篇：cgb2007-京淘day16