天天看点

Yii 2 —— 资源管理(Assets)

参考文档:

Yii2.0对于CSS/JS 管理,使用AssetBundle资源包类。视图如何按需加载CSS/JS ?

在页面中使用预先定义好的资源包类,譬如:backend/assets/AppAsset.php,使用到的CSS/JS都放在资源包里。AppAsset.php代码:

class AppAsset extends AssetBundle

 {

     public $basePath = '@webroot';

     public $baseUrl = '@web';

     public $css = [

         'css/site.css',

     ];

     public $js = [

     ];

     public $depends = [

         'yii\web\YiiAsset',

         'yii\bootstrap\BootstrapAsset',

 }

说明:

$css:引入页面的CSS文件

$js:引入页面的JS文件

$depends:引入依赖的前端库

在加载时,$depends中的前端库先加载,$css和$js中的文件后加载。一般来说,CSS放在<head></head>中加载,JS在<body></body>的底部加载。CSS/JS文件的路径,存放在$basePath参数所指定的目录下,$css/$js参数指定的是相对路径。在$depends中配置的依赖库会先加载。

使用这种方式管理前端资源,感觉比Yii 1中的方式清爽很多,使用时,在view的文件中增加代码:

<?php

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

 /* @var $content string */

 use backend\assets\AppAsset;

 use yii\helpers\Html;

 use yii\bootstrap\Nav;

 use yii\bootstrap\NavBar;

 use yii\widgets\Breadcrumbs;

 use common\widgets\Alert;

 AppAsset::register($this);

 ?>

在Yii的backend/web和front/web目录下,均有assets子目录,下面有一些貌似随机数字和字符组成的目录,里面放的是一些前端库的代码,譬如jquery、bootstrap等,这些子目录在应用最开始运行之前是没有的,只是访问了某些页面后就有了,这是怎么回事呢?

这是因为一些前端库保存的目录,在web下是不能直接被访问的,为了保证页面中可以正常使用,Yii会将这些库的文件拷贝到assets目录下。

哪些前端库会被拷贝呢?

这个取决于资源包的php文件中是否配置了$sourcePath参数,只有配置了$sourcePath参数,并且没有配置$basePath和$baseUrl的,在执行时前端库就会被拷贝到assets目录下,并且以源目录的hash值建立子目录。

资源更新了怎么办?

在AssetManager->hash()函数中,它是根据源目录/文件名+更新时间做hash的,所以,如果更新时间发生了变化,就会计算出新的hash值,而新的hash值所表示的目录在assets目录下不存在,因此就会建立新的目录,并且拷贝更新后的资源文件到新的目录下。

这样做有几个问题:

1、assets目录下的子目录可能会越来越多,存在很多垃圾目录;

解决办法:定期清除assets下的子目录。

2、更新源目录下子目录内的资源,源目录的更新时间不会改变,导致资源不会被发布;

解决办法:发布后清除assets下的子目录。

在Yii 2中,常用的前端库:

版本号

资源包

实际资源路径

bootstrap

3.3.7

BootstrapAsset.php

vendor\bower\bootstrap\dist

jquery

2.2.4

JqueryAsset

vendor\bower\jquery\dist

注:BootstrapAsset中,只引入了bootstrap.css,没有引入bootstrap.js,估计是为了性能吧。

本文转自 tywali 51CTO博客,原文链接:http://blog.51cto.com/lancelot/1871256,如需转载请自行联系原作者