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

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

相关概念
- 资源
- 资源包
定义资源包
使用资源包

定义资源包

<?phpnamespace 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[]

使用资源包

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

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

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

<?php
use backend/assets/AppAsset;
AppAssets::register($this);//给该视图注册资源包
?>
<?php $this->beginPage()?>
<html>......<?php $this->head();?>//输出我们的资源........<body><?php $this->beginBody();?>......<?php $this->endBody();?></body>......
</html><?php $this->endPage()?>
?>

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

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

Yii2 前端资源使用
YII2 前端资源定义资源包 <?phpnamespace app\assets;use yii\web\AssetBundle;class AppAsset extends AssetBun ...
YII2前端资源Assets
在手册里面我们看到如下的解释也就是说在我们的应用(高级模版在frontend/backend)下面的assets目录下定义的又一个文件叫做 AppAsset.php在这个文件里面你可以定义你的js或 ...
nginx 发布前端资源的缓存方案
nginx 发布前端资源的缓存方案前言对于前端开发者来说,最头疼的事情莫过于.当你兴冲冲的给项目打包以后,上传到 nginx 等静态资源服务器发布以后,自己本地验证没问题,以为万事大吉,结果测试人 ...
前端资源整理 - 订阅、工具等
取自我的GITHUB 的 fe-store-house repo,欢迎 PR,欢迎 STAR.原 repo 不定期更新,此文可能断更. 断更了一年多,重新更新一下,似乎 sfgg 的文章渲染中 gf ...
2017年3月份前端资源分享
平日学习接触过的网站积累,以每月的形式发布.2017年以前看这个网址:http://www.kancloud.cn/jsfron... 03月份前端资源分享 1. Javascript 1754535 ...
史上最全的前端资源汇总（下）
56. 表格 Grid 表格 Grid 地址 facebook表格 http://facebook.github.io/fixed-data-table 类似于Excel编辑表格-handsontab ...
最全前端资源---快过来最新鲜的资源这里都有
如果您阅读之后,感觉有缺失:麻烦您告诉我我进行补充.谢谢综合类综合类地址前端知识体系前端知识体系 - naniJser - 博客园前端知识结构 https://github.com/Ja ...
前端新思路：组件即函数和Serverless SSR实践
导读:在今天,对于 Node.js 运维和高并发依然是很有挑战的,为了提效,将架构演进为页面即服务,可是粒度还不够,借着云原生和 Serverless 大潮,无运维,轻松扩展,对前端是极大的诱惑.那么 ...
转载最全前端资源汇总
一.概要这份汇总整理,很程度上参考了GitHub最全前端资源汇总:云集前端教程.开发资源.免费书籍.手册规范.求职面试等等,旨在为前端学习 & 技能提升提供方便.当然,并不期望这成为一个前端 ...

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

相关概念

资源

资源包

定义资源包

使用资源包

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

最新文章

热门文章