摘要：更好的方案模板分離原則模板分離原則將定義模板的那一部分，與的代碼邏輯分離開來，讓代碼更加優(yōu)雅且利于維護。

在前端開發(fā)中，經(jīng)常需要動態(tài)添加一些元素到頁面上。那么如何通過一些技巧，優(yōu)化動態(tài)創(chuàng)建頁面元素的方式，使得代碼更加優(yōu)雅，并且更易于維護呢？接下來我們通過研究一些實例，一步步地找出最優(yōu)方案。

這篇文章盡量寫得思路清晰且通俗易懂，由淺入深為剛入門前端的新手們帶來一些思路和啟發(fā)。

老手們也可以順著看下去，當做復習一次。亦或者直接跳到后半部分，去看稍微深入一點的模板數(shù)據(jù)替換示例，一起交流交流哦。

由于DOM和HTML會存在一定的歧義，所以為了區(qū)別開來，文章中這兩個術語的意思分別是：

DOM ：專指文檔對象，是在JS上以對象的形式存在的。

HTML：專指HTML文本，是一連串字符的集合。

話不多說，我們先來思考一下最基本的問題，如何用JS動態(tài)添加元素到頁面中去呢？

假設在點擊“添加一個乘客”按鈕的時候，需要JS動態(tài)創(chuàng)建出一個新的輸入框來填寫姓名：

乘客列表：

    

        乘客姓名：
    
    添加一個乘客
    保存

從上面可以看出，要實現(xiàn)這個功能，我們需要處理的HTML片段是：

    乘客姓名：

那么我們先來看看傳統(tǒng)的做法是這樣子的：

先直接手動復制粘貼HTML拼接成JS字符串，然后再插入到表單中。

$(".create-passenger").on("click", function() {
    
    // 先直接手動復制粘貼HTML拼接成JS字符串
    var html = 
        "
" +
        "    乘客姓名：" +
        "
";
    // 然后再插入到表單中
    $(".form").append(html);
});

這是種偷懶的實現(xiàn)方式，在部分中小型網(wǎng)站、教科書上，最常見到它的身影。

在開發(fā)時的時候，某些情況下使用這種方案，的確可能會比較快速，直接復制粘貼HTML拼成JS字符串就可以了。

但滿足這樣的條件必須是：

要拼接的HTML字符串很短；

頁面結構已經(jīng)很穩(wěn)定，能保證以后不會需要作出修改；

頁面HMTL和JS的代碼量都不多，或者已經(jīng)直接把JS寫在頁面上了，所以即使設計不合理也能比較容易查看和維護。

沒有做好HTML和JS的分離，腳本強烈耦合了HTML，不妥不妥。

要是后期頁面上的HTML有了改動，必須同時記得去找出相關的腳本文件，在JS代碼中搜索并修改里面寫死的HTML字符串才行。

換個角度再想一想，如果插入的HTML很復雜，有幾百行的話。要在JS腳本中手動拼接龐大的字符串，是件非常的麻煩事情，還十分容易出差錯。

模板分離原則：將定義模板的那一部分，與JS的代碼邏輯分離開來，讓代碼更加優(yōu)雅且利于維護。

通過分析頁面我們可以知道，表單初始的時候是至少會存在一個乘客輸入項的。

所以我們可以復制表單上第一個乘客的DOM來作為模板：

$(".create-passenger").on("click", function() {

    // 復制第一個乘客的DOM作為模板
    var template = $(".form .form-group:first-child").clone();
    // 將DOM模板插入到表單中，形成新的一行
    $(".form").append(template);
});

實例中用了jquery的clone()方法，可以復制整個jquery包裝過的DOM對象（不包括對象綁定的事件，如果要連事件也一起復制的話，可以加個參數(shù)clone(true)哦）。

有時候復制過來的DOM對象有可能不是最原始的狀態(tài)，所以記得要初始化一下。例如有像input這樣的輸入項，要記得把value的值先初始化哦template.find("input").val("")。

如果頁面本來就沒有相關的DOM，這時候可以手動新建一個隱藏的

    

        乘客姓名：
    

var template = $("#passenger-template > div").clone();