東航電商前端技術周刊第五期20180724
今天我們將分享如下內容，希望能對小夥伴們有些許幫助：
1、通過改變類名渲染不同背景圖的簡潔寫法；
2、項目中常會用到的點擊彈出模態框禁止頁面滑動；
3、axios post提交的Content-Type設置；
4、vue踩坑之路——axios post請求傳參失敗解決方案；
5、緩存相關知識整理；
6、關於微信清除緩存；
7、偶遇一個奇葩問題，避免大家踩坑；
不多說，直接上例子：
一、通過改變類名渲染不同背景圖的簡潔寫法:（不重復書寫background-size:100% auto）
起初為了節省代碼量只在此標簽加入background-size，類名只用background-image
發現圖片並未加載。但又不想重復書寫造成頁面冗雜，故找尋並進行多次嘗試運用於項 目中，代碼如下：
i { display: inline-block; @include size(48px, 48px); background: no-repeat center/100%; background-image: url("image/success.png"); margin-bottom: 23px; margin-top: 50px; &.wait { background-image: url("image/ico_wait.png"); } &.pay { background-image: url("image/icon_cancel.png"); } }
註：background-size只適用於移動端，pc增加會出問題。。。
............................. 感謝許亞男老師熱情分享 ..............................
二、項目中常會用到的點擊彈出模態框禁止頁面滑動：
嘗試方法如下：
1、開始以為需要js控制監聽頁面的滾動，
因此使用document.addEventListener(‘touchmove’,) 的方式，但是測試報錯，
2、因此又想到超出隱藏也可以阻止滑動：
只是更改了body的overflow屬性，並沒起作用......哎......
Last、最終實現版：
其實無需js腳本監聽，只需在點擊打開或關閉彈框時改變html和body元素的固定類型 以及結合overflow屬性的變化而改變。
/***禁止滑動***/
stop() {
document.documentElement.style.position = ‘fixed‘;
document.body.style.overflow = ‘hidden‘; //隱藏滾動條
},
/***取消滑動限制***/
move() {
document.documentElement.style.position = ‘static‘;
document.body.style.overflow = ‘‘; //出現滾動條
},
............................. 感謝許亞男老師熱情分享 ..............................
三、axios post提交的Content-Type設置
axios.post(url，data,
{headers: {‘Content-Type‘: ‘application/x-www-form-urlencoded‘}}
).then(result => {
// do something
})
............................. 感謝於誌平老師熱情分享 ..............................
四、vue踩坑之路——axios post請求傳參失敗解決方案：
之前做項目中使用攔截器去判斷登陸，因此未發現，後做單頁面應用axios時，按照正常的使用方法傳參如下：（此處扒下文檔中基本寫法與之進行比較）
axios.post(‘/user‘, {
firstName: ‘Fred‘,
lastName: ‘Flintstone‘
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
報400，跟後臺聯調時發現後臺並沒有接收到所傳參數。查閱資料發現有兩種方法均可成功傳參：
1、引用vue自帶的方法Qsz還換成json找到如下方法：
import Qs from ‘qs‘
axios.post(url, Qs.stringify(‘所傳參數’))
.then(function (response) {
const data = response.data;
// if (data && data.Code == 200) {}
if (data && data.Code == 201) {
Info.appLogin();
}
}).catch(function (err) {
Info.layerBox(err, 1)
});
2、運用URLSearchParams方法直接追加參數...
var params = new URLSearchParams();
params.append(‘param1‘, ‘value1‘);
params.append(‘param2‘, ‘value2‘);
axios.post(‘/foo‘, params);
不過推薦使用第一種，第二種存在ie兼容問題
............................. 感謝許亞男老師熱情分享 ..............................
五、緩存相關知識整理
1.瀏覽器輸入 url 之後敲下回車，刷新 F5 與強制刷新(Ctrl + F5)，又有什麽區別？
實際上瀏覽器輸入 url 之後敲下回車就是先看本地 cache-control、expires 的情況，刷新(F5)就是忽略先看本地 cache-control、expires 的情況，帶上條件 If-None-Match、If-Modified-Since，
強制刷新(Ctrl + F5)就是不帶條件的訪問。
2.etag，cache-control，last-modified
如果比較粗的說先後順序應該是這樣：
- Cache-Control —— 請求服務器之前
- Expires —— 請求服務器之前
- If-None-Match (Etag) —— 請求服務器
- If-Modified-Since (Last-Modified) —— 請求服務器
需要註意的是 如果同時有 etag 和 last-modified 存在，在發送請求的時候會一次性的發送給服務器，沒有優先級，服務器會比較這兩個信息.
如果expires和cache-control:max-age同時存在，expires會被cache-control 覆蓋。
其中Expires和cache-control屬於強緩存，last-modified和etag屬於協商緩存 強緩存
與協商緩存 區別：強緩存不發請求到服務器，協商緩存會發請求到服務器。
3.頁面緩存原理
頁面緩存狀態是由http header決定的，一個瀏覽器請求信息，一個是服務器響應信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。
............................. 感謝李楠老師熱情分享 ..............................
六、關於微信清除緩存
在前端寫頁面時，往往需要多次調試才能成功，但是在微信內嵌瀏覽器測試時，就會遇到微信的緩存導致js、css等文件不能及時更新而看不到最新的修改效果，這時候我們就需要清除微信的緩存。
實際上，微信比我們要考慮的多，給我們開發者提供了清除微信緩存的方法，打開debugx5.qq.com即可，這是QQ瀏覽器的X5內核提供的調試頁面。
在代理選項卡的最下面，就有清除緩存的選項和按鈕，勾選之後，點擊清除就可以了。
當然，X5調試頁面還有其他更加豐富的功能，小夥伴們可以去嘗試一下！
............................. 感謝劉登科老師熱情分享 ..............................
七、偶遇一個奇葩問題，避免大家踩坑
今天分享的是一個開發商戶後臺，用pug模版時遇到的一個bug。希望對小夥伴們繞開這個bug，pug在渲染數據時，如果數據是json數據，請先將json轉變為對象在進行渲染。
如果在pug再去轉成對象渲染會報莫名奇妙的錯誤。
如圖所示：
請先把TimeDetail字段轉成對象在渲染，或者在pug裏先判斷一下TimeDetail是否存在
(ps:本來就存在啊，判斷你妹啊莫名奇妙的bug)再轉成對象渲染。
希望對小夥伴們有所幫助
............................. 感謝唐雪峰老師熱情分享 ..............................
東航電商前端技術周刊第五期20180724