#### 同源與跨域 跨域請求是可以發出去的，服務器也能接收并返回結果，只是請求響應response被瀏覽器阻止了。 由于同源策略，跨域的AJAX是不會帶上cookie的，如果想帶，設置withCredential=true，并要求后臺設置白名單。 防止CSRF的方法就是將token攜帶到請求參數中。 后臺設置Accsee-Control-Allow-Origin允許哪些網站跨域。 JSONP的原理： ``` function getResult(data) { document.write(data); } <script src="跨域的網站請求路徑?callback=getResult"></script> //后臺 response.writeHead(200, {"Content-Type": "text/javascript"}); response.send(callback+"('"+123+"')"); ``` JSONP需要將回調寫在url中，因此只能支持get請求。 跨域的另一中常用方案是讓你的后臺做為中轉層，它去請求跨域網站再返給你。服務器和服務器之間是不存在跨域一說的。 #### 上傳base64圖片 ``` //b64toBlob的實現請參考書p308頁 let blob = b64toBlob(base64, "image/png"); formData.append("fileName", blob); ``` ####垂直居中 想要垂直居中一個比div小的圖片，可以： ``` .father { text-align: center; } .father:before { content: ''; vertical-align: middle; line-height=father.height; } //或者 .father:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } ``` #### 左右固定寬度，中間自適應的三欄布局 ``` <div style="width:100px; float: left">我是左側</div> <div style="width:100px; float: right">我是右側</div> <div>我是中間</div> ``` ``` //td會自適應沾滿tr的剩余空間，但其默認寬度是內容寬，因此設置一個很大的寬度，放心，再怎么大最終都不會超過table并溢出的。 <div style="width:100px; float: left">我是左側</div> <div style="width:100px; float: right">我是右側</div> <div style="disply: table-cell; width: 99999px;">我是中間</div> ``` ``` <div style="display: flex"> <div style="width:100px;">我是左側</div> <div style="flex=grow: 1;">我是中間</div> <div style="width:100px;">我是右側</div> </div> ``` #### 響應式開發 ``` div { width: calc((100% - 20px) / 2); } ``` #### click 曾經click在移動端會有延遲，這是因為設備要檢測你的點擊是不是雙擊，因此增加了延遲。但你添加了`<meta name="viewport" content="width=device-width">`后就不會有這個問題了。也可以說，現在的移動端開發可以不用考慮click遲鈍問題了。 touchstart事件：如果你將click替換成touchstart，那么確實沒有延遲，但是當這個dom被滑動時，touchstart也會觸發。 #### 順序 touchstart --> touchmove --> touchend --> click