yii2.0 如何按需加载并管理CSS样式及JS脚本 [ 2.0 版本 ]
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
/**
* @author wuzhc 2015-10-26
*/
class JinRongAsset extends AssetBundle
{
public $basePath = '@webroot'; //表示正在运行的应用的入口文件 index.php 所在的目录，一般是 @app/web；
public $baseUrl = '@web'; //URL别名，表示当前应用的根URL，主要用于前端
public $css = [
'public/jinrong/templates/150714/style.css',
'public/css/bootstrap.min.css',
];
public $js = [
'public/jinrong/js/jquery.min.js',
'public/jinrong/js/comm.js',
'public/jinrong/js/zh-cn/lang.js',
'public/jinrong/js/script.js'
];
public $depends = [
'yii\web\YiiAsset',
];
//定义按需加载JS方法，注意加载顺序在最后
public static function addScript($view, $jsfile) {
$view->registerJsFile($jsfile, [AppAsset::className()]);
}
//定义按需加载css方法，注意加载顺序在最后
public static function addCss($view, $cssfile) {
$view->registerCssFile($cssfile, [AppAsset::className()]);
}
}
在视图中使用：
<?php use frontend\assets\JinRongAsset; JinRongAsset::register($this); ?> <?php $this->beginPage() ?> <html> <head> <?php $this->head() ?> //js和css插入的地方 </head> <body> <?php $this->beginBody() ?> ....... <?php $this->endBody() ?> </body> </html> <?php $this->endPage() ?>
以下内容@link http://www.yiichina.com/tutorial/399
(注：以下为Yii2.0高级应用测试)
Yii2.0对于CSS/JS 管理，使用AssetBundle资源包类。
视图如何按需加载CSS/JS ?
资源包定义：
backend/assets/AppAsset.php
namespace backend\assets; use yii\web\AssetBundle; /** * @author chan <[email protected]> * @since 2.0 */ class AppAsset extends AssetBundle { public $basePath = '@webroot'; public $baseUrl = '@web'; //全局CSS public $css = [ 'css/animate.css', 'css/style.min.css', ]; //全局JS public $js = [ 'js/jquery-2.1.1.js' ]; //依赖关系 public $depends = [ 'yii\web\YiiAsset', 'yii\bootstrap\BootstrapAsset', ]; //定义按需加载JS方法，注意加载顺序在最后 public static function addScript($view, $jsfile) { $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'api\assets\AppAsset']); } //定义按需加载css方法，注意加载顺序在最后 public static function addCss($view, $cssfile) { $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'api\assets\AppAsset']); } }
视图中如何使用：
use yii\helpers\Html; use backend\assets\AppAsset; use backend\widgets\Alert; /* @var $this \yii\web\View */ /* @var $content string */ AppAsset::register($this);
查看源文件，看清CSS和JS的加载顺序 
可以看出以此顺序为：依赖关系 -> 自定义全局CSS/JS
如果，某个视图需要单独引入一个CSS/JS，并且，在页面中还要写些CSS/JS，该如何做？
1，在页面中单独写样式：
$cssString = ".gray-bg{color:red;}";
$this->registerCss($cssString);
2，在页面中单独写JS(使用数据块)
<div id="mybutton">点我弹出OK</div>
<?php $this->beginBlock('test') ?>
$(function($) {
$('#mybutton').click(function() {
alert('OK');
});
});
<?php $this->endBlock() ?>
<?php $this->registerJs($this->blocks['test'], \yii\web\View::POS_END); ?>
在视图中引入不是定义在全局里的CSS或JS。
分别有两种方法：
方法1，在资源包管理器里面定义一个方法，然后在视图中注册即可(推荐使用这种)
如上面代码己定义：
//定义按需加载JS方法，注意加载顺序在最后 public static function addScript($view, $jsfile) {
$view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'api\assets\AppAsset']);
}
视图中使用如下：
AppAsset::register($this); //只在该视图中使用非全局的jui AppAsset::addScript($this,'@web/js/jquery-ui.custom.min.js'); //AppAsset::addCss($this,'@web/css/font-awesome/css/font-awesome.min.css');
查看下源码，特别的注意下，加载的顺序，是我们想要的结果 
此外注意：在上面的addScript方法中，如果没有 ’depends‘=>’xxx‘ ,此处加载的顺序将会颠倒。
方法2，不需要在资源包管理器中定义方法，只要在视图页面直接引入即可
AppAsset::register($this);
//css定义一样 $this->registerCssFile('@web/css/font-awesome.min.css',['depends'=>['api\assets\AppAsset']]);
$this->registerJsFile('@web/js/jquery-ui.custom.min.js',['depends'=>['api\assets\AppAsset']]);
//$this->registerJsFile('@web/js/jquery-ui.custom.min.js',['depends'=>['api\assets\AppAsset'],'position'=>$this::POS_HEAD]);
//以上定义两种有点区别，见下图
加载在body区
加载在head中
博客源文地址：
http://blog.csdn.net/maclechan/article/details/45803821
(源创)