覺得自己寫 code 心態上有所轉變。最近見到這樣的 code:
$.get("/data/aa", function(data){
var result = "";
for(var i=0; i<data.list.length; i++){
result += data.list[i].aaCode;
if(i - 1 != data.list.length){
result += "<br>";
}
}
$("#aaResult").html(result);
});
$.get("/data/bb", function(data){
var result = "";
for(var i=0; i<data.list.length; i++){
result += data.list[i].bbDesp;
if(i - 1 != data.list.length){
result += "<br>";
}
}
$("#bbResult").html(result);
});
$.get("/data/cc", function(data){
var result = "";
for(var i=0; i<data.list.length; i++){
result += data.list[i].ccName;
if(i - 1 != data.list.length){
result += "<br>";
}
}
$("#ccResult").html(result);
});
若果大家熟 jQuery 或 underscore 就可以縮成這樣:
$.when(
$.get("/data/aa"),
$.get("/data/bb"),
$.get("/data/cc")
)
.done(function(aaData, bbData, ccData){
var datas = {
aa: {list: aaData.list, field:'aaCode'},
bb: {list: bbData.list, field:'bbDesp'},
cc: {list: ccData.list, field:'ccName'}
};
_.each(datas, function(data, key){
$("#"+key+"Result").html(_.pluck(data.list, data.field).join("<br>"));
});
});
行數減少了很多!但現在的我會傾向這樣寫:
var DataLoader = {
load: function(){
getRemoteData()
.pipe($.proxy(this, 'transform'))
.done($.proxy(this, 'populate'));
},
getRemoteData: function() {
return $.when(
$.get("/data/aa"),
$.get("/data/bb"),
$.get("/data/cc")
);
},
transform: function(aaData, bbData, ccData){
return {
aa: {list: aaData.list, field:'aaCode'},
bb: {list: bbData.list, field:'bbDesp'},
cc: {list: ccData.list, field:'ccName'}
};
},
populate: function(datas){
_.each(datas, $.proxy(function(data, key){
$("#"+key+"Result").html(this.createHtml(data));
}, this));
},
createHtml: function(data){
return _.pluck(data.list, data.field).join("<br>");
}
}
DataLoader.load();
這樣子行數又一下子變多了。但我覺得至少能夠將不同的 abstraction level 用 function 分隔開來,又可以有比較好的 naming,算不算是比較好理解呢?當然有 test 做 coverage 就更好了。