分析：

1.       Dialog的生命周期：

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

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

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

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

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

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

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

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

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

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

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

提交

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

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

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

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

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

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

隱藏

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

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

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

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

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

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

實(shí)踐

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

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

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

總結(jié)

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

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

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

最新評(píng)論