论坛 › Web开发 › 优化重复代码 | 【有奖问答】

不二如是 发表于 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;
                var y = b;
                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><b class="roleNum">${infoIndex + 1}</b></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;
                var y = b;
                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><b class="roleNum">${infoIndex + 1}</b></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;
                var y = b;
                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><b class="roleNum">${infoIndex + 1}</b></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;
                var y = b;
                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><b class="roleNum">${infoIndex + 1}</b></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

好~~~~~~长.................{:10_284:}

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;
                var y = b;
                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><b class="roleNum">${infoIndex + 1}</b></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

太————————————————————长————————————————————了————————————————————
{:10_266:}

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

有点长啊
{:10_277:}

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

好长。。。

查看完整版本: 优化重复代码 | 【有奖问答】