Question

我正在编写一个用于引导崩溃的小型JS库。我有一个问题：当使用Yii2 Collapse小部件生成页面时，在<body>的最后写了这样的内容：

jQuery(function ($) {
    jQuery('#w0').collapse();
    jQuery('#w1').collapse();
    jQuery('#w2').collapse();
    jQuery('#w3').collapse();
    jQuery('#w4').collapse();
});

发生这种情况是因为run小部件的方法Collapse包含以下代码：

public function run()
    {
        //Method from BootstrapWidgetTrait
        $this->registerPlugin('collapse');
        return implode("\n", [
            Html::beginTag('div', $this->options),
            $this->renderItems(),
            Html::endTag('div')
        ]) . "\n";
    }

    //Code from BootstrapWidgetTrait
    protected function registerPlugin($name)
    {
        $view = $this->getView();

        BootstrapPluginAsset::register($view);

        $id = $this->options['id'];

        if ($this->clientOptions !== false) {
            $options = empty($this->clientOptions) ? '' : Json::htmlEncode($this->clientOptions);
            $js = "jQuery('#$id').$name($options);";
            $view->registerJs($js);
        }

        $this->registerClientEvents();
    }

这会影响我的图书馆的运作。
如果我使用$this->registerJsFile()注册我的js库，则该代码将高于使用$this->registerJs()注册的代码。

当然，我也可以使用$this->registerJs()方法并将JS代码注册在初始化小部件时创建的脚本的末尾，但是我认为这种方法看起来很糟糕。关于如何更正确地执行此操作的任何想法？

UPD：
我想出了一个解决方案：
我重写了registerAssetFiles（）方法在MyJsLibraryAsset.php文件中，如下所示：

public function registerAssetFiles($view)
{
    parent::registerAssetFiles($view);
    $view->registerJs('funcName()');
}

在MyLibrary.js文件中，我将所有代码包装在funcName（）函数中，如下所示：

function funcName() {
    //here all my code...
}

它可以工作，但似乎太糟糕了... 还有其他解决问题的方法吗？

Answer 1

据我了解，您正在创建的插件与名为$merchants = $wpdb->get_results("SELECT wp_merchants.*,wp_merchant_meta.meta_value FROM wp_merchants LEFT JOIN wp_merchant_meta ON wp_merchant_meta.merchant_id = wp_merchants.id AND wp_merchant_meta.meta_key = 'last_login' ORDER BY id DESC" );的引导插件之一具有依赖关系，并且为了管理引导js组件的任何依赖关系，应在您的assetManager文件中添加该依赖关系。

我将如何管理它，将自定义代码放入js文件中，并将其列出到AssetBundle的yii\bootstrap\Collapse变量中，然后添加对$js的依赖性，以便我的js文件具有自定义代码的代码始终会在引导插件js文件之后加载。

请参阅下面的类，其中包含一个CSS文件和yii\bootstrap\BoottrapPluginAsset文件，其中将包含您要编写的自定义代码

test.js

完成上述所有设置后，在布局中注册Asset文件，然后查看源代码，您将看到如下所示加载的文件，其中class AppAsset extends AssetBundle { /** * @var string */ public $basePath = '@webroot'; /** * @var string */ public $baseUrl = '@web'; /** * @var array */ public $css = [ 'css/site.css', ]; /** * @var array */ public $js = [ 'js/test.js', ]; /** * @var array */ public $depends = [ 'yii\web\YiiAsset', 'yii\bootstrap\BootstrapAsset', 'yii\bootstrap\BootstrapPluginAsset', ]; }将始终在test.js文件之后加载

内联脚本正确后，如何在yii2项目中注册我的js代码？

1 个答案: