将 OnClick 属性与 webpack encore 封装的函数链接答案

【问题标题】：Link OnClick attribute with function encapsulated by webpack encore将 OnClick 属性与 webpack encore 封装的函数链接
【发布时间】：2020-08-11 09:00:08
【问题描述】：

简介

你好，

（这个介绍不是问题的一部分，但它可以提供一点上下文。但你可以忽略它）

我创建了一个新主题，因为它与此 one 不完全相关。

由于this 不起作用，即使在尝试了所有想到的事情之后，我还是决定从头开始。

提供有关我的目标的详细信息

我想要做的是每次点击 html 元素时调用一个 javascript 函数。很简单。

这是我的树枝模板的样子

# templates/menu/index.html.twig
{% extends '_base.html.twig' %}

{% block title %}HANFF - Menu{% endblock %}

{% block body %}
    <div>
        {% trans %} Bonjour, bienvenue{% endtrans %} <span id="user_login">{{ app.user.login }}</span>
    </div>

    <a class="icons" href="#">
        <i class="far fa-star" aria-hidden="true" onclick="testAlert('{{ app.user.login|e('js') }}')"></i>
    </a>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('menu') }}
{% endblock %}

我希望当我点击 .fa-star 元素时，弹出窗口会显示“Hello mr”和用户名。

我尝试过的

第一次尝试

我将 testAlert 函数写入 menu.js ：

#assets/js/menu.js

function testAlert(userName){
    alert('Hello mr ' + userName);
}

module.exports = {
    testAlert
}

我已将 entryPoint 添加到 webpack.config.js 并重新运行 yarn watch。

但这不起作用，因为 testAlert 不是全局的，而是按我的理解封装到 menu.js 中。

我收到了这个错误：

第二次尝试

我编辑 menu.js 并编写以下代码

# assets/js/menu.js

function testAlert(userName){
    alert('Hello mr ' + userName);
}

window.testA = testAlert;

yarn watch 仍在运行...

我刷新页面并测试它。

它工作！

但我不太喜欢它，因为使用window JavaScript 对象会使函数全局化。这与 webpack 完全相反，全局变量不再存在。
我不知道这样做是否是一个好习惯。
所以我有点困惑我应该怎么做才能实现我的目标......

任何帮助都是可观的。

【问题讨论】：

标签： jquery webpack-encore

【解决方案1】：

这样做的方法是在一些 DOM 元素上添加监听器，就像：

<a class="icons" data-user="{{app.user.login}}" href="#">
        <i class="far fa-star" aria-hidden="true"></i>
</a>

那么js代码就是

$(document).ready(
    function () {
        $('a.icons').on(
           'click',
            function (e) {
               var $a = $(this);
               alert('Hello Mr : ' + $a.data('user'));
            }
        );
    }
);

【讨论】：