yii2.0 Asset

一.定义资源包类

Yii2 对于css、js管理，使用AssetBundle资源包类。创建如下：

<?php

/**

 *  @link  http://www.yiiframework.com/

  *  @copyright  Copyright (c) 2008 Yii Software LLC

 *  @license  http://www.yiiframework.com/license/

  */

namespace  mesadmin\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' ;

    //全局css

    public  $css  = [

        'css/site.css' ,

        'css/global.css' ,

    ];

    //全局js

    public  $js  = [

    ];

    //依赖关系

    public  $depends  = [

        'yii\web\YiiAsset' ,

        'yii\bootstrap\BootstrapAsset' ,

    ];

    //定义按需加载JS方法，注意加载顺序在最后

    public static function  addScript( $view ,  $jsfile ){

        $view ->registerJsFile( $jsfile ,[ 'depends' => 'mesadmin\assets\AppAsset' ]);

    }

    //定义按需加载css方法，注意加载顺序在最后

    public static function  addCss( $view ,  $cssfile ){

        $view ->registerCssFile( $cssfile , [ 'depends' => 'mesadmin\assets\AppAsset' ]);

    }

}

二.视图中使用

1.视图（或布局）使用全局css/js

AppAsset::register($this);

查看css和js的加载顺序： 依赖关系 》自定义全局css/js.

2.在页面中单独写样式

$cssString = “.gray-bg{color:red;}”;

$this->registerCss( $cssString );

3.在页面中单独写js

$js  =  <<<JS

$ (function(){

    alert ('here');

});

JS ;

$this ->registerJs( $js );

4.视图中引入css/js文件

方法一：在视图页面直接引入即可

AppAsset:: register ( $this );

$this ->registerCssFile( "/css/bootstrap-datetimepicker.min.css" );

$this ->registerCssFile( "/css/custom.css" );

$this ->registerJsFile( "/js/bootstrap-datetimepicker.min.js" , [ 'depends'  =>  'mesadmin\assets\AppAsset' ]);

方法二：在资源包中定义一个方法，然后在视图中注册即可（推荐使用）

  //定义按需加载JS方法，注意加载顺序在最后

    public static function  addScript( $view ,  $jsfile ){

        $view ->registerJsFile( $jsfile ,[ 'depends' => 'mesadmin\assets\AppAsset' ]);

    }

在视图中使用如下

AppAsset:: register ( $this );

//只在该视图中使用非全局的jui   

AppAsset:: addScript ( $this , '@web/js/jquery-ui.custom.min.js' );