前言：

看了下部落格的更新時間，發現9月份一篇也沒有更新。一直想著都要抽時間寫一篇的，不然今年的更新記錄就會斷在了9月份。但是還是應為各種各樣的事情給耽擱了。當內心突然湧起一股必須寫點什麼的時候，突然發現自己把寫部落格的“套路”都忘了。(●´ω｀●)φ

一直認為自己還是一個比較熱愛思考的人。最近一直在思考兩個問題：

1. 自己做技術的初衷；
2. 自己的技術成長之路；

當然這兩篇文章自己也在潤色之中，相信很快會跟大家見面。

廢話不多說。來正菜。

1.背景色與透明度相關知識

好吧。至從自己到了新的工作環境以後，開發環境又從只需要相容 IE8 以上回到了必須相容 IE6 瀏覽器上來。所以在第一次做專案的時候，還是遇到一些相容低版本IE瀏覽器的問題。

首先來看一個背景透明的問題，背景透明有三種解決方案：

1. IE6-7使用濾鏡；
2. opcity；
3. rgba；

但是他們也有些細微的差別總結如下：

示例效果如下（如果可以的話，自己可以寫一個簡單的demo看下效果）：

第一個是opcity和rgab的區別

第二張是在ie6中的效果：

當我們在相容低版本瀏覽器的時候可能下面的寫法可以滿足我們的需求（兩個屬性都寫上，瀏覽器識別的屬性直接覆蓋前者的屬性）：

2. html5標籤呼起系統發件箱

做html5開發的過程中，我們可能會有這樣的需求：

點選按鈕，呼起系統的傳送簡訊的視窗，並且自動填充傳送到的號碼和內容；

網路上可以很容易的找到這方面的demo ，並且也可以找到在安卓上和ios上是有卻別的：

但是在實際的開發過程中卻遇到了很多坑。主要原因是：
除了安卓和IOS系統的寫法不同外，ios不同系統版本寫法也不同。而且在不同的app中也有不同。

上面的原因是在生產環境遇到的問題。剛開始因為找不到相關可以查閱的文件只能不做相容。偶然一次在 stackoverflow 發現了問題的原因。

原文內容如下：

翻譯後總結如下：

所以，如果在生產環境中有呼起系統發件箱並且填充號碼和內容的請注意以上的區別。

3.input標籤選擇系統檔案的問題

在html5中 input標籤提供給了開發者訪問系統檔案的能力。說實話如果僅僅在移動端的系統瀏覽器中使用input控制元件真的沒有發現什麼問題。但是在app的**webview**中卻處處是坑。以下是總結出的一些經驗。

<input type="file">在webview中訪問系統檔案遇到的一些問題：

1. 觸發input後，頁面“閃退”（現象就是，檔案選擇框出現後又立馬關閉）；當初遇到這個問題是在貼吧的客戶端中，聽貼吧的兄弟說，他們後來做了相容。
2. 華為手機中可以正常的呼起系統選擇檔案的視窗，但是無法正常讀取系統檔案（最後跟客戶端的同學確定，如果h5在webview中讀取系統檔案，是需要許可權的，也就是說需要客戶端支援）；
3. 在ios的webview中也會出現問題。如果有興趣的同學可以參考這篇蘋果的開發者文件(點選訪問）

詳細的可以參考這篇文章一起閱讀：《h5端呼起攝像頭掃描二維碼並解析》

4.傳遞引數的解決方案

在開發過程曾經遇到過這樣的問題：

很多個頁面，比如說a-z。當我在a頁面的時候，瀏覽器中的url會帶有某些引數，當我在做完一系列的操作到達z頁面。
某天有個需求，使用者在頁面a的時候會帶上一個引數，決定使用者在z頁面做完操作後頁面最終跳向哪裡。那麼這個引數該怎麼傳遞到z頁面呢？

第一種解決方案：

從a頁面到z頁面跳轉的過程中，通過 GET 的方式在url中帶上這個引數；

這種方案是比較常規，也是比較不錯的解決方案。但是需要在頁面中的邏輯跳都加上需要的引數。這樣工作量比較大，而且容易出現遺漏。不建議使用。

第二種解決方案：

使用html5新特性sessionStorage來解決問題。在a頁面的時候，把新新增的需要傳給z頁面的引數放在sessionStorage中。在z頁面直接從sessionStorage中取需要獲取的引數值，然後決定頁面最終的跳轉。

這樣解決問題不僅減少了很大的工作量，也解決了工作量大會遺漏的問題。

sessionStorage的優點：

因為資料是儲存在記憶體中，當會話結束，頁面關閉以後這些資料就會被銷燬。

html5移動端儲存的一些坑：

當然在移動端瀏覽器中使用localStorage和sessionStorage是沒有任何問題的。但是在安卓webview中卻出現了localStorage無法向移動的磁碟寫資料的問題。最後通過網路搜尋發現。在安卓上webview是預設不開啟localStorage想磁碟寫檔案的許可權的。所以如果需要使用localStorage的同學需要找客戶端支援。詳細資訊如下：

5.pc端js生成二維碼

做過一個JavaScript生成二維碼的需求。當時調研了兩個方案：

1. 使用qrcodejs
2. 使用jquery.qrcide

在使用的過程中還是遇到一些坑，總結如下：

所以在前端有需求做生成二維碼需求的時候，可以參考以上的兩個點，確定自己選擇哪個開源庫更適合自己的專案。

6.本地儲存js字串

當看到題目的時候，可能會“一臉蒙逼”為什麼要在本地儲存js字串啊。好吧，有時候業務場景的需求確實是比較變態，且看我描述的一個業務場景。

業務場景：
因為歷史的原因，我們的html5頁面是跑在客戶端的webview中，但是客戶端的titlebar上的那個返回按鈕卻是呼叫了前端js的back方法進行頁面返回的。這個時候就會出現一個問題，如果在我們的h5頁面中跳出了我們自己的頁面，到了第三方的頁面。第三方頁面的js肯定是沒有我們客戶端返回按鈕需要的js返回方法的。

可能有人會說，“臥槽，為什麼要這麼搞，當初誰這麼設計的。。。”或者是“讓客戶端同學發版，用客戶端自己的返回不就解決問題了麼”。

好吧，都說了是歷史原因了其它的都不要說，而且找客戶端同學發版也不太現實的情況下只能想其它的解決方案了。

之前已經聊到過html5的客戶端儲存技術sessionStorage。當然我要做的就是把那段前端的back方法存到sessionStorage中。當載入第三方的頁面的時候直接從sessionStorage中讀取back方法的字串，轉化為js程式碼，並且賦值給客戶端呼叫的方法。

其實這裡的難點是怎麼把js字串轉化為可執行的js程式碼。

1. 使用eval執行js程式碼語句，看下面簡單的示例：

由上面的程式碼可以知道，eval可以把簡單的js字串轉化為js程式碼並且執行它。但是當我們的js字串比較複雜呢？比如下面這樣：

那麼使用eval函式還行不行呢？看下面的示例：

由上面的執行結果可以知道，不管怎麼執行都得不到我們的預期的結果，但是有沒有辦法得到我們預期的結果呢？答案是：有。

1. JavaScript中new 關鍵字的使用

在JavaScript中一切皆是物件。當我們建立一個函式的時候除了函式宣告和函式表示式外，還可以通過new Function的方式來建立函式（這種方式並不常用，但是特殊的場景還是很有用的）。

那麼使用new Function怎麼解決上面的問題呢？請看示例程式碼：

由上面的示例程式碼和c的執行結果我想很多人已經知道怎麼做了，其實只需要對b的字串函式做一下簡單的修改即可，看程式碼：

上面的程式碼執行結果的b()就是我們我想要的儲存的函式體。

7.絕對定位的“坑”

來看一個比較常見的佈局

上面的這個佈局 因為footer是相對於頁面底部絕對定位的，所以當螢幕太小的時候會有一個問題footer區域覆蓋了內容區域，如下圖：

那我們怎麼解決這個問題呢？我看到在我們專案的原始碼中是通過js給footer和內容區域所在的父容器設定一個最小的高度來解決這個為題的，這樣做不好。除了會增加複雜的判斷也會造成頁面的重繪：

很明顯上面的程式碼會造成頁面的重繪（當然這個對系統效能消耗並不是那麼容易感知）。但是用css可不可以解決這個問題呢？

當然是可以的，就是為內容容器設定一個padding-bottom它的值就是底部footer的高度,如下圖：

當移動端的螢幕比較低的時候就會是下面的這種情況：

padding-bottom和footer重合。但是footer永遠不會覆蓋內容區域的內容。這時頁面會出現滾動條。可能我們最初的設計是為了使用者體驗不讓使用者的螢幕出現滾動條，但是還是那句話沒有十全十美的程式，在一些小眾機型上為了保證頁面的正常顯示保證使用者正常瀏覽我們只能犧牲一下這樣的使用者體驗了。

8.鍵盤被呼起模擬滾動

現在大多數的安卓系統和ios系統，當輸入框獲取焦點呼起系統鍵盤的時候，系統鍵盤都會將input輸入框給推上鍵盤的上方，方便使用者的輸入。但是不外乎例外，特別是在某些app中，這個本身是系統的操作並不生效，這個時候如果需要達到完美的使用者體驗就需要人為的參與進來。

解決辦法：

思路很簡單，就是檢測輸入框的focus事件，當輸入框獲取焦點的時候，用js去把頁面滾動一下。最好維護一個系統無法正常推起輸入框的軟體列表（可以通過HTTP的UA來獲取軟體的唯一標識）。如果可以使用系統預設的滾動就用系統的，如果不可以再人為的呼叫js干預。

打賞支援我寫出更多好文章，謝謝！

打賞作者