yii2前端资源发布组件（Assets）（一、初步实现）

之前我们写的商城，我们把所有的前端模块通通放在了web的assets目录下，加载资源的时候回加载所有资源。无疑这样网页加载速度会大大减慢

相关概念

资源

我们页面所需要的css,js,图片，或者视频等等

资源包

在渲染页面时，可以将所需要的资源假如资源包，在页面中注册该资源包即可渲染对应的资源

定义资源包

namespace backend\assets;

use yii\web\AssetBundle;

/** * Main backend application asset bundle. */
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',
    ];
}

这里就是我们的yii高级模板中自定义的一个资源包。

我们可以看到，我们的AppAsset继承自我们的AssetBundle类

我们来看一看AssetBundle中有什么属性

@设置我们的资源目录的路径，当我们资源位于服务器目录外时设置此属性，如不设置该属性则表示资源路径位于basePath下
$sourcePath  

@设置我们WEB可以访问的资源路径，如果设置了sourcePath，该属性将会被覆盖
$basePath

@web访问资源文件的URL地址
$baseUrl

@设置我们加载资源所依赖的资源包（如boostarp依赖jquery）
$depends[]

@js文件
$js[]
@css文件
$css[]

@加载时所用到的选项
$jsOptions[]
$cssOptions[]

@指定我们sourcePath下的发布文件
$publishOptions[]

使用资源包

我们介绍了之后再来看一看，刚才的例子代码

namespace backend\assets;

use yii\web\AssetBundle;


class AppAsset extends AssetBundle {
    public $basePath = '@webroot'; //定义了我们资源路径为，@webroot即当前web服务器路径
    public $baseUrl = '@web';//设定我们的url为当前url
    public $css = [
        'css/site.css',//添加了basePath/css/site.css文件
    ];
    public $js = [//js文件为空
    ];
    public $depends = [//指定我们上面的css,js所依赖的资源包
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

在这写了之后我们在view视图里面调用它。

use backend/assets/AppAsset;
AppAssets::register($this);//给该视图注册资源包
?>
 $this->beginPage()?>

    ...
    ...
     $this->head();?>//输出我们的资源
    ....
    ....
 
     $this->beginBody();?>
    ...
    ...
     $this->endBody();?>
 
    ...
    ...

  $this->endPage()?>
?>

这样就初步实现了我们的前端资源发布