|
模塊化思想已經(jīng)不再是創(chuàng)新，陸續(xù)的演變成一種思維模式，在處理各種問題時都會考慮模塊化思想
前端重構(gòu)也已經(jīng)有各種模塊化的思想出現(xiàn)，結(jié)構(gòu)模塊化、樣式模塊化等等
今天和同事溝通視覺統(tǒng)一化的時候，發(fā)現(xiàn)流程中在產(chǎn)出物方面存在一個問題
如下圖所示：
大家按照統(tǒng)一的思維過程在執(zhí)行時 產(chǎn)出物在頁面構(gòu)建的環(huán)節(jié)，形成了一個聚合，從以UI組件為單位變?yōu)榱艘詐age為單位的產(chǎn)出物，而之后到了后端研發(fā)時，其實Template還是需要再次分拆，由于這個問題，而產(chǎn)生了更大的溝通成本，降低了整個團(tuán)隊的效率
基于這個問題 我提出了一個解決方法 還算不上解決方案，短暫的解決一下
在頁面構(gòu)建的環(huán)境 通過webserver的SSI Include指令 將靜態(tài)頁面也進(jìn)行模塊化，在交付產(chǎn)出物的時候后端研發(fā)人員是很清晰的看到module的復(fù)用代碼，也降低了重構(gòu)頁面時對于統(tǒng)一的ui而產(chǎn)生不同html和css代碼的錯誤率
具體實現(xiàn)如下：
在開發(fā)(測試環(huán)境) 建立webserver（nginx、apache均可） 然后通過配置文件開啟SSI支持
Apache 開啟SSI方式 http://www.uplinux.com/download/doc/apache/ApacheManual/howto/ssi.html
要使服務(wù)器允許SSI，必須在httpd.conf文件或.htaccess文件中有如下配置：
Options +Includes
告訴服務(wù)器以允許解析文件中的SSI指令。注意，在多數(shù)配置中，多個Options指令會互相覆蓋，所以，可能必須對需要SSI的特定目錄使用Options，以確保位于最后并起作用。
并不是所有文件中的SSI指令都會被解析，所以，必須告訴Apache應(yīng)該解析哪些文件。有兩種方法，使Apache解析帶有特定文件后綴的任何文件，比如.shtml, 配置如下：
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
在 Nginx 開啟 SSI ，加入以下3行就OK了，可以放在 http, server, 和 location 段都行：
ssi on;
ssi_silent_errors on;
ssi_types text/shtml;
SSI Include 指令語法，我們主要用這個語法來調(diào)用相關(guān)組件文件代碼
<!–#include virtual=”文件路徑” –>
在構(gòu)建頁面時 目錄結(jié)構(gòu)可以是
demoproject/ 項目文件夾
|-- aboutus.shtml 綜合性頁面 包含module調(diào)用
|-- index.shtml 綜合性頁面 包含module調(diào)用
|-- other_page.shtml 綜合性頁面 包含module調(diào)用
|-- module 組件文件夾
| |-- footer.html 組件文件
| |-- header.html 組件文件
| `-- other_module.html 組件文件
|-- images 其他靜態(tài)文件
|-- js 其他靜態(tài)文件
`-- style 其他靜態(tài)文件
這樣 我們形成的綜合性頁面的代碼中會包含module調(diào)用，在我們每次對通用組建修改時，只需要修改組建文件即可
如下圖，因為我們之前在webserver配置了SSI支持，所以我們能夠?qū)崟r預(yù)覽效果
這樣，除了在開發(fā)時方便了我們自己，我們的交付物也能夠體現(xiàn)模塊化思想，方便后端人員處理templates
同時我也用python寫了一個開源項目，方便使用shtml這種方式構(gòu)建頁面的同事 產(chǎn)出傳統(tǒng)html交付物
shtml2html項目
介紹：替換shtml中include內(nèi)容為真實調(diào)用內(nèi)容 并在同級目錄生成.html文件 給重構(gòu)團(tuán)隊在構(gòu)建頁面時使用
項目地址：https://github.com/iamued/shtml2html
使用方法：
必須安裝python環(huán)境 2.x版本
Usage: python shtml2html.py path 支持文件和目錄（遞歸處理）
這是我目前的解決方法，正在試行中，小團(tuán)隊還沒那么智能化，希望能給大家提供一些思路
如果你有更好的解決方案也請告訴我，多交流
本文鏈接：http://m.95time.cn/tech/web/2011/8617.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
