我们在写前端代码的时候,每个页面有调用相同的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 <qiang.xue@gmail.com>
* @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">© 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);
?>