使用coffeescript/jQuery生成HTML比使用字符串更好

Better way to generate HTML using coffeescript / jQuery than using strings?

本文关键字：字符串 更好 HTML coffeescript jQuery 生成 使用      更新时间：2024-02-25

这是我第一次做"回答你自己的问题"的帖子，所以我希望我能正确地回答这个问题。

我的问题是，"有没有比使用标记字符串更好的方法用jQuery生成html？"

$("<form action='#{submitURL}' class='my_form'><input type='text'>...</form>")

而是使用嵌套的函数调用。我希望HTML生成代码看起来像这样：

$.el.form
    id: "enrollment_form"
    class: "myFormClass"
    action: "/do_form", method: "post"
    [
        $.el.input
            type: "text"
            name: "last_name"
            placeholder: "Last name"
        $.el.input
            type: "text"
            name: "first_name"
            placeholder: "First name"
        $.el.div
            class: "action"
            $.el.input
                type: "submit"
    ]

我创建了一个简单的jQuery扩展来实现这一点（我创建了"el"命名空间以避免冲突）。用法如下：

$.el.<html element name>(htmlAttributes, content)

其中内容可以是对$.el.的另一个调用，或者的一系列这样的调用

所以要创建这个：

<u><i>This is underlined italicized</i></u>

你会写：

$.el.u {},
    $.el.i {}, "This is underlined italicized"

创建这个：

<ul class="my_class">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>     
</ul>

你会写：

$.el.ul {class: "my_class"},
    [
        $.el.li {}, "First item"
        $.el.li {}, "Second item"
        $.el.li {}, "Third item"
    ]

这简化了HTML的生成，并消除了一堆混乱的字符串插值和串联。

jsFiddle在这里：https://jsfiddle.net/jplato/tv1Lqa52/8/我欢迎任何关于如何改进它的反馈。

如果您正在创建非常大的DOM元素，我绝对建议使用javascript模板（Handlebars是我最喜欢的）

如果您正在创建一小段DOM，那么有一种优雅的方法可以做到这一点。即将所有属性放入{}中。

类似：$（"tagName"，｛attr1:value1，attr2，value2…｝）；

例如，如果我们想创建一个简单的表单

<form action="google.com">
    <input type="text" value="hello" class="red-border">
    <button type="submit">click me</button>
</form>

使用此代码比将所有内容放入一个巨大的字符串更可读，也更容易将事件绑定到每个元素

var form = $("<form/>",{
        action: "google.com"
    });
var input = $("<input>",{
        type:"text", 
        value:"hello",
        class:"red-border"
    }).appendTo(form);
var button = $("<button/>",{
        text:"click me", 
        type:"submit",
        style:"font-size:20px"
    }).appendTo(form);
button.click(function(){
    alert("clicked");
})
form.appendTo($("#container"));

FIDDLE链接

在我看来，茶杯是最好的解决方案。您的第一个示例可能类似于（UNTESTED）：

render ->
  form '.my_form'
    action: submitURL
    ->
      input type: 'text', ->
        ...

你的第二个例子（再次，未测试）：

render ->
  form '#enrollment_form.myFormClass',
    action: '/do_form'
    method: 'post'
    ->
      input type: 'text', name: 'last_name', placeholder: 'Last name'
      input type: 'text', name: 'first_name', placeholder: 'First name'
      div '.action', ->
        input type: 'submit'

这看起来非常接近，如果不是比你的例子更干净的话。

相关文章：