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

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

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

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

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

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

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

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

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

乘客列表：

    

        乘客姓名：
    
    添加一個(gè)乘客
    保存

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

    乘客姓名：

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

先直接手動(dòng)復(fù)制粘貼HTML拼接成JS字符串，然后再插入到表單中。

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

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

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

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

要拼接的HTML字符串很短；

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

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

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

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

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

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

通過分析頁面我們可以知道，表單初始的時(shí)候是至少會(huì)存在一個(gè)乘客輸入項(xiàng)的。

所以我們可以復(fù)制表單上第一個(gè)乘客的DOM來作為模板：

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

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

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

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

如果頁面本來就沒有相關(guān)的DOM，這時(shí)候可以手動(dòng)新建一個(gè)隱藏的

    

        乘客姓名：
    

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