网站页面布局的实现
本篇文章將探討網(wǎng)站布局的實(shí)現(xiàn)，以前也寫過和視圖層相關(guān)的文章==>點(diǎn)擊查看<==
承接上篇文章的思路，本篇文章討論的重點(diǎn)是“如何將模塊化的塊用xml組織起來？”
下面是我總結(jié)的視圖層的設(shè)計(jì)要點(diǎn)：
-定義網(wǎng)站的公共布局，以供其他布局調(diào)用和修改
-網(wǎng)站同一個(gè)URL可能會(huì)有多種狀態(tài)，例如Logged In/Logged Out，不同狀態(tài)的布局可以不同；
-網(wǎng)站所有的頁面都是由路由系統(tǒng)組織起來的，所以包含頁面布局的xml文件也應(yīng)當(dāng)采用和路由系統(tǒng)相似的機(jī)構(gòu)，便于和頁面相互對(duì)應(yīng)
在這里，以句柄（handle）來區(qū)分不同的布局。句柄在系統(tǒng)執(zhí)行時(shí)生成，一個(gè)頁面可以關(guān)聯(lián)多個(gè)句柄，每個(gè)句柄代表一層，這樣就做到了分層。
首先定義公共層<default>，所有的頁面都以它為基礎(chǔ)；
然后定義當(dāng)前頁面層<module_controller_action>;
如果頁面需要處理不同的狀態(tài)，則定義狀態(tài)層
最后，在渲染頁面時(shí)將所有層的布局相融合，生成最終的布局?jǐn)?shù)據(jù)。
有了頁面布局的xml文件之后，結(jié)合View類和template模版，就可以開始渲染頁面了。
假如我要定義一個(gè)品字形網(wǎng)頁：
公共布局：
|
1 2 3 4 5 6 7 8 9 |
<default> <block class="Top" name="top" as="public.top" template="top.phtml"> <block class="Top_Log" name="top.log" template="top_log.phtml" /> <block class="Top_Links" name="top.links" template="top_links.phtml" /> </block> <block class="Left" name="left" as="public.left" template="left.phtml"/> <block class="Right" name="right" as="public.right" template="right.phtml"/> <block class="footer" name="footer" as="public.footer" template="footer.phtml"/> </default> |
其中，block表示塊，class表示塊的PHP類，name表示塊的名稱，as表示塊是公共的，可以被其他塊修改，“top.log”和“top.links”是“top”的子塊（child）
首頁布局：
|
1 2 3 4 5 |
<home_index_index> <reference name="public.right"> <block class="Banner" name="banner" template="banner.phtml"/> </reference> </home_index_index> |
其中，reference表示引用公共塊，name表示將要引用的塊的as屬性，
活動(dòng)頁布局：
|
1 2 3 |
<promotion_index_index> <update>home_index_index</update> </promotion_index_index> |
其中，<update/>表示新增home_index_index句柄，意味著渲染時(shí)程序也會(huì)讀取<home_index_index/>中的內(nèi)容。
活動(dòng)頁2布局：
|
1 2 3 4 5 6 |
<promotion2_index_index> <update>home_index_index</update> <reference name="public.right"> <remove name="banner"/> </reference> </promotion2_index_index> |
其中，<update/>表示新增home_index_index句柄，<remove/>表示去掉“public.right”中的“banner”塊
當(dāng)被訪問的頁面開始渲染時(shí)，程序依次讀取各句柄中的數(shù)據(jù)并按照規(guī)則生成布局?jǐn)?shù)據(jù)。
Block對(duì)象$block如何與Template產(chǎn)生關(guān)聯(lián)？
介紹block類的3個(gè)方法：
public function toHtml(){}
public function getChild($child){}
public function getChildHtml($child){}
上述3個(gè)方法是每一個(gè)Block類都具有的方法，這3個(gè)方法主要用來在template中調(diào)用來產(chǎn)生HTML：
$block->toHtml()將會(huì)返回$block的HTML；
//$child是定義在布局xml中的子塊的name屬性
$block->getChild($child)將會(huì)返回一個(gè)子Block對(duì)象，這個(gè)子block對(duì)象是在布局xml中定義的；
$block->getChildHtml($child)將會(huì)返回一個(gè)子Block對(duì)象的HTML，這個(gè)子block對(duì)象是在布局xml中定義的，相當(dāng)于$block->getChild($child)->toHtml();
通過周而復(fù)始的調(diào)用getChildHtml($child)，最終就可以獲得整個(gè)頁面的HTML。
如果您覺得閱讀本文對(duì)您有幫助，歡迎轉(zhuǎn)載本文，但是轉(zhuǎn)載文章之后必須在文章頁面明顯位置保留此段聲明，否則保留追究法律責(zé)任的權(quán)利。
作 者：www.jpdou.top
原文鏈接：http://www.jpdou.top/website-layout-display/
總結(jié)
- 上一篇： JavaScript或jQuery中使用
- 下一篇： 微信小程序把玩（三十二）Image AP