Question

基本上我的页面中有一个图像，我可以点击它以模态打开它。我之前使用的是严格模式＆＃39; （简单形式）但是因为我尝试兼容JSHint，所以我将其更改为函数表单。现在我的函数openModal（）未定义。

<!-- Media part -->
    <ul class="netreviews_media_part">
        <!-- media 1 (picture) -->
        <li>
            <a data-type="image" data-src="https://www.expertisez.com/images/easyblog_images/511/Authentifier-un-sac-Chanel.jpg"
                       class="netreviews_image_thumb" href="javascript:" onclick="openModal(this);"
                       style="background-image:url('https://www.expertisez.com/images/easyblog_images/511/Authentifier-un-sac-Chanel.jpg');">&nbsp;</a>
        </li>
    <ul>

JS代码（部分）

(function () {
    "use strict";
    function openModal(identifier) {
    // stuff here 
    }
}());

在这里小提琴：https://jsfiddle.net/7zd6mc65/2/

我似乎明白为什么它不起作用，感谢火箭队对这个问题的回答（why does this code throw undefined in "strict mode"）：显然是由于缺乏＆＃39;上下文，我的函数上下文不再被定义。

这里有两件事：

1 - 为什么简单的字符串＆＃39;表格（＆＃39;严格模式＆＃39;没有功能表格）不会造成问题？我的openModal函数没有使用它来定义。

2 - 我试图在HTML中打开模式（这个），但它没有给我更多的结果（如答案所示，但我想我错了）

我该怎么做才能解决这个问题？感谢

Answer 1

这与严格模式无关。函数声明的作用域与var变量的作用方式相同。

您已在IIFE中定义openModal。变量openModal的范围限定为IIFE。它不是一个全球性的。

如果你想让它成为全局的，那么你需要明确地这样做。

不要这样做。 Globals冒着命名空间冲突的风险。

window.openModal = openModal;

自90年代末以来，我们已经addEventListener，所以您不需要将其表达为全局，以便将其用作事件处理程序。

(function () {
    "use strict";
    addEventListener("DOMContentLoaded", function () {
        var thumbs = document.querySelectorAll(".netreviews_image_thumb");
        thumbs.forEach(function (element) {
            element.addEventListener("click", openModal);
        });
    });
    function openModal(event) {
        var identifier = this;
    }
}());

旁白：

href="javascript:"

如果您不想在任何地方进行链接，请不要使用链接。请改用<button type="button">。更好的是，链接到有用的地方，并有服务器端后备。

为什么我的函数在严格模式（函数形式）中未定义？

1 个答案: