Yii 2 —— 资源管理（Assets）

最新推荐文章于 2023-01-30 18:21:57 发布

weixin_33826609

最新推荐文章于 2023-01-30 18:21:57 发布

阅读量179

点赞数

文章标签：前端 php javascript ViewUI

本文链接：https://blog.csdn.net/weixin_33826609/article/details/85077516

版权

1.1 资源管理（Assets）

1.1.1 基本说明

参考文档：

1、http://www.yiichina.com/tutorial/399

2、http://yii2.techbrood.com/guide-assets.html

3、http://www.yiifans.com/yii2/guide/structure-assets.html

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);
?>

1.1.2 资源发布

在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下的子目录。

1.1.3 常用前端库

在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，估计是为了性能吧。

weixin_33826609

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Yii 2 —— 资源管理（Assets）

1.1 资源管理（Assets）1.1.1 基本说明参考文档：1、http://www.yiichina.com/tutorial/3992、http://yii2.techbrood.com/guide-assets.html3、http://www.yiifans.com/yii2/guide/structure-assets.html Yii2.0对于CSS/JS 管理，使用AssetB...
复制链接

扫一扫