代码review

代码review

H5 奇酷消息盒子 flight.js

使用格式化写渲染数据的过程

function setJingTing(flightContent, flightObj) {
    flightContent += '<section class="introduce flightdetail">';
    flightContent += '<div class="bottom1px fs14"><img src="../images/pass.png" />';
    flightContent += checkAirport(flightObj['FlightDepAirport']);// 珠海金湾机场 26℃ 小雨
    flightContent += '</div>';
    flightContent += '<table cellpadding="0" cellspacing="0">';
    flightContent += '<tr>';
    flightContent += '<td>航站楼</td>';
    flightContent += '<td>停留</td>';
    flightContent += '<td>登机口</td>';
    flightContent += '</tr>';
    flightContent += '<tr>';
    flightContent += '<td><p>';
    flightContent += flightObj['FlightHTerminal'].trim() == "" ? "--"
        : flightObj['FlightHTerminal'];
    flightContent += '</p></td>';
    flightContent += '<td><p>';
    flightContent += getResidenceTime(flightObj);
    flightContent += '</p></td>';
    flightContent += '<td><p>';
    flightContent += flightObj['BoardGate'].trim() == "" ? "--"
        : flightObj['BoardGate'];
    flightContent += '</p></td>';
    flightContent += '</tr>';
    flightContent += '</table>';
    flightContent += '</section>';
    $("#flightContent").append(flightContent)
}

优化后：

function setJingTing(flightContent, flightObj) {
    flightContent = '<section class="introduce flightdetail">' +
                        '<div class="bottom1px fs14"> + 
                            '<img src="../images/pass.png" />' +
                            checkAirport(flightObj['FlightDepAirport']) +
                        '</div>'+
                        '<table cellpadding="0" cellspacing="0">' +
                            '<tr>'+
                                '<td>航站楼</td>'+
                                '<td>停留</td>'+
                                '<td>登机口</td>'+
                            '</tr>'+
                            '<tr>'+
                                '<td>'+
                                    '<p>'+
                                        flightObj['FlightHTerminal'].trim() == "" ? "--" : flightObj['FlightHTerminal'] +
                                    '</p>'+
                                '</td>'+
                                '<td>'+
                                    '<p>' +
                                        getResidenceTime(flightObj)+
                                    '</p>'+
                                '</td>'+
                                '<td>'+
                                    '<p>'+
                                    flightObj['BoardGate'].trim() == "" ? "--"
: flightObj['BoardGate']+
                                    '</p>'+
                                </td>'+
                            '</tr>'+
                        '</table>'+
                    '</section>';
    $("#flightContent").append(flightContent)
}

去掉table，重构后：

function setJingTing(flightContent, flightObj) {
    flightContent += '<section class="introduce flightdetail">' +
                        '<div class="bottom1px fs14"> + 
                            '<img src="../images/pass.png" />' +
                            checkAirport(flightObj['FlightDepAirport']) +
                        '</div>'+
                        '<div>'+
                            '<span>航站楼</span>'+
                            '<span>停留</span>'+
                            '<span>登机口</span>'+
                        '</div>'+
                        '<div>'+
                            '<span>flightObj["FlightHTerminal"].trim() == "" ? "--" : flightObj["FlightHTerminal"]</span>'+
                            '<span>getResidenceTime(flightObj)</span>'+
                            '<span>flightObj["BoardGate"].trim() == "" ? "--"
: flightObj["BoardGate"]</span>'+
                        '</div>'+
                    '</section>';
    $("#flightContent").append(flightContent)
}

截图：

简单的if可以用三目元算符代替：

function isNull(str) {
    if (typeof str != "undefined" && str != null && str.length > 0) {
        return false;
    } else {
        return true;
    }
}
function defaultData(){
    if(isNull(cfcz)){cfcz="" ; }// 出发时间
    if(isNull(dds)){dds="" ; }
    if(isNull(ddTime)){ddTime="";}
    if(isNull(cfTime)){cfTime="";}
    if(isNull(seat)){seat="";$("#seatId").hide();}
}
// if当然是写成这样比较好读：
if(condition) {
    // code
} else {
    // todo
}
// 所以……
function defaultData(){
    isNull(cfcz) ? cfcz="" : null; // 出发时间
    isNull(dds) ? dds="" : null;
    isNull(ddTime) ? ddTime="" : null;
    isNull(cfTime) ? cfTime="" : null;
    isNull(seat) ? seat="" : $("#seatId").hide();
}
// 用优先级更高的&&代替只有一个执行语句的三目元算符
function defaultData(){
    isNull(cfcz) && cfcz=""; // 出发时间
    isNull(dds) && dds="";
    isNull(ddTime) && ddTime="";
    isNull(cfTime) && cfTime="";
    isNull(seat) ? seat="" : $("#seatId").hide();
}
// 例子：
var a = 6;
if(a > 5) {
    console.log('ok');
}
a > 5 && console.log('ok');

能用变量的尽量用变量

/* sdkVersion */
var str = checkActionAndVersion(actionDataType, "201604051432");
// 优化后
var versionCode = '201604051432';
var str = checkActionAndVersion(actionDataType, versionCode);

jquery源码压缩前

jquery源码压缩后