javascript - 如何使用 ES6 模板文字进行函数调用

Question

更新:这是一个更好的例子；我的代码是

let myFunction = () => {

    console.log('Yo');
    alert('Yo');

}

let About = {

    render : async () => {

        return /*html*/`
        <h1> About </h1>
        <button id="myBtn" type="button" >Try it</button> 

        <script>
            document.getElementById("myBtn").addEventListener ("click",  ${myFunction})
        </script>
    `
    }
}

export default About;

这将转换为 HTML 代码；

<div id="page_container" class="container pageEntry">
        <h1> About </h1>
        <button id="myBtn" type="button">Try it</button> 

        <script>
            document.getElementById("myBtn").addEventListener ("click",  () => {

    console.log('Yo');
    alert('Yo');

})
        </script>
    </div>

但是点击按钮，没有任何反应；

---

我正在尝试开发一个基本的 vanilla js SPA，但我遇到了一个问题，我无法从 html 代码调用当前模块中的任何函数。我通过在 index.html 中指定脚本标签的类型为“模块”来使用 es6 模块。

例如，在这段代码中，我尝试了内联 onclick 标签属性以及添加事件监听器(我一次使用一个，而不是一起使用。在这里显示它只是为了说明)

let myFunction = () => {
    console.log('Yo');
    alert('Yo');
}

let About = {

    render : async () => {

        return /*html*/`
        <h1> About </h1>
        <button id="myBtn" type="button" onclick="${myFunction}">Try it</button> 

        <script>
        document.getElementById("myBtn").addEventListener ("click",  myFunction()})
        </script>
    `
    }
}

export default About;

我将生成的 View 消费为

content.innerHTML = await page.render();

来 self 的主模块。

我能够做到这一点的唯一方法是让我的函数调用返回另一个包含实际 JS 代码的模板。

let myFunction = () => {
    return `
        alert('Yo');
        document.getElementById('myBtn').textContent = 'Duh'
        `
}

但是，这会创建一个非常难看的页面，其中我的整个 JS 代码都被内联添加到 HTML 中，而且我不能再在我的 js 代码中使用双引号。

Answer 1

以下是如何在模板字面量中调用函数:

const func = () => 'Hello'

console.log(`${func()} World`)