我目前正在创建一个网站，其中包含大量不同类型字段的表单，我想知道其他人如何将“构造函数”代码的数量保持在最低限度并且可以重复使用。
以下是我当前代码的一些示例：
function editForm () {
function saveButton () {
return $('<tr/>')
.append(
$('<th/>')
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("new-button")
.addClass("submit-button")
.attr("type", "button")
.attr("value", "Save")
)
.append(" or ")
.append(
$('<a/>')
.attr("href", "#")
.text("Cancel")
)
);
};
this.section = function () {
return $('<form/>')
.attr("action", "#")
.attr("method", "GET")
.append(
$('<table/>')
.append(
$('<tbody/>')
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "title")
.text("Title")
)
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("title")
.addClass("text")
.attr("name", "title")
.attr("value", title)
.attr("type", "text")
.attr("required", "true")
)
)
)
.append(
saveButton()
)
)
);
};
this.menuItem = function () {
return $('<form/>')
.attr("action", "#")
.attr("method", "GET")
.append(
$('<table/>')
.append(
$('<tbody/>')
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "name")
.text("Item Name")
)
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("name")
.addClass("text")
.attr("name", "name")
.attr("value", menu_item.name)
.attr("type", "text")
.attr("required", "true")
)
)
)
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "price")
.text("Price")
)
)
.append(
$('<td/>')
.append(
$('<input/>')
.addClass("price")
.addClass("text")
.attr("name", "price")
.attr("value", menu_item.price)
.attr("type", "text")
.attr("required", "true")
)
)
)
.append(
$('<tr/>')
.append(
$('<th/>')
.append(
$('<label/>')
.attr("for", "description")
.text("Description")
)
)
.append(
$('<td/>')
.append(
$('<textarea/>')
.addClass("description")
.addClass("text")
.attr("name", "description")
.attr("required", "false")
.attr("rows", "2")
.attr("cols", "50")
.text(menu_item.description)
)
)
)
.append(
saveButton()
)
)
);
};
return this;
};
以下是关于我目前正在做什么以及我想要实现的目标的更多信息：
我网站上的表单是我使用表格布局设置的唯一对象，因此我可以将表单标签与输入字段对齐。根据我的理解，标签和字段之间的这个装订线是使表单更易于用户浏览的最佳方式。我愿意接受有关如何以其他方式实现同样效果的建议，特别是如果可能的话，不使用表格。
我的javascript目前使用JQuery选择器逐元素地构建这些表单，以创建元素$("<element/>")，然后使用.append()等javascript函数将它们链接在一起。
因为我正在使用表格布局构建表单，这意味着在创建基本行结构时会有很多重复的代码：
<tr>
<th>
<label for="fieldname">Field</label>
</th>
<td>
<input name="fieldname" type="text">
</td>
</tr>
由于这种方法，您可以在上面的代码中看到很多重复，直觉上我认为我应该能够消除并且可能创建一个我可以在站点范围内使用的表单构建器。
在上面的代码中，我重复了许多元素，如,,,等等。
我希望能够以更加简洁的格式创建表单，如下所示：
menu_item = {
name: "",
price: "",
description: ""
}
createForm()
.addField(menu_item.name, "Nome", "text-input", required)
.addField(menu_item.price, "Preço", "text-input", required)
.addField(menu_item.description, "Descrição", "textarea")
.addField("Salvar item", "submit-button");
或者更好，就像这样：
createForm()
.addField({
value: menu_item.name,
label_text: "Nome",
input_type: "text-input",
required: true })
.addField({
value: menu_item.price,
label_text: "Preço",
input_type: "text-input",
required: true })
.addField({
value: menu_item.description,
label_text: "Descrição",
input_type: "textarea" })
.addField({
value: "Salvar item",
input_type: "submit-button" });
其中addField函数具有可以为字段命名的格式，定义向用户显示的标签（最初将是葡萄牙语，但我们希望将来使用多语言）以及输入元素和选项的类型对于那个输入元素，例如required =“true”或placeholder =“ie Cereal，Waffles，Toast等。”
任何人对如何解决这个问题或任何生产就绪的JQuery插件（即目前维护的插件而不仅仅是实验或放弃软件）有任何建议我应该考虑帮助我解决这类问题？
答案 0 :(得分：0)
我已成功使用trimpath [1]，一个javascript模板引擎。应该带你去那里。
[1] http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
编辑：一些额外的信息：它维护得非常快，并且定义了最低限度，你可以将胶水包裹起来。
另一个编辑：对于更多javascript模板库，请看这里：