東航電商前端技術週刊第五期20180724

今天咱們將分享以下內容，但願能對小夥伴們有些許幫助：

一、經過改變類名渲染不一樣背景圖的簡潔寫法；

二、項目中常會用到的點擊彈出模態框禁止頁面滑動；

3、axios post提交的Content-Type設置；

四、vue踩坑之路——axios post請求傳參失敗解決方案；

五、緩存相關知識整理；

六、關於微信清除緩存；

七、偶遇一個奇葩問題，避免你們踩坑；

 

很少說，直接上例子：

1、經過改變類名渲染不一樣背景圖的簡潔寫法:（不重複書寫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增長會出問題。。。

 

............................. 感謝許亞男老師熱情分享 ..............................

 

 

2、項目中常會用到的點擊彈出模態框禁止頁面滑動：

　　嘗試方法以下：

　　1、開始覺得須要js控制監聽頁面的滾動，

　　　　所以使用document.addEventListener(‘touchmove’,) 的方式，可是測試報錯， emmm....

　　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 = ''; //出現滾動條
},

 

............................. 感謝許亞男老師熱情分享 ..............................

 

3、axios post提交的Content-Type設置

axios.post(url，data, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}} ).then(result => { // do something
 })

 

............................. 感謝於志平老師熱情分享 ..............................

 

4、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兼容問題

 

............................. 感謝許亞男老師熱情分享 ..............................

 

5、緩存相關知識整理

　　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

　　　　若是比較粗的說前後順序應該是這樣：

1. 1. Cache-Control —— 請求服務器以前
   2. Expires —— 請求服務器以前
   3. If-None-Match (Etag) —— 請求服務器
   4. 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。

 

 

 

............................. 感謝李楠老師熱情分享 ..............................

 

 

6、關於微信清除緩存

　　在前端寫頁面時，每每須要屢次調試才能成功，可是在微信內嵌瀏覽器測試時，就會遇到微信的緩存致使js、css等文件不能及時更新而看不到最新的修改效果，這時候咱們就須要清除微信的緩存。

　　實際上，微信比咱們要考慮的多，給咱們開發者提供了清除微信緩存的方法，打開debugx5.qq.com便可，這是QQ瀏覽器的X5內核提供的調試頁面。

　　在代理選項卡的最下面，就有清除緩存的選項和按鈕，勾選以後，點擊清除就能夠了。

 

 

　　固然，X5調試頁面還有其餘更加豐富的功能，小夥伴們能夠去嘗試一下！

 

............................. 感謝劉登科老師熱情分享 ..............................

 

7、偶遇一個奇葩問題，避免你們踩坑

　　今天分享的是一個開發商戶後臺，用pug模版時遇到的一個bug。但願對小夥伴們繞開這個bug，pug在渲染數據時，若是數據是json數據，請先將json轉變爲對象在進行渲染。

　　若是在pug再去轉成對象渲染會報莫名奇妙的錯誤。

 　　如圖所示：

　　

 

　　請先把TimeDetail字段轉成對象在渲染，或者在pug裏先判斷一下TimeDetail是否存在

　　(ps:原本就存在啊，判斷你妹啊莫名奇妙的bug)再轉成對象渲染。

　　但願對小夥伴們有所幫助

　

............................. 感謝唐雪峯老師熱情分享 ..............................