Question

前端工作不多，想知道我做的是否正确我创建了一个显示数据的html表我添加了按钮和复选框以在结构上修改表格，即添加一行执行此操作的代码是一大段代码，其执行的操作如下：

var table = document.getElementById('table');  
table.insertRow(1);  

var id_td = document.createElement('td');  
//create options element  
id_td.appendChild(options);  

var name_td  = document.createElement('td');  
//create input textbox  
name_td.appendChild(txt_box);   

etc etc

所以我不喜欢这样一个事实：它是一个真正重大的基本上重复的代码来创建元素我想知道，我是否走在正确的轨道上？这是唯一的方法，除非我们使用像JQuery这样的库吗？

Answer 1

VanillaJS方法

您可以使用类似

的内容

var table = document.getElementById('table');  
table.innerHTML = "<tr><td id="+id+"></td><td class="name"></tr>";

将标记添加为字符串，最终可能会更清晰。很难准确地说出你没有看到自己如何重复自己，但你可以将它抽象成一个函数

库

虽然有很多图书馆可以抽象出这种丑陋。 jQuery是一个，但像knockoutjs这样的东西可能更适合你。

它允许您定义数据模型并使用自动更新将html模板绑定到该数据模型。因此，您可以将数据定义为JSON对象，并将其反映在DOM中，将来的更新只需触及视图模型对象，而不必处理DOM函数。

Answer 2

我不喜欢这样一个事实：它是一个真正大块的基本上重复的代码来创建元素

为什么不为冗长的函数名创建别名？

var gid = function (id) {return document.getElementById(id);}, // so short!
    ce = function (e) {return document.createElement(e)}, // ce(tag) is easy!
    td = function () {return ce('td');}, // td() now makes a new `<td>`
    ap = function (p, c) {return p.appendChild(c), p;}; // return more useful

现在“大块”是

var table = gid('table'),
    row = table.insertRow(1);

var id_td = td(), options = ce('select');
ap(id_td, options);

var name_td  = td(), txt_box = ce('textarea');
ap(name_td, txt_box);

// etc etc

可以在javascript中避免这个大块代码吗？

2 个答案:

VanillaJS方法

库