代码优化

© Young 2016-01-30 17:49
Welcome to My GitHub

1、不要滥用框架

  • 滥用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;
    
  • 去掉无意义后台交互,比如如果数据没有变化则大多数情况下无需向后台提交

5、其它建议

  • 避免一段耗时逻辑被高频执行(函数节流)

具体情况有resize、mousemove、onchange等

发表评论

电子邮件地址不会被公开。 必填项已用*标注