頁(yè)面模塊化實(shí)現(xiàn)的很大的受制于頁(yè)面的結(jié)構(gòu)和表現(xiàn)；一個(gè)統(tǒng)一的頁(yè)面結(jié)構(gòu)和表現(xiàn)能很好的實(shí)現(xiàn)頁(yè)面的模塊話。

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

《頁(yè)面模塊化(設(shè)想)》上面總結(jié)了頁(yè)面模塊化的優(yōu)點(diǎn)，《前端模塊化設(shè)計(jì)思路》也提到要做到模塊化的前提條件：

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

我們應(yīng)給怎么樣建立一套設(shè)計(jì)規(guī)則呢？

首先我們要從頁(yè)面的表現(xiàn)開(kāi)始，視覺(jué)上我們要采用統(tǒng)一的視覺(jué)設(shè)計(jì)規(guī)則，比如：

應(yīng)用網(wǎng)頁(yè)柵格化來(lái)確定網(wǎng)頁(yè)布局；

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

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

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

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

等等…

其次為模塊編寫(xiě)統(tǒng)一的html結(jié)構(gòu)，

要合理使用語(yǔ)言化的標(biāo)簽；

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

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

考慮擴(kuò)張性和維護(hù)性；

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

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

彈出 mode_pop

公共 mode_global,mode_gb

標(biāo)題 mode_title,mode_tit

提示 mode_hint

菜單 mode_menu

信息 mode_info

預(yù)覽 mode_pvw

Tips mode_tips

導(dǎo)航 mode_nav

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

做好基類和拓展類的設(shè)計(jì),做好在不同頁(yè)面模塊變化的差異性；比如同一模塊在A頁(yè)面標(biāo)題的字體是粗體，在B頁(yè)面標(biāo)題的字體是細(xì)體等等；

將每個(gè)模塊的css保存成獨(dú)立的獨(dú)立的css文件；

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

考慮擴(kuò)張性和維護(hù)性

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

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

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

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

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

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

相冊(cè)模塊：……

工具條模塊：……

……等等；

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

css模塊比較復(fù)雜大致的

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

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

行為js模塊可能就相對(duì)簡(jiǎn)單一點(diǎn),庫(kù)模塊，功能模塊等，功能模塊可以參照html里的功能模塊的拆分；

合理的模塊拆分和拼裝在實(shí)現(xiàn)頁(yè)面模塊化中其中相對(duì)重要的作用，模塊拆分和拼裝的好可以大大的提高開(kāi)發(fā)和維護(hù)的效率，反正甚至?xí)绊懙骄W(wǎng)頁(yè)模塊化的成敗，給開(kāi)發(fā)和維護(hù)帶來(lái)相對(duì)重大的影響。

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

參考文章：

總結(jié)

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

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