Yii2 按需加载js或css

最新推荐文章于 2023-03-24 10:44:40 发布

原创最新推荐文章于 2023-03-24 10:44:40 发布 · 771 阅读

0 ·

CC 4.0 BY-SA版权

Yii2 专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何在Yii框架中使用数据块注册JS代码，并实现JS文件和CSS文件的按需加载。通过示例代码展示了直接在视图中添加JS交互功能的方法，以及在对应资产文件中定义函数来动态加载外部JS和CSS资源的技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在页面中单独写JS(使用数据块)

<div id="mybutton">点我弹出OK</div>  

<?php $this->beginBlock('test') ?>  
    $(function($) {  
      $('#mybutton').click(function() {  
        alert('OK');  
      });  
    });
    //或
 $('#mybutton').click(function() {  
    alert('OK');  
 });      
<?php $this->endBlock() ?>  
<?php $this->registerJs($this->blocks['test'], \yii\web\View::POS_END); ?>

2、在对应的/assets/AppAsset.php文件中新增以下函数

/**
     * 定义按需加载JS方法，默认加载在最后
     * @param $view
     * @param $jsfile
     * @param string $type
     */
    public static function addScript($view, $jsfile,$type=View::POS_END) {
        $position = [
            AppAsset::className(),
            'depends' => 'layui\assets\AppAsset',
        ];
        if ($type == View::POS_HEAD){
            $position['position'] = View::POS_HEAD;
        }

        $view->registerJsFile($jsfile,$position);
    }

   //定义按需加载css方法，注意加载顺序在最后
    public static function addCss($view, $cssfile) {
        $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'layui\assets\AppAsset']);
    }

//在视图文件引用：
use \**\assets\AppAsset;

AppAsset::addScript($this, '@web/modules/table/renderjs.js?t=' . time());