yii2 视图加载js问题

awake720 的个人博客 / 0 / 0 / 创建于 4年前

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/bootstrap.css',
        'css/cesi.css?20201111',
        'css/bootstrap-select.min.css?r202012'

    ];
    public $js = [
        ['js/jquery-2.1.4.js'  ],
        ['js/bootstrap.min.js' ],
        ['js/echarts.min.js'  ],
        ['js/bootstrap-select.min.js' ]

    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset'
    ];

}

一般默认的 js 文件会在底部加载
这样的话会导致页面中 script 中 js 的错误

解决办法：
就是将 js 文件在试图头部进行展示

position=>\yii\web\View::POS_HEAD

public $jsOptions = [  
        'position' => \yii\web\View::POS_HEAD,   // 这是设置所有js放置的位置  
    ];

将这段代码放在 AppAsset.php 文件内部
或者

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/bootstrap.css',
        'css/cesi.css?20201111',
        'css/bootstrap-select.min.css?r202012'

    ];
    //可以调整js加载位置
    public $js = [
        ['js/jquery-2.1.4.js','position' => View::POS_HEAD   ],
        ['js/bootstrap.min.js','position' => View::POS_HEAD  ],
        ['js/echarts.min.js','position' => View::POS_HEAD  ],
        ['js/bootstrap-select.min.js','position' => View::POS_HEAD  ]

    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset'
    ];

}

在 View 类中进行定义的
POS_HEAD 头部
POS_BEGIN 主体开始位置
POS_END 意味着 JavaScript 代码块内封闭的 jQuery (document).ready ()`.
POS_READY
POS_LOAD 内部是用作占位符接收头部分的内容
POS_END 结束位置