分享一個(gè)比較簡(jiǎn)單，又能拿出去裝逼的技術(shù)——JS字符串拼接谓着。
適用人群：JS學(xué)習(xí)愛(ài)好者泼诱；
適用場(chǎng)合：跟一群JS初學(xué)者在一起時(shí)、跟女同學(xué)獨(dú)處時(shí)等赊锚。
那么接下來(lái)開(kāi)始吧：
? ? ? ? 1治筒、假如我需要畫(huà)出三個(gè)盒子，每個(gè)盒子里面分別是姓名和年齡舷蒲，那么我的代碼可以這么寫(xiě)(當(dāng)然耸袜，你也可以嘗試到瀏覽器觀看效果，看看是否會(huì)與結(jié)尾呈現(xiàn)的最終要過(guò)一致)：
? ? ? ? 2牲平、但是堤框，目前我的需求是比較簡(jiǎn)單的，只有三個(gè)盒子纵柿，就算把名字和年齡全改了蜈抓，也不會(huì)太麻煩。而現(xiàn)在如果有100個(gè)div昂儒，那么你就需要輸入100次人名和年齡沟使，那么這是非常痛苦的，顯然不能把這些數(shù)據(jù)寫(xiě)死渊跋。這種情況往往我們會(huì)從后臺(tái)調(diào)取一些數(shù)據(jù)腊嗡，而在前臺(tái)的代碼中，我們需要讓這些數(shù)據(jù)“變活”拾酝，這個(gè)時(shí)候燕少，可以參考下面的做法：
? ? ? ?① 先定義一個(gè)數(shù)組，用來(lái)存放這些數(shù)據(jù)：
② 將div>h1+p的這個(gè)結(jié)構(gòu)復(fù)制一下微宝，然后通過(guò)JS將它們以字符串的形式拼接起來(lái)：
? ? ? ? ③ 現(xiàn)在看到的文字(張三 and 此人今年23歲)是一個(gè)錯(cuò)誤的寫(xiě)法棺亭，而且就算加了引號(hào)，也是變成了字符串，那么這個(gè)值就是死的镶摘，這樣就無(wú)法動(dòng)態(tài)控制這些數(shù)據(jù)嗽桩，于是，我們可以開(kāi)始考慮凄敢，將上面數(shù)組中的數(shù)據(jù)導(dǎo)入到現(xiàn)在文字所處的區(qū)域碌冶。
? ? ? ? 這里有兩個(gè)步驟要注意：
? ? ? ? 一是先將原先html中的所有代碼注釋掉，避免干擾涝缝；
? ? ? ? 二是可以通過(guò)for循環(huán)來(lái)將三組數(shù)據(jù)遍歷到文字所在的地方扑庞，具體方法如下：
? ? ? ④ 這里有個(gè)小地方要解釋一下，bd指的是body標(biāo)簽的id名拒逮。
? ? ? ?3罐氨、通過(guò)這個(gè)方法，就可以實(shí)現(xiàn)將data里面的數(shù)據(jù)全部轉(zhuǎn)移到頁(yè)面中呈現(xiàn)滩援，最終的效果與一開(kāi)始是一樣的：
? ? ? ? 4栅隐、最后總結(jié)一下：這里面運(yùn)用到的知識(shí)其實(shí)很淺，更好的說(shuō)法是：這只是一個(gè)網(wǎng)頁(yè)開(kāi)發(fā)的小技巧玩徊，希望大家可以作為參考與了解租悄！
此處提供源碼下載：
