Yii框架分析（九）——视图渲染流程

在MVC架构中，View主要是用于展示信息的。Yii中的视图层文件由2部分组成：布局视图、部分视图。web系统的大部分页面都存在相同的元素：logo、菜单、foot栏等，我们把这些相同的元素组成的视图文件称为布局视图，一般web系统需要2个布局，即前台布局和后台布局，前台布局是给用户看的，后台布局是给管理员看的。每个页面所独有的部分视图称为部分视图。

可以使用上图进行描述，我们将菜单栏、导航栏和Footer栏放到布局文件中，即所有页面复用一个布局文件，然后每个页面(Action)有各自的部分视图文件。
接下来看一下视图文件的存放路径。WebApp可以配置视图文件路径和布局文件路径同时还会指定一个默认的布局文件；每个Controller的视图文件存放在WebApp指定的视图路径下，以Controller的名字职位后缀，Controller还可以指定自己使用哪个布局文件。
WebApp成员属性 说明
viewPath 用于指定视图文件路径，所有的视图文件必须在这个文件下
默认protected/views
layoutPath 用于指定布局文件路径，所有的布局文件必须在这个文件下
默认protected/views/layouts，该路径下有：main.php、column.php
viewPath 用于指定系统视图文件路径，默认protected/views/system
layout 指定默认使用的布局文件，默认为main

比如当前正在执行PostController的modifyAction，PostController指定使用column布局，那么这个请求所使用的布局文件为protected/views/layouts/column.php，视图文件为protected/views/post/modify.php。
视图层中还有2个重要的概念：客户端脚本组件、Widget。
客户端脚本组件：该组件用于管理客户端脚本(javascript和css)，可以通过该组件向视图中添加javascript和css，客户端脚本组件统一管理这些代码，在页面输出的最后一步对客户端脚本(javascript和css)进行渲染。
Widget：又称小物件，通过Widget可以对页面进行模块化，Widget可以看成是一个没有布局的控制器。通过Widget可以把公用的页面元素进行复用，比如：Menu Widget、列表Widget、表格Widget、分页Widget等等。

视图层的渲染分3个步骤完成：
Step1：渲染部分视图，即渲染每个页面各自特有的视图片断；
Step2：将渲染布局视图，即即渲染每个页面共有的页面元素，同时将Step1的结果插入到布局视图中。在Step1和Step2中，可能还需要渲染Widget，比如日历Widget、菜单Widget等。这2个步骤中可以注册自己使用了哪些js和css；
Step3：渲染js和css。将前2步注册的js和css添加到html页面的制定位置。

由于加载顺序的原因，导致的结果是在部分视图中使用registerCssFile或者registerScriptFile导入的css文件或者js文件会出现在布局视图文件中注册的css或js文件之前，造成页面样式及动态效果的混乱，如何解决这个问题呢？

其实很简单，那就是在protected/components/Controller.php中重写init方法，将布局视图中的注册全局js或css文件的方法定义在init方法中即可：

public function init(){
    Yii::app()->clientScript->registerCoreScript('jquery');
    Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl . '/css/style.css');
    parent::init();
}

这样就可以保证jquery.js和style.css文件在所有其他js及css文件之前定义在head标签中。