摘要:更好的方案模板分離原則模板分離原則將定義模板的那一部分,與的代碼邏輯分離開來,讓代碼更加優(yōu)雅且利于維護(hù)。
引言
在前端開發(fā)中,經(jīng)常需要動態(tài)添加一些元素到頁面上。那么如何通過一些技巧,優(yōu)化動態(tài)創(chuàng)建頁面元素的方式,使得代碼更加優(yōu)雅,并且更易于維護(hù)呢?接下來我們通過研究一些實(shí)例,一步步地找出最優(yōu)方案。
這篇文章盡量寫得思路清晰且通俗易懂,由淺入深為剛?cè)腴T前端的新手們帶來一些思路和啟發(fā)。
老手們也可以順著看下去,當(dāng)做復(fù)習(xí)一次。亦或者直接跳到后半部分,去看稍微深入一點(diǎn)的模板數(shù)據(jù)替換示例,一起交流交流哦。
由于DOM和HTML會存在一定的歧義,所以為了區(qū)別開來,文章中這兩個術(shù)語的意思分別是:
DOM :專指文檔對象,是在JS上以對象的形式存在的。
HTML:專指HTML文本,是一連串字符的集合。
實(shí)例一:如何動態(tài)添加元素到頁面中話不多說,我們先來思考一下最基本的問題,如何用JS動態(tài)添加元素到頁面中去呢?
假設(shè)在點(diǎn)擊“添加一個乘客”按鈕的時候,需要JS動態(tài)創(chuàng)建出一個新的輸入框來填寫姓名:
乘客列表:
從上面可以看出,要實(shí)現(xiàn)這個功能,我們需要處理的HTML片段是:
勉強(qiáng)的方案:手動復(fù)制粘貼HTML拼接成JS字符串乘客姓名:
那么我們先來看看傳統(tǒng)的做法是這樣子的:
先直接手動復(fù)制粘貼HTML拼接成JS字符串,然后再插入到表單中。
$(".create-passenger").on("click", function() { // 先直接手動復(fù)制粘貼HTML拼接成JS字符串 var html = "點(diǎn)評&分析" + " 乘客姓名:" + ""; // 然后再插入到表單中 $(".form").append(html); });
這是種偷懶的實(shí)現(xiàn)方式,在部分中小型網(wǎng)站、教科書上,最常見到它的身影。
在開發(fā)時的時候,某些情況下使用這種方案,的確可能會比較快速,直接復(fù)制粘貼HTML拼成JS字符串就可以了。
但滿足這樣的條件必須是:
要拼接的HTML字符串很短;
頁面結(jié)構(gòu)已經(jīng)很穩(wěn)定,能保證以后不會需要作出修改;
頁面HMTL和JS的代碼量都不多,或者已經(jīng)直接把JS寫在頁面上了,所以即使設(shè)計不合理也能比較容易查看和維護(hù)。
問題&思考沒有做好HTML和JS的分離,腳本強(qiáng)烈耦合了HTML,不妥不妥。
要是后期頁面上的HTML有了改動,必須同時記得去找出相關(guān)的腳本文件,在JS代碼中搜索并修改里面寫死的HTML字符串才行。
換個角度再想一想,如果插入的HTML很復(fù)雜,有幾百行的話。要在JS腳本中手動拼接龐大的字符串,是件非常的麻煩事情,還十分容易出差錯。
更好的方案:模板分離原則一、利用頁面上現(xiàn)有的DOM元素作為模板模板分離原則:將定義模板的那一部分,與JS的代碼邏輯分離開來,讓代碼更加優(yōu)雅且利于維護(hù)。
通過分析頁面我們可以知道,表單初始的時候是至少會存在一個乘客輸入項(xiàng)的。
所以我們可以復(fù)制表單上第一個乘客的DOM來作為模板:
$(".create-passenger").on("click", function() { // 復(fù)制第一個乘客的DOM作為模板 var template = $(".form .form-group:first-child").clone(); // 將DOM模板插入到表單中,形成新的一行 $(".form").append(template); });注意點(diǎn)&細(xì)節(jié)解析
實(shí)例中用了jquery的clone()方法,可以復(fù)制整個jquery包裝過的DOM對象(不包括對象綁定的事件,如果要連事件也一起復(fù)制的話,可以加個參數(shù)clone(true)哦)。
有時候復(fù)制過來的DOM對象有可能不是最原始的狀態(tài),所以記得要初始化一下。例如有像input這樣的輸入項(xiàng),要記得把value的值先初始化哦template.find("input").val("")。
二、在隱藏的標(biāo)簽中定義模板如果頁面本來就沒有相關(guān)的DOM,這時候可以手動新建一個隱藏的
接下來用JS去取這個元素的內(nèi)容作為模板:
var template = $("#passenger-template > div").clone();注意點(diǎn)&細(xì)節(jié)解析
用一個標(biāo)簽來包裹模板的理由,
一是取模板的時候可以很方便,直接clone()或者html()就可以了;
二是為了更好地分類和規(guī)范。例如定義模板時,要求大家都用同一種標(biāo)簽和CSS類: 當(dāng)然不一定去用 標(biāo)簽內(nèi)的type="text/html",它能告訴瀏覽器這個標(biāo)簽里面的內(nèi)容不是JS腳本,可以直接忽略不用去解析。這樣瀏覽器就不會報錯了。 還有一點(diǎn)是這時候就不能直接使用clone()了哦,因?yàn)?b>