問題描述

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

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

問題解答

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

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

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

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

舉個簡單的栗子

評論沒有回答的時候是空的

有評論的時候就會出現(xiàn)一個評論框，有幾條評論就顯示幾條評論框

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

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

其實其他答主回答的很好了，但可能對題主來說過于抽象了。我就再簡單說下DIY頁面的思路吧：

你可以把這個頁面想象成由很多積木拼裝而成，這個積木我們在開發(fā)中稱為組件。

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

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

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

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