頁面模塊化實現(xiàn)的很大的受制于頁面的結構和表現(xiàn)；一個統(tǒng)一的頁面結構和表現(xiàn)能很好的實現(xiàn)頁面的模塊話。

比如一個“網(wǎng)友評論”模塊這個會在很多地方使用到，比如日志，照片，等等，如果這個“網(wǎng)友評論”模塊結果和表現(xiàn)是統(tǒng)一的那么我們就不用重復勞動去重新設計制作頁面甚至是行為等等，包括后臺的數(shù)據(jù)存貯。

《頁面模塊化(設想)》上面總結了頁面模塊化的優(yōu)點，《前端模塊化設計思路》也提到要做到模塊化的前提條件：

為了做到這一點，我們需要有一個設計規(guī)則，所有的模塊都在這個規(guī)則下進 行設計。良好的設計規(guī)則，會把耦合密集的設計參數(shù)進行歸類作為一個模塊，并以此劃分工作任務。而模塊之間彼此通過一個固定的接口(所謂的可見參數(shù))進行交互，除此之外的內(nèi)部實現(xiàn)(所謂的隱參數(shù))則由模塊的開發(fā)團隊進行自由發(fā)揮。

我們應給怎么樣建立一套設計規(guī)則呢？

首先我們要從頁面的表現(xiàn)開始，視覺上我們要采用統(tǒng)一的視覺設計規(guī)則，比如：

應用網(wǎng)頁柵格化來確定網(wǎng)頁布局；

頁面標題欄，字體大小，文本間距統(tǒng)一；

表單類的表現(xiàn)統(tǒng)一，比如按鈕，文本框等；

圖片規(guī)格統(tǒng)一；

行為類的彈窗，浮層等表現(xiàn)統(tǒng)一；

等等…

其次為模塊編寫統(tǒng)一的html結構，

要合理使用語言化的標簽；

可以保存成代碼片段或者單獨的html文件等，

如果需要可以加上適當?shù)淖⑨?#xff1b;

考慮擴張性和維護性；

再次編寫為模塊編寫統(tǒng)一的css，比如：

要有統(tǒng)一的命名規(guī)則(查看鬼哥的命名規(guī)則)，當然建議加上模塊的命名規(guī)則，不過我的建議是在模塊的命名規(guī)則前加上mode_前綴，例如：

彈出 mode_pop

公共 mode_global,mode_gb

標題 mode_title,mode_tit

提示 mode_hint

菜單 mode_menu

信息 mode_info

預覽 mode_pvw

Tips mode_tips

導航 mode_nav

當然你也可以根據(jù)你們團隊重新命名一套規(guī)則；合適的才是最好的

做好基類和拓展類的設計,做好在不同頁面模塊變化的差異性；比如同一模塊在A頁面標題的字體是粗體，在B頁面標題的字體是細體等等；

將每個模塊的css保存成獨立的獨立的css文件；

如果需要可以加上適當?shù)淖⑨?#xff1b;

考慮擴張性和維護性

接下了為該模塊添加行為(js)，編寫層面向?qū)ο蟮膉s，提高代碼的復用率等等；

最后審視模塊間的耦合問題，比如，留言模塊和發(fā)日志，填表單都會使用到表單元素，按鈕，文本框等，那么我認為我們應該把表單樣式作為一個獨立的css模塊，html和js模塊還是在原來的模塊中。這需要我們對這些模塊歸類，從而更好，跟方便的的拼裝我們的頁面，

html模塊可以布局模塊和功能模塊等，比如

按功能分的功能模塊，比如：

日志模塊：日志列表，日志詳細，日志評論(引用評論模塊等等)，日志發(fā)布(引用表單模塊等等)，日志管理等等

評論模塊：評論列表，發(fā)表評論(引用表單模塊等等)，評論管理等等

相冊模塊：……

工具條模塊：……

……等等；

按布局分的布局模塊：比如柵格化中的一堆布局組合；

css模塊比較復雜大致的

按類別分的公共模塊：重置模塊(css reset)，表單模塊，字體模塊，文字、圖片、圖文列表模塊，彈窗模塊，標題模塊，提示模塊,應用小圖標模塊等等；這里模塊絕大多數(shù)作為功能模塊的部件，融入在各個模塊中；

布局模塊和功能模塊可以參照html里的功能模塊的拆分；

行為js模塊可能就相對簡單一點,庫模塊，功能模塊等，功能模塊可以參照html里的功能模塊的拆分；

合理的模塊拆分和拼裝在實現(xiàn)頁面模塊化中其中相對重要的作用，模塊拆分和拼裝的好可以大大的提高開發(fā)和維護的效率，反正甚至會影響到網(wǎng)頁模塊化的成敗，給開發(fā)和維護帶來相對重大的影響。

這樣我們就有了網(wǎng)頁模塊化的基本實現(xiàn)思路，當然這是建立在設計規(guī)則上的，如果我們沒有完備的設計規(guī)則，那么網(wǎng)頁模塊化就會變成網(wǎng)頁魔鬼化，呵呵。

參考文章：

總結

以上是生活随笔為你收集整理的前端html页面模块,页面模块化实现的条件和基本实现思路 – WEB前端开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。