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

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

转载作者：行者123 更新时间：2023-11-27 23:34:40

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

我现在正在寻求提高 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)
}

对象的结构如下:

了解信息

每个表的实际数据从 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  | zz2       | 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 - SonarQube 无法解析带有 JSP 文件的内联 JavaScript

文章推荐： HTML/CSS 媒体查询

文章推荐： c++ - 浅拷贝共享指针吗？ (C++)

video - ffmpeg中的透视过滤器 - 质量
我使用透视滤镜在视频上放了一张图片。示例 https://yadi.sk/i/MXtWUArJ3TyWBm 我怎样才能提高质量？代码 ffmpeg -y -i bg.mp4 -loop 1 -i
Matlab imwrite() 质量
我是 Matlab 的新手，虽然我知道一些其他的编程语言，所以如果这很简单，请原谅我。我无法在 StackOverflow 或其他地方找到任何答案。我使用以下代码生成一个图形: figure(6)
Matlab imwrite() 质量
我是 Matlab 的新手，虽然我知道一些其他的编程语言，所以如果这很简单，请原谅我。我无法在 StackOverflow 或其他地方找到任何答案。我使用以下代码生成一个图形: figure(6)
C++ 质量-#include
在包含另一个类时，我总是需要写#include "headername.h"。是否可以在不编写其他类或使用“#include”包含多个类的情况下访问其他类？最佳答案什么 #include指令的作用
video - 加速视频时提高 webm 质量
我有一个 .webm我想加速以延时拍摄的视频。我的原创.webm视频是 1280x720 并且质量非常好，但是当我用 FFMPEG 加速它时质量真的很差(即使分辨率保持不变)。这是我正在使用的命令:
ImageMagick JPEG 质量/大小
我正在使用以下命令生成缩略图: mogrify -resize 128x128 -quality 75 "some thumb file" 对于示例文件: 如果我不指定质量 75，我会得到一个 40K
Modelica 质量/能量/动量平衡
我想使用流体库的模型。谁能解释一下(我是建模/模拟的新手):质量/能量/动量平衡的公式:稳态、动态和初始猜测初始固定-->之间有什么区别以及对初始化时间/计算的影响是什么时间;我什么时候需要哪一个。
Youtube 流 fmt_stream_map 质量
我通过解析“fmt 流映射”得到流 URL，问题是如果我的视频时长不到 1 小时，我会得到这个: { "comment_count" = 1; description = ""; "dislikes
javascript - 根据屏幕分辨率加载不同的视频(html5)质量
我试图根据用户的屏幕高度分辨率显示不同的视频分辨率，我有这段代码，但我不是 javascript 专家。它应该改变 src 属性，如果 res 低于 o 等于 360px 高度，等等。有什么建议吗？
android - ExoPlayer Hls 质量
我有播放 HLS 视频的 ExoPlayer，问题是我需要让用户能够更改视频质量(自动/1080/720/480)。我发现使用 AdaptiveTrackSelection.Factory 确实可以
mysql - 上传图像的 javafx 质量
我的应用程序使用 phpmyadmin 连接到 mysql 中的数据库并将图像存储在数据库中，但我的问题是当我从数据库下载图像并将图像发布到 imageview 上时，图像的质量非常低颜色也受到影响。
JavaFx 场景生成器 ImageView 质量
大家好，我一直在使用 JavaFx 场景构建器来构建一个包含一些 png 图片的图形用户界面。到目前为止，我一直在使用标签，然后将它们放大以适合图片(以便图片可见。但是这个解决方案并不令人满意，因为
css - 使用比容器更大的图像以获得更好的 css 质量
我注意到，在显示比例为 1:1 的小图片时，它们通常看起来呈 block 状。我可以在使用时解决问题通过使用更大比例的图像并使用 css 设置所需的大小来标记。但是，我想用 background
javascript - 自定义 CSS(质量)
我是自定义 CSS 的新手。我的老板希望我在 Qualtrics 中添加自定义 CSS(在外观/高级下)。在编辑预览窗口中，一切似乎都格式正确，但在实际调查页面上，许多元素的格式并未应用:图像是原始大
c++ - CreateFont API 质量
所以我尝试使用 CreateFont 尝试创建一种类似于我在 Photoshop 中使用的字体，但如果你仔细观察，Photoshop 中的质量要好得多。这是我用来创建字体的代码: CreateFon
opencv - 提高低质量扫描图像的 OCR 质量
在自动去歪斜和裁剪之后我得到了下面的图像: 我需要对这张图片进行 OCR。现在 ABBYY Engine SDK 11 For Linux 产生的结果不是很好: IMerasers - www,rai
algorithm - 不一次使用所有位时的 PRNG 质量
我目前在我的项目中使用 xorshift128+，我知道它通过了 Big Crush，并且被认为可以根据其速度生成相当高质量的随机数。但是，它会生成 64 位数字，而我需要的绝大多数随机数都是小整数(
Python PIL jpeg 质量
我使用 python 以较小的质量保存 jpeg im = Image.open(file) im.save(cached_file, quality=80, optimize=True, progr
php Gmagick 保存 jpeg 质量
我在保存或使用 Gmagick PHP 扩展时找不到任何属性。 http://php.net/manual/en/book.gmagick.php 如何在 Gmagick 中更改 JPEG 质量？最
.net - 使用youtube API检索youtube视频的视频分辨率(质量)是多少？
youtube视频通常具有多种视频分辨率(质量)，例如240p，360p，720p等，我如何检索youtube视频具有的视频分辨率(质量)是否有可以获取此信息的youtube api？Google.A

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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