javascript - 提高 javascript 函数的可读性和质量

标签 javascript jquery html

我有一个函数，它使用所有预合并表通用的值将多​​个 HTML 表合并到一个结果表中。

enter image description here

我现在正在寻求提高 JavaScript 函数的速度和可靠性。函数gatherData()循环遍历每个预合并表，并将数据分别放入每个表的对象结构中。函数results()循环遍历这些对象，并使用通用值(在本例中为日期)填充结果表。

这段代码是快速编写的，我知道它非常难看。 

$(document).ready(function(){
    gatherData();
    results();
});

function gatherData(){
    data = [];

    tables = $('.before').find('table');

    $(tables).each(function(index){
        table = [];

        var headers = $(this).find('tr:first');
        var headerText = [];
        headerText.push($(headers).find('td:nth-child(1)').text());     
        headerText.push($(headers).find('td:nth-child(2)').text());
        table.push(headerText)
        $(this).find('tr').each(function(index){
            var rowContent = [];
            if (index != 0){
                $(this).find('td').each(function(index){
                    rowContent.push($(this).text());
                })
            }
            table.push(rowContent)
        })
        data.push({table: table})
    });
}

function results(){
    var results = $('.after1').find('thead');

    $(results).append("<th>" + data[0].table[0][0] + "</th>");

    for (i in data){
        console.log(i)
        $(results).append("<th>" + data[i].table[0][1] + "</th>");
    }

    var b = data[i].table.length;
    var rowString = "";
    for (a = 2; a < b; a++){
        rowString = rowString + "<tr>";
        rowString = rowString + "<td>" + data[i].table[a][0] + "</td>"
        for (i in data){
            rowString = rowString + "<td>" + data[i].table[a][1] + "</td>"
        }
        rowString = rowString + "</tr>"
    }
    $('.after1').append(rowString)
}

对象的结构如下:

enter image description here

了解信息

每个表的实际数据从 data[i].table[2] 开始，其中日期为 data[i].table[2][0]该日期的值为 data[i].table[2][1] 。这就是为什么 a for 循环中的 var for (a = 2; a < data[i].table.length; a++)从 2 开始。

Here是我的 CodePen 的链接。

最佳答案

实际上，您的代码并没有真正按照人们期望的方式工作，而且它在某种程度上是非常硬编码的(连接键始终是第一列，并且只考虑前两列)。 This pen准确地显示了它如何无法提供人们期望的正确结果。

$(document).ready(function() {
  gatherData();
  results();
});

function gatherData() {
  data = [];

  tables = $('.before').find('table');

  $(tables).each(function(index) {
    table = [];

    var headers = $(this).find('tr:first');
    var headerText = [];
    headerText.push($(headers).find('td:nth-child(1)').text());
    headerText.push($(headers).find('td:nth-child(2)').text());
    table.push(headerText)
    $(this).find('tr').each(function(index) {
      var rowContent = [];
      if (index != 0) {
        $(this).find('td').each(function(index) {
          rowContent.push($(this).text());
        })
      }
      table.push(rowContent)
    })
    data.push({
      table: table
    })
  });
}

function results() {
  var results = $('.after1').find('thead');

  $(results).append("<th>" + data[0].table[0][0] + "</th>");

  for (i in data) {
    console.log(i)
    $(results).append("<th>" + data[i].table[0][1] + "</th>");
  }

  var b = data[i].table.length;
  var rowString = "";
  for (a = 2; a < b; a++) {
    rowString = rowString + "<tr>";
    rowString = rowString + "<td>" + data[i].table[a][0] + "</td>"
    for (i in data) {
      rowString = rowString + "<td>" + data[i].table[a][1] + "</td>"
    }
    rowString = rowString + "</tr>"
  }
  $('.after1').append(rowString)
}
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Formatter.js</title>

  <!-- Bootstrap core CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>


  <div class="container">
    <h1 class="page-header">Formatter.js <small>DPD reports</small></h1>
  </div>
  <div class="container before">
    <h3>Before</h3>
    <TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
      <TBODY>
        <TR>
          <TD>x-value</TD>
          <TD>La</TD>
        </TR>
        <TR>
          <TD>1</TD>
          <TD>a</TD>
        </TR>
        <TR>
          <TD>2</TD>
          <TD>b</TD>
        </TR>
      </TBODY>
    </TABLE>
    <TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
      <TBODY>
        <TR>
          <TD>x-value</TD>
          <TD>Lx</TD>
          <TD>Lxx</TD>
        </TR>
        <TR>
          <TD>1</TD>
          <TD>x</TD>
          <TD>xx</TD>
        </TR>
        <TR>
          <TD>3</TD>
          <TD>y</TD>
          <TD>yy</TD>
        </TR>
      </TBODY>
    </TABLE>
    <TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
      <TBODY>
        <TR>
          <TD>Random</TD>
          <TD>Lz</TD>
          <TD>Lzz</TD>
        </TR>
        <TR>
          <TD>1</TD>
          <TD>z</TD>
          <TD>zz</TD>
        </TR>
        <TR>
          <TD>2</TD>
          <TD>t</TD>
          <TD>tt</TD>
        </TR>
      </TBODY>
    </TABLE>
    <hr>
  </div>
  <div class="container after">
    <h3>After</h3>
    <table class="table after1">
      <thead>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="formatter4.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

总结一下表格:

x-value | La    x-value | Lx | Lxx    Random | Lz | Lzz
--------+----   --------+----+-----   -------+----+-----
1       | a     1       | x  | xx     1      | z  | zz
2       | b     3       | y  | yy     2      | t  | tt

Most people would expect the following result (with or without line 2 and/or 3, depending on what you actually want to do with the data):

x-value | La | Lx | Lxx 
--------+----+----+-----
1       | a  | x  | xx  
2       | b  |    |     
3       |    | y  | yy

Your code mixes the tables (just concatenates them, without regard for the actual column header (if it's x-value or not), without regard for the actual value that the tables are joined on (just the position of the row in the table, so row 1 will be concatenated with row 2 no matter what), and it ignores all columns other than the first two, producing the following result:

x-value | La | Lx | Lz 
--------+----+----+----
1       | a  | x  | z  
2       | b  | y  | t

As I felt like trying my hand at it, this pen contains a much more complete solution.

$(document).ready(function(){
	createResultsTable($('.after1'), gatherData($('.before').find('table'), 'x-value'), sortDatesDescending);
});

function sortDatesDescending(keys) {
  function getDate(dateStr) {
    var date = dateStr.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
    return new Date(date[3], date[2], date[1]);
  }
  return keys.sort(function (key1, key2) { key1 = getDate(key1); key2 = getDate(key2); return key1 < key2 ? 1 : key1 == key2 ? 0 : -1; });
}

function gatherData(tables, joinColumn){
	var data = {};
  var dataHeaders = [];

	tables.each(function(index) {
    var table = $(this);
		var headerText = [];
    
    var joinColumnIndex = -1;
    table.find('tr:first').find('td').each(function(index, header) {
      header = header.innerText;
      if (header === joinColumn) joinColumnIndex = index;
      headerText.push(header);
    });
    if (joinColumnIndex < 0) return;
    
		table.find('tr').each(function(index){
      if (index === 0) return;
			var rowContent = [];
      $(this).find('td').each(function(index){
        rowContent.push(this.innerText);
      });
		  data[rowContent[joinColumnIndex]] = data[rowContent[joinColumnIndex]] || [];
      data[rowContent[joinColumnIndex]].push(rowContent);
		})
    dataHeaders.push(headerText);
	});
  console.log(data, dataHeaders);// here goes
  return {data: data, headers: dataHeaders, joinColumn: joinColumn};
}

function createResultsTable(resultsTable, data, orderFunction) {
  var resultsHead = '<thead><th>'+data.joinColumn+'</th>';
  var resultsBody = '<tbody>';
  data.headers.forEach(function (headers) {
    headers.forEach(function (header) {
      if (header !== data.joinColumn) resultsHead += '<th>'+header+'</th>';
    });
  });
  resultsHead += '</thead>';
  (orderFunction ? orderFunction(Object.keys(data.data)) : Object.keys(data.data))
    .forEach(function (joinValue) {
    resultsBody += '<tr><td>'+joinValue+'</td>';
    data.data[joinValue].forEach(function (subData, tableIndex) {
      data.headers[tableIndex].forEach(function (header, index) {
        if (header === data.joinColumn) return;
        resultsBody += '<td>'+subData[index]+'</td>';
      })
    });
    resultsBody += '</tr>';
  });
  resultsBody += '</tbody>';
  resultsTable.html(resultsHead+resultsBody);
}
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Formatter.js</title>

  <!-- Bootstrap core CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>


  <div class="container">
    <h1 class="page-header">Formatter.js <small>DPD reports</small></h1>
  </div>
  <div class="container before">
    <h3>Before</h3>
    <TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
      <TBODY>
        <TR>
          <TD>x-value</TD>
          <TD>Operational Planned</TD>
          <td>Extra data</td>
        </TR>
        <TR>
          <TD>09/11/2015</TD>
          <TD>0</TD>
          <TD>extra1</TD>
        </TR>
        <TR>
          <TD>10/11/2015</TD>
          <TD>0</TD>
          <TD>extra2</TD>
        </TR>
        <TR>
          <TD>11/11/2015</TD>
          <TD>66358</TD>
          <TD>extra3</TD>
        </TR>
        <TR>
          <TD>12/11/2015</TD>
          <TD>65990</TD>
          <TD>extra4</TD>
        </TR>
        <TR>
          <TD>13/11/2015</TD>
          <TD>55993</TD>
          <TD>extra5</TD>
        </TR>
        <TR>
          <TD>14/11/2015</TD>
          <TD>0</TD>
          <TD>extra6</TD>
        </TR>
        <TR>
          <TD>15/11/2015</TD>
          <TD>0</TD>
          <TD>extra7</TD>
        </TR>
      </TBODY>
    </TABLE>
    <TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
      <TBODY>
        <TR>
          <TD>x-value</TD>
          <TD>Actual</TD>
        </TR>
        <TR>
          <TD>09/11/2015</TD>
          <TD>0</TD>
        </TR>
        <TR>
          <TD>10/11/2015</TD>
          <TD>0</TD>
        </TR>
        <TR>
          <TD>11/11/2015</TD>
          <TD>62202</TD>
        </TR>
        <TR>
          <TD>12/11/2015</TD>
          <TD>59261</TD>
        </TR>
        <TR>
          <TD>13/11/2015</TD>
          <TD>49119</TD>
        </TR>
        <TR>
          <TD>14/11/2015</TD>
          <TD>0</TD>
        </TR>
        <TR>
          <TD>15/11/2015</TD>
          <TD>0</TD>
        </TR>
      </TBODY>
    </TABLE>
    <TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
      <TBODY>
        <TR>
          <TD>not the x-value</TD>
          <TD>something</TD>
        </TR>
        <TR>
          <TD>09/11/2015</TD>
          <TD>0</TD>
        </TR>
        <TR>
          <TD>10/11/2015</TD>
          <TD>0</TD>
        </TR>
        <TR>
          <TD>11/11/2015</TD>
          <TD>62202</TD>
        </TR>
        <TR>
          <TD>12/11/2015</TD>
          <TD>59261</TD>
        </TR>
        <TR>
          <TD>13/11/2015</TD>
          <TD>49119</TD>
        </TR>
        <TR>
          <TD>14/11/2015</TD>
          <TD>0</TD>
        </TR>
        <TR>
          <TD>15/11/2015</TD>
          <TD>0</TD>
        </TR>
      </TBODY>
    </TABLE>
    <TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
      <TBODY>
        <TR>
          <TD>x-value</TD>
          <TD>Financial Plan</TD>
        </TR>
        <TR>
          <TD>09/11/2015</TD>
          <TD>0</TD>
        </TR>
        <TR>
          <TD>10/11/2015</TD>
          <TD>0</TD>
        </TR>
        <TR>
          <TD>11/11/2015</TD>
          <TD>0</TD>
        </TR>
        <TR>
          <TD>12/11/2015</TD>
          <TD>890</TD>
        </TR>
        <TR>
          <TD>13/11/2015</TD>
          <TD>0</TD>
        </TR>
        <TR>
          <TD>14/11/2015</TD>
          <TD>3562</TD>
        </TR>
        <TR>
          <TD>15/11/2015</TD>
          <TD>7821</TD>
        </TR>
      </TBODY>
    </TABLE>
    <table border=1 cellspacing=0 cellpadding=0 alignment="">
      <tr>
        <td>Additional info</td><td>x-value</td>
      </tr>
      <tr>
        <td>marked</td><td>11/11/2015</td>
      </tr>
      <tr>
        <td>important</td><td>09/11/2015</td>
      </tr>
    </table>      
    <hr>
  </div>
  <div class="container after">
    <h3>After</h3>
    <table class="table after1">
      <thead>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  <script src="formatter4.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>

</html>

这段代码:

  • 允许连接具有任意数量列的表
  • 将列上的数据与函数参数中指定的列名称进行匹配
  • 允许连接列位于表中的任何位置(可以是第一列、第二列或实际正确命名的列)
  • 忽略没有指定连接列的表
  • 更通用，允许您传入一个数组，其中哪些表是输入，哪些表是输出
  • 此外，它还允许您在结果数组的键上定义排序/过滤函数(注意，您无法更改它们的实际值，只能对它们进行排序和过滤)。如果您不需要该功能，请忽略该参数

希望它能有所帮助，这是一个有趣的项目。 :)

关于javascript - 提高 javascript 函数的可读性和质量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34221656/

上一篇：javascript - 根据数组索引对查询结果进行排序

下一篇：javascript - SonarQube 无法解析带有 JSP 文件的内联 JavaScript

相关文章：

javascript - 在弹出窗口中获取 php 中相应行的值

html - Cocoa HTTP POST 请求 [Mac OS X]

css - 另一个 div 中的 div 框

html - 图像上的渐变和文字

javascript - 返回字符串值

javascript - 如何使用php在不同文件夹中上传不同大小的相同文件？

JavaScript；变量函数返回，写入HTML

javascript - 如何使用 javascript 或 jquery 检查命名窗口是否存在

javascript - 将相关元素嵌套在一起父/子

javascript - jquery 根据自定义函数返回 true 或 false

©2024 IT工具网  联系我们