> 這兩天學到了很多知識，對專案的嚴密性有了極為深刻的理解，簡而言之，身為前端開發者要站在使用者的角度去寫相關程式碼，而不能僅僅侷限於理所當然，也不可以認為資料有便有，沒有便沒有，身為開發者，更多的應該考慮使用者的感受，總結了以下幾點： ### 提高程式碼的健壯性 1.非空過濾 > 給每一條要渲染顯示的資料新增過濾器 > 要思考的不僅僅是渲染成功後的結果，更多要思考的是如果渲染不成功會顯示什麼，也就是當返回結果為空時，要顯示給使用者的是什麼 2. 不完全相信後臺 > 發起請求時新增條件判斷 > 雖然if/else飽受詬病，但可能後臺開發者本身也不能確保不出任何問題，為了提高容錯率，加一點條件判斷是必要的，並且，要結合多個條件確保拿到的是正確的資料 3. 不完全相信使用者 > 對使用者輸入的資料進行嚴格驗證 > 作為開發者當然期待使用者輸入的是自己想要的格式，**但使用者是單純的**，你不能確保使用者一定會按照你想要的進行輸入，這一點至關重要 4. 考慮程式碼的可複用性 > 包括html/css/js/單頁面元件 > 原則：抽離共性，保留不同 >> html: 若dom結構大致相同，可以使用相同的dom結構; >> css/less/scss/stylus: 同一app內若有多次的div/view/text style,可以直接在public.css/less/sass/stylus中宣告共有樣式 >> js:將需要多次使用的業務邏輯封裝成單一功能函式，並在函式內部首先對引數格式進行評估，之後新增條件判斷對引數進行過濾篩選，最後再對符合條件的引數進行處理 >>> 如果單頁面中需要多次使用該函式，則僅需要對在script內進行封裝，如果在多頁面中需要多次使用該函式，可以建立一個utils.js檔案存放共有函式 >>> （vue/uniapp)如果匯入utils.js的函式並準備在單頁面中進行使用時，推薦在該單頁面中寫入一個與utils.js中的**同名**函式，並直接return該同名函式(本質是為了返回utils.js中的同名函式) 5.考慮網路請求 > 使用者的流量是寶貴的，後臺伺服器的壓力是可觀的 > 基於使用者場景(思考：使用者來到某一頁面的目的是什麼)選擇是否傳送適當的請求，要思考的是，如何在保證功能不變的情況下，減少與後臺的互動，從而節省頻寬 ------------------------------------------------------------*假裝是條分割線*---------------------------------------------------------------------- ### 精妙的過濾函式 #### 1. 展示資料的非空處理 ```js //用於過濾 undefined,空字串,null,'null' filterEmpty(value,success,tips){ if(value === undefined || value === '' || value === null || value === 'null' || value === " "){ if(tips === undefined){ return "-"; }else{ return tips } }else{ if(typeof(success) === "function"){//如果是一個方法則呼叫方法 return success(); }else{//否則直接返回第一個引數 return value; } } } ``` #### 2. 表單相關驗證 > 2.1 正則相關驗證 ```js //只包含數字，英文，漢字 isNYC:function(obj ,tipValue,$this){ let specialCharacters = /[\\ud83c\\udc00-\\ud83c\\udfff]|[\\ud83d\\udc00-\\ud83d\\udfff]|[\\u2600-\\u27ff]/g; if(/[^a-zA-Z0-9\u4E00-\u9FA5]/.test(obj) && specialCharacters.test(obj)){ let tip; if(tipValue !== undefined && tipValue !== '' && tipValue !== null && tipValue !== '' && tipValue !== " "){ tip = tipValue; }else { tip = '名稱不能包含特殊字元'; } uni.showToast({ title:tip }) return false; } return true; } ``` > 2.2 漢字驗證 ```js // 漢字 isChinese: function(obj,$this) { var reg = /^[\u0391-\uFFE5]+$/; if(obj != "" && !reg.test(obj)) { uni.showToast({ title:'必須輸入中文' }) return false; } return true; } ``` > 2.3 字母 ```js // 字母 checkChar: function(obj,$this) { var zmReg = /^[a-zA-Z]*$/; if(obj != "" && !zmReg.test(obj)) { uni.showToast({ title:'只能是英文字母' }) return false; } return true; } ``` > 2.4 數字 ```js // 數字 checkNumber: function(obj,$this) { var reg = /^[0-9]+$/; if(obj != "" && !reg.test(obj)) { uni.showToast({ title:'只能輸入數字' }) return false; } return true; } ``` > 2.5 英文字母和數字 ```js // 英文字母和數字 checkStrOrNum: function(obj,$this) { var zmnumReg = /^[0-9a-zA-Z]*$/; if(obj != "" && !zmnumReg.test(obj)) { uni.showToast({ title:'只能輸入是字母或者數字,請重新輸入' }) return false; } return true; }, ``` > 2.6 郵箱 ```js // 郵箱 email: function(obj,$this) { var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; if(!myreg.test(obj)) { uni.showToast({ title:'請輸入有效的郵箱' }) return false; } return true; }, ``` #### 3 時間戳轉換 ```js changeInfoDate(msesInt, format) { Date.prototype.Format = function(fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "H+": this.getHours(), //小時 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for(var k in o) if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; }; var dt = new Date(msesInt); // 初始化Date物件 var ndt = dt.Format(format); return ndt; }; filterDate(date,success,tips) {//用於過濾時間戳 if(date === undefined || date === '' || date === null || date === 'null' || date == 0 || date === ' ' || date === " "){//判空處理 if(tips == undefined){ return "-"; }else { return tips; } }else{ if(typeof(date) === "number" || (typeof (date) === "string" && (date.length >= 10 && date.length <= 13) && date.indexOf("/") === -1 && date.indexOf("-") === -1 && date.indexOf("年") === -1 && date.indexOf(".") === -1)){//為時間戳 if(typeof(date) === "string"){ date = parseInt(date); } return changeInfoDate(date, 'yyyy-MM-dd'); } else{ if(typeof(success) === "function"){//如果是一個方法則呼叫方法 return success(); }else{//否則直接返回第一個引數 return date; } } } } ``` 以上。 ![](https://img2020.cnblogs.com/blog/1542059/202006/1542059-20200606153713897-18125516