jQuery可读性：在其中插入表 <li> 元件

Question

我希望获得一些有关如何更漂亮地编写javascript和jQuery代码并提高可读性的建议。

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

我有一些这样的代码：

 $('#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使用模板。

查看更多： 您推荐哪种Javascript模板引擎？

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

好吧...经过一番思考，我发现编写这种代码的方法会更加清晰。 我不确定这是否是最好的选择，因为这将需要更多的工作...但是我觉得最好用这种方式编写。

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

 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数组的使用以获取详细信息）。

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

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