如何使用 defer 并使 JS 插件也能正常工作答案

【问题标题】：How to use defer and make JS plugin working as well如何使用 defer 并使 JS 插件也能正常工作
【发布时间】：2022-08-02 12:11:52
【问题描述】：

当我在 app.js 上使用 defer 时，有一个 js 插件无法正常工作。

如果我去掉 defer，虽然插件可以工作，但是有一个警告要求我使用 defer，我不知道该怎么办。

// resource/js/app.js
require(\'./bootstrap\');

import Alpine from \'alpinejs\';

import mask from \'@alpinejs/mask\'
Alpine.plugin(mask);

window.Alpine = Alpine;
Alpine.start();

// webpack.mix.js
mix.js(\'resources/js/app.js\', \'public/js\').postCss(\'resources/css/app.css\', \'public/css\', [
    require(\'tailwindcss\'),
    require(\'autoprefixer\'),
]);

这是 test.blade.php

<!DOCTYPE html>
<head>
    <meta charset=\"utf-8\">
    <title>title</title>

    <link rel=\"stylesheet\" href=\"{{ asset(\'css/app.css\') }}\">
    <livewire:styles />
    <livewire:scripts />    
    <script src=\"{{ asset(\'js/app.js\') }}\"  defer></script>
</head>

<body>
    <input x-mask=\"99/99/9999\" placeholder=\"MM/DD/YYYY\">
</body>
</html>

如果我使用<script src=\"{{ asset(\'js/app.js\') }}\" defer></script>，那么x-mask 插件将无法工作。

如果我删除 defer 并使用 <script src=\"{{ asset(\'js/app.js\') }}\" ></script>，x-mask 可以工作，但在 chrome 浏览器控制台上会出现警告 Alpine Warning: Unable to initialize. Trying to load Alpine before is available. Did you forget to adddeferin Alpine\'s tag?。

我应该怎么办？有什么建议吗？谢谢！

您是否将x-data 指令添加到父元素？
不，我没有。即使我删除了延迟并工作，仍然没有。我会尽力。
@Dauros 谢谢，它有效！

标签： javascript laravel alpine.js

【解决方案1】：

感谢@Dauros，在我将x-data 指令添加到父元素后，它就可以工作了。

<div x-data="{ date: '' }">
    <input x-mask="99/99/9999" placeholder="MM/DD/YYYY" x-model="date">
</div>

the alpineJS x-mask plugin page 上没有提及。

我终于明白了文件中关于Start Here 和x-data 中的x-date 的内容。

Alpine 中的所有内容都以 x-data 指令开头。

Alpine 中的所有内容都以 x-data 指令开头。在 x-data 内部，在纯 JavaScript 中，您声明了一个 Alpine 将跟踪的数据对象。

【讨论】：