問(wèn)題描述

可能標(biāo)題描述的不太清楚,還是直接上效果圖說(shuō)

如上效果圖所示，可以自己編輯配置參數(shù)，然后可預(yù)覽，每個(gè)模塊還可以拖拽，想問(wèn)一下這種技術(shù)是怎么實(shí)現(xiàn)的？

問(wèn)題解答

這么簡(jiǎn)單說(shuō)，給你一個(gè)p，要求根據(jù)一個(gè)輸入框的值修改它的寬，這個(gè)不難實(shí)現(xiàn)吧。

當(dāng)你實(shí)現(xiàn)完這個(gè)，就慢慢加上可以修改高、位置、可拖拽、可刪除、可新增等功能，其他的元素也類似。

如果你面向?qū)ο筮€熟的話，也就是一個(gè)對(duì)象，有各種屬性。通過(guò)輸入框，拖拽等方式修改屬性的過(guò)程。

DIY的頁(yè)面，本質(zhì)其實(shí)所有的可能性的頁(yè)面都已經(jīng)寫好了，你只是修改參數(shù)而已

舉個(gè)簡(jiǎn)單的栗子

評(píng)論沒(méi)有回答的時(shí)候是空的

有評(píng)論的時(shí)候就會(huì)出現(xiàn)一個(gè)評(píng)論框，有幾條評(píng)論就顯示幾條評(píng)論框

只不過(guò)區(qū)別在于，一個(gè)是通過(guò)評(píng)論數(shù)確定，一個(gè)是通過(guò)你選取的參數(shù)確定，包括修改p大小顏色，也只不過(guò)是把你的參數(shù)保存起來(lái)，通過(guò)對(duì)應(yīng)的js轉(zhuǎn)換成你看到的效果

理應(yīng)由一套json數(shù)據(jù)配置的頁(yè)面模板(例如:配置頁(yè)面內(nèi)的圖片,圖片寬高,縮放比例以及自定義屬性等等),頁(yè)面類型就對(duì)應(yīng)不同的json數(shù)據(jù),這樣做靈活且可擴(kuò)展性高

其實(shí)其他答主回答的很好了，但可能對(duì)題主來(lái)說(shuō)過(guò)于抽象了。我就再簡(jiǎn)單說(shuō)下DIY頁(yè)面的思路吧：

你可以把這個(gè)頁(yè)面想象成由很多積木拼裝而成，這個(gè)積木我們?cè)陂_發(fā)中稱為組件。

每個(gè)組件都可以被抽象成一個(gè)對(duì)象，它的dom結(jié)構(gòu)、css樣式和對(duì)應(yīng)的js都是寫好了的。一般會(huì)有一個(gè)數(shù)據(jù)對(duì)象（比如json）來(lái)保存這些自定義配置參數(shù)，以便在你操作組件時(shí)進(jìn)行對(duì)應(yīng)的數(shù)據(jù)讀寫。

當(dāng)你添加組件時(shí)，js就會(huì)去讀取配置數(shù)據(jù)，然后生成相應(yīng)的dom結(jié)構(gòu)并渲染到html里，你就能預(yù)覽到效果了。

PS：如果題主想實(shí)現(xiàn)類似功能的話，建議先實(shí)現(xiàn)其中的一個(gè)組件，然后擴(kuò)展可配置組件的參數(shù)...

能讀代碼，直接f12讀代碼唄