使用yii2统一加载方法加载js或者css

定义加载公共的CSS或JS资源包

在basic版本中,有assets资源包,下面有AppAsset.php文件,该文件是加载公共的资源包,资源包指定为继承yii\web\AssetBundle的PHP类。

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",
     ];
    //注册公共的资源包
    public function registerAssetFiles($view)
    {
        //添加版本号
        $release = 1.0;
        $buildUrl = new UrlSrevice();
        $this->css = [
            $buildUrl->buildUrl(["/bootstrap/css/bootstrap.css"], ['version'=>$release]),
            $buildUrl->buildUrl(["/css/app.css"],  ['version'=>$release]),
        ];
        $this->js = [
            $buildUrl->buildUrl(["/jQuery/jquery-3.2.0.min.js"],  ['version'=>$release]),
            $buildUrl->buildUrl(["/bootstrap/js/bootstrap.js"],  ['version'=>$release])
        ];
        parent::registerAssetFiles($view);
    }
}

如上AppAsset 类指定资源文件放在 @webroot 目录下,对应的URL为 @web,资源包中包含一个CSS文件 css/site.css,没有JavaScript文件, 依赖其他两个包 yii\web\YiiAsset 和 yii\bootstrap\BootstrapAsset,

依赖关系:当页面加载注册多个资源包时,这时就得注意加载的顺序,例如jQuery与bootstrap,就存在依赖关系,必须先加载jQuery,否则bootstrap里面的js不起用。

 

页面单独的加载某个资源

注册代码块

public void registerJs ( $js, $position = self::POS_READY, $key = null )

public void registerCss ( $css, $options = [], $key = null )

注册一个资源文件

public void registerCssFile ( $url, $options = [], $key = null )

public void registerJsFile ( $url, $options = [], $key = null )

//示例
<?php
\Yii::$app->getView()->registerJsFile('/js/access/access.js', ['depends'=>\app\assets\AppAsset::className()]);
?>
 

模板的开头

//自动加载公共资源
AppAsset::register($this);

 

自定义加载私有资源方法

<?php
/**
 * Created by PhpStorm.
 * User: ASUS
 * Date: 2017-05-12
 * Time: 16:51
 */

namespace app\services;


class ResourceService
{
    //使用yii统一加载方法 加载js 或者css
    public static function includeAppStatic($type,$path,$depend)
    {
        //添加版本好解决流浪器缓存问题
        $release_version = defined("RELEASE_VERSION") ? RELEASE_VERSION : "1.1";
        if(stripos($path,"?") !==false){
            $path = $path."&v={$release_version}";
        }else{
             $path = $path."?v={$release_version}";
        }
        if($type =="css"){
            \Yii::$app->getView()->registerCssFile($path,['depends'=>$depend]);
        }else{
            \Yii::$app->getView()->registerJsFile($path,['depends'=>$depend]);
        }

    }
    //引入js业务文件
    public static function includeAppJsStatic($path, $depend)
    {
        self::includeAppStatic('js', $path, $depend);
    }
    //引入css业务文件
    public static  function  includeAppCssStatis($path,$depend){
        self::includeAppStatic('css',$path,$depend);
    }
}

在相应的页面进行调用,加载资源

<?php

\app\services\ResourceService::includeAppJsStatic('/js/access/access.js', \app\assets\AppAsset::className());
?>

参考:

http://www.yiichina.com/doc/api/2.0/yii-web-view

http://www.yiichina.com/doc/guide/2.0/structure-assets

http://www.yiiframework.com/doc-2.0/guide-structure-assets.html

0 条评论
发表一条评论