前端代码质量

未分类

try...catch...

// 奇酷消息盒子航班页面——flight.js
onload = function() {
    ···
    try {
        if (flight_num == "null" || flight_num == "NULL") {
            flight_num = flight_numArr[1].replace(" ", "").replace("　", "");
        } else {
            flight_num = flight_numArr[0].replace(" ", "").replace("　", "");
        }
    } catch (e) {
        // TODO: handle exception
    }
    ···
    try {
        flight_from_time = window.injs.getConfigByKey('flight_time');
        flight_to_time = window.injs.getConfigByKey('arrive_time');
        flight_to_date = window.injs.getConfigByKey('arrive_date');
    } catch (e) {
        // TODO: handle exception
    }
    ···
}

第14行和第25行，catch中并没有代码，依旧保留着try。

//850ms
!function() {
     //无 try catch 的情况耗时
     var t = new Date();
     //耗时代码开始
     for (var i = 0;  i < 100000000;  i++) {
         var p = i % 2;
     }
     //耗时代码结束
     document.write(new Date() - t);
     try{
     }catch(e){
     }
 }();
 //140ms
 !function() {
     //无 try catch 的情况耗时
     var t = new Date();
     //耗时代码开始
     for (var i = 0;  i < 100000000;  i++) {
         var p = i % 2;
     }
     //耗时代码结束
     document.write(new Date() - t);
 }();
 //修改后
 !function() {
     !function() {
         //无 try catch 的情况耗时
         var t = new Date();
         //耗时代码开始
         for (var i = 0;  i < 100000000;  i++) {
             var p = i % 2;
         }
         //耗时代码结束
         document.write(new Date() - t);
     }();
     try{
     }catch(e){
     }
 }();

空判断

function isNull(data){ 
    return (data == "" || data == undefined || data == null || data == 0) ? true : false; 
}
···
if(!isNUll(data)) {
    ···
}

其实，这样就可以了：

!!data

PS: 字符串中的0无法判断

面向对象

面向全局写法：

window.onload = { 
    init();
}
function init() { 
    methon1(); 
    methon2(); 
    methon3();
}
function methon1(){}
function methon2(){}
function methon3(){}

普通的面向对象写法：

function App() {}
App.prototype.init = function() {}
App.prototype.render = function() {}
var app = new App();
app.init();
app.render();

从jQuery里面学习到的写法：

window.onload = function(){
    App();
}
function App() {  
    return new App.prototype.init();
}
App.prototype.init = function() {}
App.prototype.init.prototype = App.prototype;

修改样式

//jquery
$(el).css("width"); 
//普通的js
getElementById('el').style.width;
//js
getComputedStyle(el)["width"];

监听和数据劫持

//流量充值页面
if ($("#phone").length > 0) {
		$("#phone").bind("keyup", function(e) {
			var t = this.value.length;
			if(phonenum == $("#phone").val()){
                return ;
            }
Object.defineProperty(obj, key, {
    enumerable: true,   //属性是否可枚举
    configurable: true, //属性是否可配置
    get: function() {
    },
    set: function() {
    }
});

https://github.com/search?p=1&q=stars%3A%3E1&s=stars&type=Repositories

https://github.com/RubyLouvre/avalon