分析：

1.       Dialog的生命周期：

2.       Dialog的結(jié)構(gòu)：標(biāo)題、內(nèi)容（DOM）、數(shù)據(jù)、提交欄、關(guān)閉按鈕

顯示以及加載數(shù)據(jù)

1.       Content 作為頁面代碼隱藏到頁面中，Dialog顯示后，將數(shù)據(jù)（Json對象）賦值到Dialog

1） 優(yōu)點(diǎn)：實(shí)現(xiàn)最為簡單

2） 缺點(diǎn)：加載頁面時(shí)，頁面代碼多，如果未發(fā)生Dialog操作，這部分Dom不會被用到，如果彈出的Dialog種類過多，那么頁面的隱藏代碼會大大增加頁面大?。?/SPAN>

2.       Contetn作為單獨(dú)的頁面（代碼塊，類似于MVC中的partialView）, 在Dialog第一次彈出時(shí)，請求頁面顯示在Dialog中，并將數(shù)（Json對象）據(jù)賦值到Dialog

1） 優(yōu)點(diǎn)：可以減少頁面大小，僅在需要彈出Dialog時(shí)加載對應(yīng)的內(nèi)容。

2） 缺點(diǎn)：首次打開一個(gè)Dialog時(shí)，需要加載頁面，有延遲效果，降低用戶體驗(yàn)。

3.       Contetn作為單獨(dú)的頁面（代碼塊，類似于MVC中的partialView），每一次彈出Dialog時(shí)請求頁面，數(shù)據(jù)連同頁面一起渲染，然后顯示在Dialog中

1） 優(yōu)點(diǎn)：幾乎所有的后臺框架都有數(shù)據(jù)渲染機(jī)制，可以方便的渲染編輯的內(nèi)容，降低前端代碼的耦合。

2） 缺點(diǎn)：每次彈出Dialog需要重新加載對應(yīng)的內(nèi)容和數(shù)據(jù)。

提交

1.       異步提交，將數(shù)據(jù)序列化，使用Ajax（或者iframe）方式提交到后臺，然后返回json表示成功或者失敗。根據(jù)結(jié)果改變List記錄

1） 優(yōu)點(diǎn)：使用Ajax進(jìn)行數(shù)據(jù)傳輸，不刷新頁面,可以保留頁面狀態(tài)。

2） 缺點(diǎn): 需要跟后臺進(jìn)行耦合，根據(jù)后臺結(jié)果顯示成功或錯誤信息。需要協(xié)調(diào)前后臺的驗(yàn)證和錯誤顯示。

2.       Form表單提交，直接將表單提交到后臺，刷新整個(gè)頁面

1)       優(yōu)點(diǎn)：直接刷新頁面，邏輯簡單。

2)       缺點(diǎn): 頁面狀態(tài)丟失，如果在搜索頁面，需要回寫各項(xiàng)輸入；錯誤回顯復(fù)雜，因?yàn)?/SPAN>Dialog是前臺js彈出，如果在Dialog上顯示數(shù)據(jù)，那么需要彈出Dialog

隱藏

1.       Dialog 關(guān)閉后，Dialog僅僅是隱藏

1)       優(yōu)點(diǎn)：實(shí)現(xiàn)簡單，顯示Dialog的邏輯也會變簡單。

2)       缺點(diǎn)：多個(gè)Dialog狀態(tài)下，頁面以及內(nèi)存中有多個(gè)Dialog對象，依賴于加載數(shù)據(jù)和內(nèi)容方式，如果每次打開Dialog都加載新的內(nèi)容（DOM），那么也會增加復(fù)雜度。

2.       Dialog 關(guān)閉后，釋放Dialog對象

1） 優(yōu)點(diǎn)：每次打開新的Dialog，都是獨(dú)立的操作，邏輯上簡單

2） 缺點(diǎn)：增加了復(fù)雜度，每次關(guān)閉Dialog時(shí)，需要將內(nèi)容（DOM）緩存起來，清除狀態(tài)，在下一次顯示Dialog時(shí)重新加載，如果每次打開Dialog都加載新的內(nèi)容（DOM），可直接釋放Dialog中的內(nèi)容（ＤＯＭ）

實(shí)踐

1.       加載的第一種，將Dialog內(nèi)容（DOM）事先隱藏在頁面中，編輯完數(shù)據(jù)后異步提交數(shù)據(jù)，這種方式我們在項(xiàng)目中使用的最多，只要處理好顯示數(shù)據(jù)，錯誤回傳顯示，基本能滿足日常應(yīng)用。

2.       加載的第三種方式，在一些框架的支持下會非常的自然，在.net的MVC框架中，View和Model的集成，驗(yàn)證規(guī)則的統(tǒng)一性處理，可以是開發(fā)成本降到最低。

3.       數(shù)據(jù)的異步提交還是Form提交，需要看具體情況，如果是搜索頁面，需要回傳大量頁面狀態(tài)則最好使用異步提交方式，否則只是刷新頁面，表單提交方式更為自然。

總結(jié)

1.       如果你是控件的編寫者，最好Dialog全部實(shí)現(xiàn)上述功能，能滿足更多的場景

2.       如果你是控件的使用者，根據(jù)具體情況，配置Dialog，得到自己的效果。

3.       錯誤處理和顯示將是你在這個(gè)過程中遇到最麻煩的事情。

最新評論