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文件，其中包含模板编译的功能。另一个好处是您不需要在您的站点上包含完整的编译器。您只需要一个较小的运行时。

Answer 2

问题的最佳答案已经由Tommy Brunn提供，但是，如果您正在处理小型片段，则有一个解决方案。

var element = $("<a />", {"href": "http://www.example.com", "target": "_blank", "class": "example-class"}).html("example.com");

parent.append(element);

如果您需要创建具有大量动态属性且需要附加事件和其他交互的元素，那么它尤其有用。我发现它比文本字符串更清晰，然后在查找元素之后通过它们搜索（.find（））。

Answer 3

Angularjs还提供了一些很好的模板机制，如果您正在寻找替代方案。

Answer 4

使用模板文字

您的代码看起来像这样，它多次使用'+'并且看起来很丑。

var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."

如果我编写这样的代码

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

除支持模板文字的IE之外的所有最新浏览器

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

4 个答案:

使用模板文字