Javascript字符串连接的替代方法？

Question

我们的网页应用登录页面目前使用javascript字符串连接来生成标记:

var signinHtml='<div>'+
    '    <form class="form-signin" method="post">'+
    '        <div class="form-signin-app-icon"></div>'+
    '        <h2 class="form-signin-heading">'+appName+'</h2> '+
    '        <h4 class="form-signin-heading-sub">'+appMotto+'</h4>'+
    '        <div class="form-signin-input">'+
    '            <input id="username" type="text" name="username" class="input-block-level" placeholder="Username"></input>'+
    '        </div>'+
    '        <div class="form-signin-input">'+
    '            <input type="password" name="password" id="password" class="input-block-level" placeholder="Password"></input>'+
    '        </div>'+
    '        <button class="btn btn-small btn-inverse form-signin-button" type="submit" id="signin">Sign in</button>'+
    '    </form>'+
    '</div>';       

    $(self).html(signinHtml);

这种方法有效但很容易出错,并且可能不是最好的方法.根据我的阅读,数组在性能方面更有效,但在可读性方面更差.任何人都可以推荐更清洁/更好的选择？

Answer 1

我建议查找模板引擎,例如Mustache或Handlebars.

这些将允许您以简单的语言定义标记,然后由模板编译器对其进行解析,以便它们在您的Javascript中可用,这样您所要做的就是传入数据并获取HTML.

编辑:这是如何使用Handlebars的一个例子(我使用它,因为它是我最后使用的,但无论你使用什么,概念是相同的).

首先,您创建一个模板.模板只是您的HTML,但您使用令牌表示您的数据.它可能看起来像这样:

<div>
    <h1>My name is {{ name }}</h1>
    <p>Here's some information about me: {{ about }}</p>
</div>

必须在您的Javascript中以某种方式访问​​该模板.最简单的方法是将其放在具有特定类型的脚本标记中:

<script id="my-template" type="text/x-handlebars-template">OUR TEMPLATE GOES HERE</script>

然后我们必须编译模板.这意味着模板引擎采用我们创建的类似HTML的文本,解析并将其转换为javascript函数.在把手中,这样做:

var template = Handlebars.compile($('#my-template').html());

(注意,在这个例子中,我使用jQuery来获取脚本标记的内容)

template现在是一个Javascript函数,如果我提供我们需要的数据(name和about),它将返回HTML .所以我们这样做:

var data = {name: 'Tommy Brunn', about: 'I like cats and Belgian beer'};
var output = template(data);

output 现在将包含我们模板中的HTML,但代码替换为我的数据:

 <div>
    <h1>My name is Tommy Brunn</h1>
    <p>Here's some information about me: I like cats and Belgian beer</p>
</div>

这只是模板的最简单示例.一些模板语言允许您执行诸如循环列表,修改变量(例如,大写)或执行选择("如果name长度超过5个字母,反转它")等操作.

在此示例中,模板的编译在客户端完成.在大多数情况下这很好,但是如果你需要额外的性能,你可能想在服务器端进行编译.大多数(可能是全部？)模板引擎为您提供了一种在构建过程中执行此操作的方法.你最终得到的是一个Javascript文件,其中包含模板编译的功能.另一个好处是您不需要在您的站点上包含完整的编译器.您只需要一个较小的运行时.