zoukankan      html  css  js  c++  java
  • 网站页面布局的实现

    本篇文章将探讨网站布局的实现,以前也写过和视图层相关的文章==>点击查看<==
    承接上篇文章的思路,本篇文章讨论的重点是“如何将模块化的块用xml组织起来?”

    下面是我总结的视图层的设计要点:
    -定义网站的公共布局,以供其他布局调用和修改
    -网站同一个URL可能会有多种状态,例如Logged In/Logged Out,不同状态的布局可以不同;
    -网站所有的页面都是由路由系统组织起来的,所以包含页面布局的xml文件也应当采用和路由系统相似的机构,便于和页面相互对应

    在这里,以句柄(handle)来区分不同的布局。句柄在系统执行时生成,一个页面可以关联多个句柄,每个句柄代表一层,这样就做到了分层。

    首先定义公共层<default>,所有的页面都以它为基础;
    然后定义当前页面层<module_controller_action>;
    如果页面需要处理不同的状态,则定义状态层

    最后,在渲染页面时将所有层的布局相融合,生成最终的布局数据。

    有了页面布局的xml文件之后,结合View类和template模版,就可以开始渲染页面了。

    假如我要定义一个品字形网页:

    公共布局:

    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属性,

    活动页布局:

    1
    2
    3
    <promotion_index_index>
        <update>home_index_index</update>
    </promotion_index_index>

    其中,<update/>表示新增home_index_index句柄,意味着渲染时程序也会读取<home_index_index/>中的内容。

    活动页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”块

    当被访问的页面开始渲染时,程序依次读取各句柄中的数据并按照规则生成布局数据。

    Block对象$block如何与Template产生关联?
    介绍block类的3个方法:
    public function toHtml(){}

    public function getChild($child){}

    public function getChildHtml($child){}

    上述3个方法是每一个Block类都具有的方法,这3个方法主要用来在template中调用来产生HTML:
    $block->toHtml()将会返回$block的HTML;

    //$child是定义在布局xml中的子块的name属性
    $block->getChild($child)将会返回一个子Block对象,这个子block对象是在布局xml中定义的;

    $block->getChildHtml($child)将会返回一个子Block对象的HTML,这个子block对象是在布局xml中定义的,相当于$block->getChild($child)->toHtml();

    通过周而复始的调用getChildHtml($child),最终就可以获得整个页面的HTML。

    如果您觉得阅读本文对您有帮助,欢迎转载本文,但是转载文章之后必须在文章页面明显位置保留此段声明,否则保留追究法律责任的权利。

    作  者:www.jpdou.top

    原文链接:http://www.jpdou.top/website-layout-display/

  • 相关阅读:
    vue+iview简单实现获取要上传文件的Base64字符串
    com.microsoft.sqlserver.jdbc.SQLServerException: 必须执行该语句才能获得结果。
    Java入门2.1---面向对象的主线1---类及类的构成成分:属性、方法、构造器、代码块、内部类
    淘系自研前端研发工具 AppWorks 正式发布
    百度开源一款前端图片合成工具库:MI
    微软体验超棒的Fluent UI宣传短片,爱了爱了
    oracle的购买价格研究
    .NET Core 网络数据采集 -- 使用AngleSharp做html解析
    【译】Google Markdown书写风格指南
    我终于逃离了Node(你也能)
  • 原文地址:https://www.cnblogs.com/jpdoutop/p/website-layout-display.html
Copyright © 2011-2022 走看看