优化重复代码 | 【有奖问答】

不二如是 · 发表于 2017-8-30 10:45:22

本帖最后由不二如是于 2017-8-30 10:48 编辑

这是一段“重复性”很高的代码

哪位鱼油可以通过封装函数对下面的代码优化呢？

友情提示：

1、4个不同的id，jsonTip1、jsonTip2、jsonTip3、jsonTip4

2、调用方法均一样，除了参数col索引不一样，方法均相同

3、4个方法，appendD1（）、appendD2（）、appendD3（）、appendD4（）

function appendD1() {
$.getJSON("js/data.json", function (data) {
var $jsontip = $("#jsonTip1");
function sortByKey(array, key) {
return array.sort(function (a, b) {
var x = a[key];
var y = b[key];
return ((x > y) ? -1 : ((x < y) ? 1 : 0));
});
}
var newdata = $.extend({}, data.data);
newdata.rows = [];
$.each(data.data.rows, function (i, r) {
var item = {};
$.each(r.cells, function (j, c) {
item["col" + j] = c;
})
newdata.rows.push(item);
})
newdata = sortByKey(newdata.rows, 'col1');
// 绘制
var strHtml = "";//存储数据的变量
$jsontip.empty();//清空内容
$.each(newdata, function (infoIndex, info) {
strHtml += `
<tr>
<td>${infoIndex + 1}</td>
<td>${info["col0"]}</td>
<td>${info["col1"]}</td>
</tr>
`;
})
$jsontip.html(strHtml);//显示处理后的数据
// 前十个tr中，第一个td中的b，设置背景样式。
$.each($('#div1 tr').slice(1, 11), function (i, item) {
$(item).children('td').eq(0).children('b').css("background-color", "#3590de");
});
$.each($('#div1 tr').slice(1, 7), function (i, item) {
$(item).children('td').eq(1).css("color", "#0002c0");
});
})
}
function appendD2() {
$.getJSON("js/data.json", function (data) {
var $jsontip = $("#jsonTip2");
// 排序测试
function sortByKey(array, key) {
return array.sort(function (a, b) {
var x = a[key];
var y = b[key];
return ((x > y) ? -1 : ((x < y) ? 1 : 0));
});
}
var newdata = $.extend({}, data.data);
newdata.rows = [];
$.each(data.data.rows, function (i, r) {
var item = {};
$.each(r.cells, function (j, c) {
item["col" + j] = c;
})
newdata.rows.push(item);
})
newdata = sortByKey(newdata.rows, 'col2');
// 绘制
var strHtml = "";//存储数据的变量
$jsontip.empty();//清空内容
$.each(newdata, function (infoIndex, info) {
strHtml += `
<tr>
<td>${infoIndex + 1}</td>
<td>${info["col0"]}</td>
<td>${info["col2"]}</td>
</tr>
`;
})
$jsontip.html(strHtml);//显示处理后的数据
$.each($('#div2 tr').slice(1, 5), function (i, item) {
$(item).children('td').eq(0).children('b').css("background-color", "#3590de");
});
$.each($('#div2 tr').slice(1, 3), function (i, item) {
$(item).children('td').eq(1).css("color", "#0002c0");
});
})
}
function appendD3() {
$.getJSON("js/data.json", function (data) {
var $jsontip = $("#jsonTip3");
// 排序测试
function sortByKey(array, key) {
return array.sort(function (a, b) {
var x = a[key];
var y = b[key];
return ((x > y) ? -1 : ((x < y) ? 1 : 0));
});
}
var newdata = $.extend({}, data.data);
newdata.rows = [];
$.each(data.data.rows, function (i, r) {
var item = {};
$.each(r.cells, function (j, c) {
item["col" + j] = c;
})
newdata.rows.push(item);
})
newdata = sortByKey(newdata.rows, 'col3');
// 绘制
var strHtml = "";//存储数据的变量
$jsontip.empty();//清空内容
$.each(newdata, function (infoIndex, info) {
strHtml += `
<tr>
<td>${infoIndex + 1}</td>
<td>${info["col0"]}</td>
<td>${info["col3"]}</td>
</tr>
`;
})
$jsontip.html(strHtml);//显示处理后的数据
$.each($('#div3 tr').slice(1, 8), function (i, item) {
$(item).children('td').eq(0).children('b').css("background-color", "#3590de");
});
$.each($('#div3 tr').slice(1, 5), function (i, item) {
$(item).children('td').eq(1).css("color", "#0002c0");
});
})
}
function appendD4() {
$.getJSON("js/data.json", function (data) {
var $jsontip = $("#jsonTip4");
// 排序测试
function sortByKey(array, key) {
return array.sort(function (a, b) {
var x = a[key];
var y = b[key];
return ((x > y) ? -1 : ((x < y) ? 1 : 0));
});
}
var newdata = $.extend({}, data.data);
newdata.rows = [];
$.each(data.data.rows, function (i, r) {
var item = {};
$.each(r.cells, function (j, c) {
item["col" + j] = c;
})
newdata.rows.push(item);
})
newdata = sortByKey(newdata.rows, 'col4');
// 绘制
var strHtml = "";//存储数据的变量
$jsontip.empty();//清空内容
$.each(newdata, function (infoIndex, info) {
strHtml += `
<tr>
<td>${infoIndex + 1}</td>
<td>${info["col0"]}</td>
<td>${info["col4"]}</td>
</tr>
`;
})
$jsontip.html(strHtml);//显示处理后的数据
$.each($('#div4 tr').slice(1, 9), function (i, item) {
$(item).children('td').eq(0).children('b').css("background-color", "#3590de");
});
$.each($('#div4 tr').slice(1, 6), function (i, item) {
$(item).children('td').eq(1).css("color", "#0002c0");
});
})
}

复制代码

wongyusing · 发表于 2018-9-5 19:25:53

能给一份json文件，让我看看。主要是测试一下到底要生成什么内容。
我在python经常写通用性很高的代码。js也想试试

凌乱大帅比 · 发表于 2018-9-19 11:45:49

好~~~~~~长.................

waitforlove · 发表于 2018-9-25 12:24:47

appendmy(1,11,7);
appendmy(2,5,3);
appendmy(3,8,5);
appendmy(4,9,6);
function appendmy(n,m,k) {
$.getJSON("js/data.json", function (data) {
var $jsontip = $("#jsonTip"+n);
function sortByKey(array, key) {
return array.sort(function (a, b) {
var x = a[key];
var y = b[key];
return ((x > y) ? -1 : ((x < y) ? 1 : 0));
});
}
var newdata = $.extend({}, data.data);
newdata.rows = [];
$.each(data.data.rows, function (i, r) {
var item = {};
$.each(r.cells, function (j, c) {
item["col" + j] = c;
})
newdata.rows.push(item);
})
newdata = sortByKey(newdata.rows, 'col'+n);
// 绘制
var strHtml = "";//存储数据的变量
$jsontip.empty();//清空内容
$.each(newdata, function (infoIndex, info) {
strHtml +='\
<tr>\
<td>${infoIndex + 1}</td>\
<td>${info["col0"]}</td>\
<td>${info["col"+'+n+']}</td></tr>\
';
})
$jsontip.html(strHtml);//显示处理后的数据
// 前十个tr中，第一个td中的b，设置背景样式。
$.each($('#div'+n+'tr').slice(1, m), function (i, item) {
$(item).children('td').eq(0).children('b').css("background-color", "#3590de");
});
$.each($('#div'+n+'tr').slice(1, k), function (i, item) {
$(item).children('td').eq(1).css("color", "#0002c0");
});
})
}

复制代码

一个账号 · 发表于 2019-9-15 14:19:15

太————————————————————长————————————————————了————————————————————

weiter · 发表于 2020-1-21 20:10:13

有点长啊

bangbang-ande · 发表于 2020-8-21 08:57:51

好长。。。

账号		自动登录	找回密码
密码			立即注册

[技术交流] 优化重复代码 | 【有奖问答】