yii2 assets 资源管理

我们在写前端代码的时候，每个页面有调用相同的js和css代码，也可能每个页面有自己单独的js和css代码。yii2的assets无何实现即能一次调用统一的js,css，又能注册每个单独页面的js，css? 同时还能灵活的设置js的位置，因为有些js必须在头部调用？Yii的实现方法如下：（只是这样实现的目的是什么？仅仅是可以实现版本控制？搞得这么麻烦）

一、在单独页面中调用js，css的原生代码（各种优化后的代码不灵活，还不如yii2原生的代码灵活，可以设置依赖，可以设置位置）：

$this->registerJsFile(Yii::$app->request->baseUrl."/css/jump.js",["depends"=>["app\assets\BaiyeappAsset"], "position"=> $this::POS_HEAD])

二、优化操作：

Assets.php中设置代码：

<?php


namespace app\assets;

use app\common\services\UrlService;
use yii\web\AssetBundle;

/**
 * @author Qiang Xue <[email protected]>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
    ];
    public $js = [
    ];
    public $jsOptions = [
        'position' => \yii\web\View::POS_HEAD
    ];
    public $cssOptions = [
        'position' => \yii\web\View::POS_HEAD
    ];

    //定义所有页面的共同调用代码
	public function registerAssetFiles( $view ){
		//加一个版本号,目的 ： 是浏览器获取最新的css 和 js 文件
		$release_version = defined("RELEASE_VERSION")?RELEASE_VERSION:time();
		$this->css = [

			UrlService::buildWwwUrl( "assets/css/style_baiye.css",[ 'ver' => $release_version ] )
		];
		$this->js = [

            UrlService::buildWwwUrl( "assets/js/index.js"),

		];
		parent::registerAssetFiles( $view );
	}

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

在布局页面中：

<?php

/* @var $this \yii\web\View */
/* @var $content string */

use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;

AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>

<div class="wrap">
    <?php
    NavBar::begin([
        'brandLabel' => 'My Company',
        'brandUrl' => Yii::$app->homeUrl,
        'options' => [
            'class' => 'navbar-inverse navbar-fixed-top',
        ],
    ]);
    echo Nav::widget([
        'options' => ['class' => 'navbar-nav navbar-right'],
        'items' => [
            ['label' => 'Home', 'url' => ['/site/index']],
            ['label' => 'About', 'url' => ['/site/about']],
            ['label' => 'Contact', 'url' => ['/site/contact']],
            Yii::$app->user->isGuest ? (
                ['label' => 'Login', 'url' => ['/site/login']]
            ) : (
                '<li>'
                . Html::beginForm(['/site/logout'], 'post')
                . Html::submitButton(
                    'Logout (' . Yii::$app->user->identity->username . ')',
                    ['class' => 'btn btn-link']
                )
                . Html::endForm()
                . '</li>'
            )
        ],
    ]);
    NavBar::end();
    ?>

    <div class="container">
        <?= Breadcrumbs::widget([
            'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
        ]) ?>
        <?= $content ?>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <p class="pull-left">&copy; My Company <?= date('Y') ?></p>

        <p class="pull-right"><?= Yii::powered() ?></p>
    </div>
</footer>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

在调用的页面中：

<?php
use app\assets\AppAsset;

BaiyeappAsset::addJs($this,Yii::$app->request->baseUrl."assets/js/jump.js", $this::POS_HEAD);
?>

yii2 assets 资源管理

猜你喜欢