1. 程式人生 > >frameset和div常規佈局的優缺點比較

frameset和div常規佈局的優缺點比較

用frameset來佈局的優點:

1,在frameset裡使用iframe來實現常規的一些分欄佈局,可以藉助一個頁面承載多個頁面的方式來重用頁面程式碼。
2,一個頁面中的iframe之間可以互相實現關聯,而且不需要依靠過多的js就可以實現類似“區域性”重新整理的機制。
3,一些常見的後臺管理系統大部分是用這種方式來佈局的(追其原因可能是上面2點),所以固定了思維繫統佈局可能用frameset來實現比較好。

用frameset來佈局的缺點:

1,如果要實現不同iframe之間的dom元素產生互動和關聯,需要的js複雜程度較高,而且有些根本實現不了(比如拖拽,比如使用者自定製頁面佈局)。
2,一個頁面承載多個頁面的http請求,而且實現那種類似區域性重新整理的效果,不是後臺執行請求的機制,而也是使用了前臺的瀏覽器重新整理機制,會有延遲的響應而且無法對響應進行控制(比如loading或者一些響應狀態的監聽)。
3, 由於常見的後臺系統大部分是管理人員進行一些管理操作的,所以iframe的模式可以很快速的完成開發和迭代,但是目前(我們的系統)不光有管理的任務還 會承擔展示和互動的一些功能需求,對頁面的可操作要求比較高,iframe的可操作性又比較低。畢竟一個頁面裝載多個頁面,不好除錯和控制,在開發上的一 些功能上的不可實現,也會限制UI介面設計和互動的創意思路(比如一些頁面特效,動畫,dom的及時性改變等)。

使用DIV傳統佈局與frameset相比的優點:

1,整個頁面可以自由操縱,無論是樣式還是DOM元素。
2,UI設計與佈局,功能上等,不會受到任何技術上的限制和避諱。(比如使用者頁面的拖拽,自定製頁面等)

DIV傳統佈局與frameset相比的缺點與解決辦法:

1,不可能快速的實現“區域性”重新整理那種效果,要轉用ajax方式實現真正意義上的區域性重新整理。
2,頁面程式碼不能高度重用,但是可以使用伺服器動態語言裡的include等語句實現。

所以DIV佈局方式與frameset相比之下:前者可以完全彌補掉frameset的一些侷限和缺點,而且也可以使用其他手段完成frameset的優點,且實現難度較小。

大量的使用ajax的傳統DIV區域性頁面,會遇到的一些開發難點:

1,真正實現區域性重新整理的複雜的JavaScript開發工作。因為ajax是基於javascript的。
2,大量使用ajax的系統中客戶端狀態的儲存問題,比如ajax操作過程中的頁面狀態儲存,瀏覽器的前進功能,後退功能的實現。

解決方法:

1,使用jQuery框架簡化ajax與javascript的開發量,實現javascript程式碼的有效開發與管理。
2,使用rsh框架實現ajax系統中的客戶端狀態儲存和模擬瀏覽器的後退前進功能。(RSH也是比較成熟的js庫)。

最後在我們公司前端佈局的選擇上,決定使用傳統的div佈局頁面代替frameset,主要是基於以下幾點原因:

1, 由目前開發的系統的需求所決定,我們現在開發的系統已經不光侷限於一些後臺管理員的管理功能,更多的是一種展示,客戶需要是一個豐富的RIA應用而非前 者,系統需求需要系統實現豐富的互動功能和好的使用者體驗,使用frameset已經不能很好的實現了。(最簡單的例子:校內,開心中的使用者介面,也是固定 的三欄佈局,那麼它為什麼不用frameset來實現呢?可以自己思考。)

2,選擇div傳統佈局也可以很好的完成frameset佈局的全部優點部分,並且我們還擁有一期成功的專案開發經驗。

3,從效能上說,減少了HTTP請求,增加了使用者體驗,而且把B/S的實現往C/S靠攏也是未來B/S發展的趨勢。

4,在UI設計上說,會擁有比frameset更好更多的表現形式與設計形式。

5,針對DIV佈局在實現B/S系統,相對於frameset佈局的一些不足,完全擁有足夠成熟的解決方案。

可能很多地方總結的不到位或者可能根本就是錯的,以上均為小爝個人看,僅僅做為參考,希望可以有更多的人一起交流探討。