yii2 檢視(佈局)中各種函式總結報告及使用場景

阿北哥ya發表於2017-06-22

yii2佈局檔案裡有很多函式,你是否研究過他們都是幹嘛用的?這篇文章告訴你~

我們以安裝完yii2程式後預設的佈局為例說明

// @app/views/layouts/main.php

/* @var $this \yii\web\View */
/* @var $content string */

use yii\helpers\Html;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;

AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>

<div class="wrap">
    <div class="container">
        <?= $content ?>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <p class="pull-left">© My Company <?= date('Y') ?></p>
        <p class="pull-right"><?= Yii::powered() ?></p>
    </div>
</footer>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>複製程式碼

首先要說的是,佈局其實就是檢視,一種特殊的檢視而已,所以我們明說佈局函式,實質在說檢視類View。

我就是我 $this

既然是一種特殊的檢視,所以佈局裡面的 $this 物件其實就是當前檢視本身,這在預設佈局的註釋裡已經說明。

/* @var $this \yii\web\View */
/* @var $content string */複製程式碼

所以我建議你在閱讀本文的時候,開啟yii\web\View原始碼同步進行。

寫啥是啥 $content

這是在佈局檔案裡除了 $this 外的第二個變數,我們都知道佈局就像一個容器一樣將基礎架構先畫出來,然後想用此結構的檢視直接使用就可以了,那麼 $content 就是使用此佈局的檢視自己的內容。

開山函式 beginPage 和 endPage

記住,所有的HTML我們都應該包含在 beginPage 和 endPage 函式之間,它們代表一個頁面的開始和結束。

之外它們還分別觸發了下面的兩個事件

View::EVENT_BEGIN_PAGE
View::EVENT_END_PAGE複製程式碼

如果你想統計檢視頁面內程式碼的渲染時間,可以在這兩個事件上做做手腳。當然,endPage的作用要更加大,後面會單獨拿出來說明。

資源在哪我說的算 head()

確切的說,該函式只是告訴了yii要將資原始檔(比如js和css)放到頁面的哪裡,一般它在head標籤內,如果你將它移到其他地方,你會發現將來頁面的js檔案和css檔案等也轉移了。

head有啥我來做 renderHeadHtml()

從名字你就可以知道,它負責將頭部的一些程式碼渲染出來,比如js和css等檔案的具體html標籤,具體放哪?那必須是放到head()函式裡指定的位置了,另外,這是一個protected型別方法,你不要想著能直接->就呼叫它,沒門,它僅僅為View類的其他方法服務。

beginBody 和 endBody

這兩個函式和 beginPage 和 endPage 有雷同的地方,就是做了兩個標記,代表body的開始和結束,作為位置標籤,另外也觸發了兩個事件

View::EVENT_BEGIN_BODY
View::EVENT_END_BODY複製程式碼

當然 endBody 和 endPage 一樣,還有其他職責,放到最後說,你先了解他們代表開始和結束,同時觸發事件即可。

中場總結

上面說了 head、beginBody、endBody 都具有標籤的作用,View為其設計了3個常量作為代表,分別如下

PH_HEAD // $this->head()
PH_BODY_BEGIN // $this->beginBody()
PH_BODY_END // $this->endBody複製程式碼

根據我們上面的瞭解,先畫一個圖出來,看看佈局的視覺化樣子。

// 我是圖
$this->beginPage()
- <html>
-- <head>
$this->head() // PH_HEAD
-- </head>
-- <body>
$this->beginBody() // PH_BODY_BEGIN
$content
$this->endBody() // PH_BODY_END
-- </body>
- </html>
$this->endPage()複製程式碼

renderBodyBeginHtml 和 renderBodyEndHtml 函式

上面我們知道有一個叫做 renderHeadHtml 方法負責往 PH_HEAD 位置放資原始檔,那麼PH_BODY_BEGIN和PH_BODY_END 也應該同類待遇,renderBodyBeginHtml和renderBodyEndHtml就是幹這個的。

而從程式碼來看 renderBodyBeginHtml 和 renderBodyEndHtml 做的事情和 renderHeadHtml 差不多,都是資源的具體程式碼話,你是否記得我們在兄弟連時候有一節( nai8.me/course-vide… )說過關於asset資源類位置的問題(指定資源在頁面的上部還是下部),對,renderBodyBeginHtml、renderBodyEndHtml 等就是做這個的。

我們分條說下

  • renderBodyBeginHtml渲染的是位置為 POS_BEGIN 的js檔案
  • renderBodyEndHtml渲染的是位置為 POS_END、POS_READY、POS_LOAD的js檔案
  • renderHeadHtml渲染的是位置為POS_HEAD的js檔案和所有css檔案(無位置功能)以及一些head的metaTags。

現在你明白了吧,到此刻,你知道了有三個函式負責三個位置的程式碼渲染,而這些渲染其實就是資源的程式碼實現。

再說endPage

到現在,萬事俱備,但是東風在哪裡?它就是endPage
看一部分endPage的原始碼我們

echo strtr($content, [
    self::PH_HEAD => $this->renderHeadHtml(),
    self::PH_BODY_BEGIN => $this->renderBodyBeginHtml(),
    self::PH_BODY_END => $this->renderBodyEndHtml($ajaxMode),
]);複製程式碼

endPage活生生的實現了程式碼和位置之間的替換,說白了就是字串替換。。。

當然,在View類裡還有一些小方法,比如registerJs()、clear()等等,阿北相信當你瞭解了佈局(檢視)形成的流程後,這些很容易看懂,如果還不懂,請留言此貼問。

最後一個例子

如果我們把最後相應給客戶的頁面比作一棟大樓。那麼看看角色的分類

  • 佈局 代表大樓圖紙(代表著一個框架)
  • 資源類 代表購物清單
  • View的三個render函式 代表具體的建築工人,採購資源類,並放到大樓裡。
  • endPage函式,就是售樓許可證,保證所有資源都到位。
  • 使用佈局的檢視 就是人,入駐大樓,沒有檢視的佈局都是紙老虎。

(完)

本文原創釋出於微信公眾號 北哥小報 , 嚴謹的原創技術文,Q群:171277552。

yii2 檢視(佈局)中各種函式總結報告及使用場景
微信掃碼可以關注

相關文章