视图 - 输出资源 ¶

要点速读
尝试
注意点

作者：KK
发表日期：2018.8.6

要点速读 ¶

这里所指的资源指的是 js、css 这些。
使用注册资源特性需要在layout里几个位置执行$this->beginPage()和$this->endPage()这些方法。

尝试 ¶

普通的HTML编写中，直接写<script src="..."></script>和<link rel="stylesheet" href="..."/>来引用 js 和 css，没错的确可以加载，但在 Yii2 框架里面你已经不需要这样引用脚本和样式了，这会让你以更智能的方式部署这些引用。

接下来我们开一个控制器、模板渲染一下试试。

新建一个测试 layout

路径是views/layout/xxx.php，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><?php echo $this->title; ?> - 汽车网站<?php $this->head(); //注意：输出head的东西 ?>
</head>
<body>
<?php $this->beginBody(); //注意：开始输出Body ?>
<header>页眉<?php echo $content; ?>
<footer>页脚<?php $this->endBody(); //注意：结束输出Body ?>
</body>
</html>
<?php $this->endPage(); //注意：结束输出页面 ?>

新建一个测试模板

路径是views/site/test.php，代码如下：

<?php
$this->title = '主题列表';

$this->registerJsFile('/xx/yy/jquery.js', [
	'position' => yii\web\View::POS_HEAD,
]);
$this->registerJsFile('/aa/bb/datetime-picker.js');
$this->registerCssFile('/aa/bb/datetime-picker.css');
?>
页面内容

开个测试的控制器方法，代码如下：

public function actionTest(){
	$this->layout = 'xxx';
	return $this->render('/site/test');
}

然后运行后输出如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>主题列表 - 汽车网站</title>
	<link href="/aa/bb/datetime-picker.css" rel="stylesheet">
<script src="/xx/yy/jquery.js"></script></head>
<body>
<header>页眉</header>
<div class="pageMainContent">页面内容</div>
<footer>页脚</footer>
<script src="/aa/bb/datetime-picker.js"></script></body>
</html>

其中你注意script标签和link标签，它是自动冒出来的，只需要执行registerJsFile和registerCssFile这样的方法就行了。

默认情况下，registerCssFile注册的 JS 文件都会输出在head标签里。
默认情况下，registerJsFile注册的 JS 文件都会输出在body结束之前的底部。
如果需要registerJsFile注册的 JS 文件输出在head标签里，则需要加第2个参数，声明position为顶部（自己看 yii\web\View 这个类的POS开头的常量）。

注意点 ¶

为什么 head 标签结束之前的地方会多出 css 和 js 文件输出呢？——因为我们在那里执行了$this->head()
为什么 body 标签结束之前的地方会多出 js 文件的输出呢？——没错又是因为我们在那里执行了$this->endBody()

关于它如何具体实现的细节，那是进阶内容，但这里你要知道的基础是：资源的注册和输出需要在 layout 里对应的地方执行$this->beginPage()、$this->head()、$this->beginBody()、$this->endBody()和$this->endPage()。