程式碼優化
- 濫用jQuery選擇器
- 濫用Angular事件指令(1.x)
在ng-repeat指令中使用事件指令會導致繫結很多次事件,效率低下;應該使用事件代理的方式把相關事件委託給最外層元素處理。(測試例子請使用 angular_learn 專案中的 ngRepeat.html 檔案,原始碼請檢視Angular原始碼中的 addEventListenerFn
方法和jQlite物件的 on
方法以及事件指令 ngEventDirectives
)
2、保證程式碼健壯性
- 有些邏輯不要寫死(比如去重,不能因為重複元素的被人為放到最後四位就直接在程式碼中用去掉後四位來實現去重操作)
3、使用軟體工程的方法(繼承、封裝、多型、設計模式等)
- 封裝
/** * 彈出框處理 * @param{Boolean} isShow是否顯示 * @param{[type]}title標題 * @param{[type]}msg資訊 * @param{[type]}btnNum按鈕數量 * @param{[type]}btnText 按鈕文字 */ $rootScope.dialog = function(isShow,title,msg,btnNum,btnText){ $rootScope.isShow = isShow; $rootScope.title = title; $rootScope.msg = msg; $rootScope.btnNum = btnNum; $rootScope.btnText = btnText; }; //顯示簡單彈出框 $rootScope.showNormalDialog = function(msg,btnText){ $rootScope.dialog(true,'提示',msg,1,btnText); }; //顯示多按鈕彈出框 $rootScope.showMultBtnDialog = function(msg,btnNum,btnText){ $rootScope.dialog(true,'提示',msg,btnNum,btnText); }
4、質量優先
- 移動端推薦使用touch事件代替click事件,因為click事件會有一定延遲,較慢的響應會影響使用者體驗
-
移動端純展示文字最好設定成不可選取,因為使用者可能會誤操作,然後有些裝置、瀏覽器會對文字的選取有特殊的互動,從而對使用者產生干擾
/* 文字不可選css程式碼 */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
-
去掉無意義後臺互動,比如如果資料沒有變化則大多數情況下無需向後臺提交