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。

編輯：如何與把手一起使用的示例（我正在使用它，因為這是我上次使用的東西，但是無論使用什么概念，它們都是相同的）。

首先，您創建一個模板。 該模板只是您的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來獲取script標簽的內容）

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." 

除Safari和IE支持模板文字外的所有最新瀏覽器