文章

LOC

覺得自己寫 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 就更好了。

*