yii2框架-yii2的asset资源包(十一)

一、资源包定义
Yii2对于CSS/JS 管理，使用AssetBundle资源包类。
在basic/assets下创建如下：
app/assets/AppAsset.php

代码：

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

namespace app\assets;

use yii\web\AssetBundle;

/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
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',
    ];

    //定义按需加载JS方法，注意加载顺序在最后  
    public static function addJs($view, $jsfile) { 
        $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'app\assets\AppAsset','position'=>$view::POS_END]);  
    }  
      
    //定义按需加载css方法，注意加载顺序在最后  
    public static function addCss($view, $cssfile) {  
        $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'app\assets\AppAsset','position'=>$view::POS_END]);  
    }

    //将需要加载的文件已数组聚合后在加载
    public static function addJsArr($view,$arr = null) {
        if(!is_array($arr)) {
            throw new \yii\base\InvalidConfigException('the seconed params must be array type!');
            return ;
        }
        foreach ($arr as $jsfile) {
           $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'app\assets\AppAsset','position'=>$view::POS_END]); 
        }
    }

    //将需要加载的文件已数组聚合后在加载
    public static function addCssArr($view,$arr = null) {
        if(!is_array($arr)) {
            throw new \yii\base\InvalidConfigException('the seconed params must be array type!');
            return ;
        }
        foreach ($arr as $cssfile) {
           $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'app\assets\AppAsset','position'=>$view::POS_END]); 
        }
    }      
}</span>

二、视图使用：

1. 视图（或布局）使用全局CSS/JS
一般在layout的布局文件的使用

AppAsset::register($this);

加载顺序为：先加载需要的依赖文件 -> 再加载自定义全局CSS/JS
如果，某个视图需要单独引入一个CSS/JS，并且，在页面中还要写些CSS/JS，该如何做？

2. 在页面中单独写样式

$cssString = ".gray-bg{color:red;}";  
$this->registerCss($cssString);

3. 在页面中单独写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); ?>  

或者
<?php
$this->registerJs(
   '$("document").ready(function(){ 
        $("#login-form").validate({
            errorElement : "small", 
            errorClass : "error",
            rules: {
                     "AgNav[nav_cn]": {
                         required: true,
                     },
            },
            messages:{
                   "AgNav[nav_cn]" : {  
                        required : "此字段不能为空.",
                    },
            }
        });
    });'
);
?></span>

4.视图中引入CSS/JS文件

然后再说下在视图中如何引入一个CSS/JS文件（不是定义在全局里的CSS或JS）
分别有两种方法：

方法1
在资源包管理器里面定义一个方法，然后在视图中注册即可(推荐使用这种)
如上面代码己定义：

如上面代码己定义：

//定义按需加载JS方法，注意加载顺序在最后  
public static function addScript($view, $jsfile) {  
    $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']);  
}

//只在该视图中使用非全局的jui,一般代码放在view文件的后面 
AppAsset::addScript($this,'@web/js/jquery-ui.custom.min.js');

此外注意：在上面的addScript方法中，如果没有 ’depends‘=>’xxx‘ ,此处加载的顺序将会颠倒。