一道筆試題
之前偶然看到一個公司的筆試題，題目如下：
用HTML5、CSS3、JavaScript，做一個網頁，實現如下圖形式計算器
具體要求：
- 有且只有一個檔案：index.html。不允許再有其他檔案，不允許再有單獨的CSS、JS、PNG、JPG檔案。
- 執行環境為 Google Chrome。
- 必須支援標準的四則運算。例如：1+2*3=7。
- 請在收到郵件的48小時內獨立完成本測試，並回複本郵件。
一道筆試題引發的一個練手專案
花了一點時間寫好的第一版，符合了筆試題的要求。後來左看右看覺得還可以改進做的更好，於是給它不斷的改進，加新功能等，這樣下來沒完沒了，利用業餘時間一點一點的寫，從剛開始的網頁版，到後來做響應式的移動版，再到現在的移動App，短短續續大概寫了3個月吧。
專案地址
最終版的計算器，專案地址和預覽圖片在 GitHub：https://github.com/dunizb/sCalc。
功能說明
最終版的功能如下：
- 介面佈局採用CSS3 的 Flex box佈局
- 內建兩套主題可切換
- 計算曆史記錄顯示
- 左滑右滑可以切換單手模式(App)
- 當輸入手機號碼後長按等於號可以撥打手機號碼(App)
- 版本更新檢查(App)
介面佈局
由於這個專案只是練手,所以採用了HTML5個CSS3技術，也不打算相容IE等低版本瀏覽器，所以直接使用CSS3提供的Flexbox佈局方式。並且使用rem單位來進行自動計算尺寸。
計算計算曆史記錄顯示功能，使用HTML5提供的本地儲存功能之Local Storage，為了方便使用Local Storage，對它進行了簡單的封裝（見js/common.js檔案）使之key值按一定規律生產，方便管理。
key由appName+id組成，id是自動增長不重複的，可以按id和appName刪除一條記錄，輸入*則全部刪除。
打包APP
移動Web版計算器寫完後，又想把他做成APP在手機上執行，由於本人沒用過混合APP諸如ionic之類的框架，所以參考了一下，選擇了Hbuild來進行開發和APP的打包，非常方便。（HBuild）.
單手模式
左滑右滑可以切換單手模式，這就需要移動端的touch事件了，使用如下程式碼判斷是左滑還是又滑：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/** 單手模式 */ function singleModel(){ var calc = document.getElementById("calc"); var startX = 0,moveX = 0,distanceX = 0; var distance = 100; var width = calc.offsetWidth; //滑動事件 calc.addEventListener("touchstart",function(e){ startX = e.touches[0].clientX; }); calc.addEventListener("touchmove",function(e){ moveX = e.touches[0].clientX; distanceX = moveX - startX; isMove = true; }); window.addEventListener("touchend",function(e){ if(Math.abs(distanceX) > width/3 && isMove){ if( distanceX > 0 ){ positionFun("right"); //右滑 }else{ positionFun("left"); //作滑 } } startY = moveY = 0; isMove = false; }); } |
如果是坐滑，就position:absolut;left:0,bottom:0，再把最外層DIV縮小到80%，這樣就實現了左滑計算器縮小移動到左下角。右滑道理一樣。
電話撥打功能
當輸入手機號碼後長按等於號可以撥打手機號碼。這個功能沒什麼神奇，在移動Web上會對那些看起來像是電話號碼的數字處理為電話連結，比如：
- 7位數字，形如：1234567
- 帶括號及加號的數字，形如：(+86)123456789
- 雙連線線的數字，形如：00-00-00111
- 11位數字，形如：13800138000
可能還有其他型別的數字也會被識別。我們可以通過如下的meta來開啟電話號碼的自動識別：
|
1 |
<meta name="format-detection" content="telephone=yes" /> |
開啟電話功能
|
1 |
<a href="tel:123456">123456</a> |
開啟簡訊功能：
|
1 |
<a href="sms:123456">123456</a> |
但是，在Android系統上，只能呼叫系統的撥號介面，在iOS上則能調過這一步直接把電話撥打出去。
版本更新檢查
在關於頁面，有一個版本更新檢查按鈕，就能檢查是否有新版本，這個功能的原理是傳送一個JSOPN請求去檢查伺服器上的JSON檔案，比對版本號，如果伺服器上的版本比APP的版本高則會提示有新版本可以下載。\
客戶端JavaScript程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
function updateApp(){ //檢查新版本 var updateApp = document.getElementById("updateApp"); updateApp.onclick = function(){ var _this = this; $.ajax({ type:'get', url:'http://duni.sinaapp.com/demo/app.php?jsoncallback=?', dataType:'jsonp', beforeSend : function(){ _this.innerHTML = "<i class='iconfont updateAppIcon updateAppIconRotate'></i> 正在檢查新版本..."; }, success:function(data){ var newVer = data[0].version; if(newVer > appConfig.version){ var log = data[0].log; var downloadUrl = data[0].downloadUrl; if(confirm("檢查到新版本【"+newVer+"】，是否立即下載？\n 更新日誌：\n " + log)){ var a = document.getElementById("telPhone"); a.href = downloadUrl; a.target = "_blank"; a.click(); } }else{ alert("你很潮哦，當前已經是最新版本！"); } _this.innerHTML = "<i class='iconfont updateAppIcon'></i> 檢查新版本"; }, error:function(msg){ _this.innerHTML = "<i class='iconfont updateAppIcon'></i> 檢查新版本"; alert("檢查失敗："+msg.message); } }); } } |
服務端JSON：
|
1 2 3 4 5 6 7 8 |
[ { "version":"3.1.0", "downloadUrl":"http://dunizb.b0.upaiyun.com/demo/app/myCalc-3.1.0.apk", "hashCode":"20160812224616", "log":"1.新增切換主題功能 \n 2.新增單手切換模式功能 \n 3.調整UI " } ] |
下個版本計劃
當前3.1.0版本還存在一些問題：
- 由於JS本身存在計算浮點數精度丟失問題，所以這個問題在專案中同意存在，需要自己去處理這個問題
- 由於使用了第三方的天氣介面，用了jquery.Ajax方法，所以違背了使用純原生寫的初衷。
所以下個版本的開發計劃為：
- 解決浮點數計算精度問題
- 把獲取天氣資訊的jquery.Ajax方法替換為原生JavaScript程式碼，自己封裝JSONP請求函式
- 使用物件導向方式重構APP
歡迎大家到github上來看看，如果喜歡可以star、watch一下，或提issue。