Question

我希望得到一些关于如何编写javascript和jQuery代码更美观并获得更多可读性的建议。

在这种情况下，我希望在list元素中插入表。使用脚本将列表和表都添加为动态。

我有一些像这样的代码：

 $('#Items').append("<ul></ul>");
 var car_index;
 var photo_index;
 var lot_index;
 for (car_index = 0; car_index < cars.length; car_index++)
 {
   lot_index = car_index + 1;
   //From here, I thought the code is really ugly...though it works.
   //I can't image that I will need to adde 3 rows with 6 cols into the table by using this way
   //Also each col may has their own style need to be assigned....
   //Any advise??
   $('#Items ul').append("<li id='r_" + car_index +"'></li>");
   $('#r_' + car_index).append("<table cellspacing='2' cellpadding='0'><tr><td width='50' align='left' style='font-size:10pt; font-weight:bold'>Lot " + lot_index +"</td></tr></table>");               
  }

正如我在上面代码的评论中写的那样。我可以使用append方法并在其中放入大量HTML代码。然而，它看起来真的很丑......在上面的例子中，我只是在列表中添加了一行。在最终目标中，我必须添加三行，大约有6个单元格。每个单元格都将为内容设置自己的样式。这真是一团糟。

任何建议都将不胜感激！谢谢！

Answer 1

也许可以通过Mustache或jQuery使用模板。

查看更多：What Javascript Template Engines you recommend?

Answer 2

尝试这个，因为 $('#Items ul').append("<li id='r_" + car_index +"'></li>);未包含在“”

之间

$('#Items ul').append("<li id='r_"+car_index+"'></li>");
$('#r_' + car_index).append("<table cellspacing='2' cellpadding='0'><tr><td width='50' align='left' style='font-size:10pt; font-weight:bold'>Lot " + lot_index +"</td></tr></table>");               
  }

Answer 3

好吧......经过一番思考，我找到了一种能够更清晰地编写这种代码的方法。我不确定这是否是goog的选择，因为它需要更多的工作......但我觉得这样写是更好的。

这个想法非常简单，创建对象来存储将为每个块修复的HTML标记。作为我的例子，每次添加一个列表时都会重复一个表。那么为什么不将所有固定表标签及其样式属性存储到像object这样的数组中呢？

 var unit = 
 {
   table_header : "<table border = '1'>",
   row_1_col_1 : "<tr><td>Lot ",
   row_1_col_2 : "</td><td><a class='addto' href='#'>Add to like</a>",
   row_2_col_1 : "</td></tr><tr><td>",
   row_2_col_2 : "</td><td><img src='",
   row_3 : "'></td></tr><tr><td>",
   table_end : "</td></tr></table><hr />"       
 };

将此变量设为全局变量，而不是需要添加表时的原始代码：

 $('#r_' + car_index).append("<table cellspacing='2' cellpadding='0'><tr><td width='50' align='left' style='font-size:10pt; font-weight:bold'>Lot " + lot_index +"</td></tr></table>");

会变成这样：

 $('#r_' + car_index).append(unit['table_header'] +
                             unit['row_1_col_1'] + "Content in cell 1" +
                             unit['row_1_col_2'] + "Content in cell 2" +
                             unit['row_2_col_1'] + "Content in cell 3" +
                             unit['row_2_col_2'] + "Content in cell 4" +
                             unit['row_3'] + unit['table_end']);

请注意双引号和单引号，并且还需要引用数组的索引（如果遇到问题，请参阅javascript数组的详细信息）。

我认为这种方法的优点是更容易修改表格。添加行，更改内容或更改样式更容易，因为它使用单个对象。

我也不确定这是不是一个好方法，希望能听到更多关于你的想法！谢谢！

jQuery可读性：在<li>元素</li>中插入表

3 个答案: