javascript 使用 array+dictionary 讓工作簡化

這個寫法, 不只可以套用在 javascript, 其他的程式語言也都可以用到.

常常會遇到要格式化的輸出資料, 每筆資料, 有些變數不太相同, 以下圖 wordpress 在排序時, 可以依照”內容標題” / “日期” 二欄的遞增與遞減排序:

原本的javascript寫法:

document.getElementById('user-sorting-name').innerHTML="<a href=\"#\" onclick=\"change_user_orderby('name','asc')\">Name</a> <span class=\"sorting-indicator\"></span>";
document.getElementById('user-sorting-date').innerHTML="<a href=\"#\" onclick=\"change_user_orderby('date','asc')\">Date</a> <span class=\"sorting-indicator\"></span>";

簡化後的寫法, 抽出變數, 並用loop來產生多筆的資料:

sorting_fields = [
{
	name: 'name',
	orderby: 'asc',
	description: 'Name',
},
{
	name: 'date',
	orderby: 'asc',
	description: 'Date',
},
];
for(let key in sorting_fields) {
	document.getElementById(table_name+'-sorting-'+sorting_fields[key].name).innerHTML="<a href=\"#\" onclick=\"change_"+ table_name +"_orderby('"+ sorting_fields[key].name +"','"+ sorting_fields[key].orderyby +"')\">"+ sorting_fields[key].description +"</a> <span class=\"sorting-indicator\"></span>";
}

原本才2行, 改寫完變成這麼多行, 程式是變複雜還是變簡單?

這個問題的答案, 要視使用情況而定, 如果你的使用情況只會使用一次, 就沒有簡化的需求, 但如果是需要被多次使用, 分析不同使用情境下的差異, 並把差異的地方變成參數化, 就可以讓每次的引用時, 更有效率.