操作客戶端腳本（Working with Client Scripts）

2018-02-24 15:40 更新

客戶端腳本使用

注意: 此部分應(yīng)用于開發(fā)環(huán)境

注冊腳本

你可以使用 yii\web\View 對象注冊腳本。這里有兩個專門的方法： （1）yii\web\View::registerJs() 用于內(nèi)聯(lián)腳本。 （2）yii\web\View::registerJsFile() 用于注冊引入外部腳本文件。 內(nèi)聯(lián)腳本通常用于配置和動態(tài)生成代碼。 這個方法的使用可以像下面這樣：

$this->registerJs("var options = ".json_encode($options).";", View::POS_END, 'my-options');

第一個參數(shù)是我們想插入的實(shí)際JS代碼。 第二個參數(shù)確定了JS代碼插入頁面的位置?？捎玫闹等缦拢?/p>

  • yii\web\View::POS_HEAD 用在HEAD部分。
  • yii\web\View::POS_BEGIN 用在?<body>?標(biāo)簽的右邊。
  • yii\web\View::POS_END 用在?</body>?標(biāo)簽的左邊。
  • yii\web\View::POS_READY 為了在?ready?事件中執(zhí)行代碼，這里將自動注冊yii\web\JqueryAsset。
  • yii\web\View::POS_LOAD 為了在?load?事件中執(zhí)行代碼，這里將自動注冊yii\web\JqueryAsset。

最后一個參數(shù)是一個唯一的腳本ID，主要是用于標(biāo)識一段代碼塊，在添加一段新的代碼塊時，如果當(dāng)前頁面已經(jīng)存在同樣ID代碼塊時，那么將會被新的替換。 如果你不傳這個參數(shù)，JS代碼本身將會作為ID來使用。

外部腳本的引入使用像下面這樣：

$this->registerJsFile('http://example.com/js/main.js', ['depends' => [\yii\web\JqueryAsset::className()]]);

yii\web\View::registerJsFile() 中參數(shù)的使用與 yii\web\View::registerCssFile() 中的參數(shù)使用類似。 在上面的例子中,我們注冊了main.js?文件，并且依賴于?JqueryAsset?類。這意味著?main.js?文件將被添加在?jquery.js?的后面。 如果沒有這個依賴規(guī)范的話，main.js和?jquery.js?兩者之間的順序?qū)⒉粫欢x。

和 yii\web\View::registerCssFile() 一樣，我們強(qiáng)烈建議您使用?asset bundles?來注冊外部JS文件，而非使用 yii\web\View::registerJsFile() 來注冊。

注冊資源包

正如前面所提到的，我們推薦優(yōu)先使用資源包而非直接使用CSS和JavaScript。 你可以在資源管理器?asset manager?部分查看更多細(xì)節(jié)。 至于怎樣使用已經(jīng)定義的資源包，這很簡單：

\frontend\assets\AppAsset::register($this);

注冊 CSS

你可以使用 yii\web\View::registerCss() 或者 yii\web\View::registerCssFile() 來注冊CSS。 前者是注冊一段CSS代碼塊，而后者則是注冊引入外部的CSS文件，例如：

$this->registerCss("body { background: #f00; }");

上面的代碼執(zhí)行結(jié)果相當(dāng)于在頁面頭部中添加了下面的代碼：

<style>
body { background: #f00; }
</style>

如果你想指定樣式標(biāo)記的附加屬性，通過一個名值對的數(shù)組添加到第三個參數(shù)。 如果你需要確保只有一個單樣式標(biāo)簽，則需要使用第四個參數(shù)作為meta標(biāo)簽的描述。

$this->registerCssFile("http://example.com/css/themes/black-and-white.css", [
    'depends' => [BootstrapAsset::className()],
    'media' => 'print',
], 'css-print-theme');

上面的代碼將在頁面的頭部添加一個link引入CSS文件。

  • 第一個參數(shù)指明被注冊的CSS文件。
  • 第二個參數(shù)指明?<link>?標(biāo)簽的HTML屬性，選項(xiàng)?depends?是專門處理指明CSS文件依賴于哪個資源包。在這種情況下，依賴資源包就是 yii\bootstrap\BootstrapAsset。這意味著CSS文件將被添加在 yii\bootstrap\BootstrapAsset 之后。
  • 最后一個參數(shù)指明一個ID來標(biāo)識這個CSS文件。假如這個參數(shù)未傳，CSS文件的URL將被作為ID來替代。

我們強(qiáng)烈建議使用?asset bundles?來注冊外部CSS文件， 而非使用 yii\web\View::registerCssFile() 來注冊。 使用資源包允許你合并并且壓縮多個CSS文件，對于高流量的網(wǎng)站來說，這是比較理想的方式。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號