时间戳

首页 > 技术文章 > Yii2 引入css和js文件

Yii2 引入css和js文件

meetuj 2019-08-29 12:21 原文

根据依赖，框架会先加载jquery.js,然后是yii.js,最后是视图加载的js。

在视图页面上，引入js、css的方式有以下两种：

1.以注册脚本方式

1.1 使用registerJs()、registerCss() 注册内联脚本：

<?php
$this->registerJs("
$(function () {
//为所欲为的写你想要写的js代码吧
$......
});
", \yii\web\View::POS_END);
?>

1.2 使用registerJsFile()、registerCssFile() 注册引入外部脚本文件：

<?php 
 $this->registerJsFile('@web/js/jquery-ui.custom.min.js',['depends'=>['app\assets\AppAsset']]);  
//$this->registerJsFile('@web/js/jquery-ui.custom.min.js',['depends'=>['app\assets\AppAsset'],'position'=>$this::POS_HEAD]);

//css定义一样  
$this->registerCssFile('@web/css/font-awesome.min.css',['depends'=>['app\assets\AppAsset']]);  
?>

我们强烈建议使用 asset bundles 来注册外部 JS 文件而非使用 registerJsFile() 来注册。 因为这些允许更好的灵活性和更精细的依赖配置。 此外，使用资源包允许您组合和压缩多个 JS 文件，这对于高流量网站来说是比较理想的方式。


——源自官方文档

1.3 使用jsFile()、cssFile()注册引入外部脚本文件：

<?= \yii\helpers\Html::cssFile('@web/css/index.css')?>
<?= \yii\helpers\Html::jsFile('@web/js/jquery.min.js')?>

1.4 直接写原生代码引入：

 <script src="js/nav.js"></script>

2.以注册资源包方式

2.1 在view层注册自定义资源包：

<?php
use app\assets\XXXXAsset;
AppAsset::register($this);  // $this 代表视图对象

?>

2.2 视图（或布局）使用全局CSS/JS，即在AppAsset类里载入js、css文件，再在view层中注册资源包：

<?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';
    //全局css 在这个添加css文件
    public $css = [
        'css/site.css',
        'css/base.css'
    ];
    //全局js  在这里添加js文件
    public $js = [
        'js/sliders.js'
    ];
    public $depends = [ //依赖包，没有可以不写
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',  
    ];
 
}

如在layout/main.php中注册AppAsset资源包（使用该模板的所有页面都会引用全局js、css文件）：

<?php
use app\assets\AppAsset;
AppAsset::register($this);
 
?>

2.3 在AppAsset类里添加了两个静态方法，再在view层加载外部js、css文件：

namespace backend\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 addScript($view, $jsfile) {  
        $view->registerJsFile($jsfile, [AppAsset::className(), "depends" => "backend\assets\AppAsset"]);  
    }  
    //定义按需加载css方法，注意加载顺序在最后  
    public static function addCss($view, $cssfile) {  
        $view->registerCssFile($cssfile, [AppAsset::className(), "depends" => "backend\assets\AppAsset"]);  
    }  
}

在view层载入外部js文件：

use backend\assets\AppAsset;
AppAsset::register($this);
//需要注意的是，如果引入的文件是相对路径加载，烦请记得路径前加上 Yii::$app->request->baseUrl, 否则在一定情况下将会加载失败。
AppAsset::addScript($this,Yii::$app->request->baseUrl."/css/main.js");
  • 我们先来说说添加的addScript和addCss有啥作用，意图是啥，上面说了，不建议在view层直接用$this->registerJsFile方法注册文件，这里呢，我们添加的addScript方法，以后view层直接调用这个方法对文件进行注册。

  • 那为啥这个就好了呢？好处是非常明显的，调用该方法避免了每次注册文件都要填写依赖关系，十分方便。
  • 其中需要说明的是，需要注册的文件都会在yii.js和bootstrap.js文件的后面，这也正是我们所需要的。

总结：

使用AssetBundle管理css样式及js脚本（2.1 和 2.2），资源包允许您组合和压缩多个 JS 文件，这对于高流量网站来说是比较理想的方式。(持续更新ing...)


官方文档：

https://www.yiiframework.com/doc/guide/2.0/zh-cn/structure-assets
https://www.yiiframework.com/doc/guide/2.0/zh-cn/output-client-scripts

参考地址：

https://blog.csdn.net/cs23405/article/details/46865027
http://www.manks.top/article/yii2_load_js_css_in_end
https://segmentfault.com/a/1190000003742452
https://www.php.cn/phpkj/yii/443034.html
https://www.yiichina.com/tutorial/405
https://www.yiichina.com/topic/7204

推荐阅读