将“This”放入Javascript中的命名空间中

Getting "This" into a namespace in Javascript

本文关键字：命名空间 Javascript 放入 This      更新时间：2023-09-26

我相信这应该是一个简单的问题，但我仍在学习，所以在这里：

我有一些代码可以在单击时运行函数以将被单击的元素的 ID 分配给变量，但我不知道如何在不创建全局变量的情况下将"this.id"值传递给命名空间（我认为这很糟糕）。

<script>
    fsa = (function() {
        function GetTemplateLoc() {
            templateId = document.activeElement.id;
            alert(templateId + templateId2);
        }

        return {
            GetTemplateLoc: GetTemplateLoc,
        }
    })();
    //call the functions
    $(document).on('click', '.template', function () {
        fsa.GetTemplateLoc();
    });
</script>

和带有随机图片的 HTML：

<img id="template-1" class="template" src="http://fc02.deviantart.net/fs70/f/2010/028/c/b/cb21eda885b4cc6ee3f549a417770596.png"/>
<img id="template-2" class="template" src="http://fc02.deviantart.net/fs70/f/2010/028/c/b/cb21eda885b4cc6ee3f549a417770596.png"/>

以下方法有效：

var fsa = (function() {
    function GetTemplateLoc() {
        var templateId = this.id;
        alert(templateId);
    }
    return {
        GetTemplateLoc: GetTemplateLoc,
    }
})();
//call the functions
$(document).on('click', '.template', fsa.GetTemplateLoc);

jQuery通常调用你作为事件处理程序传递的函数，this设置为与事件关联的DOM对象。

在这种情况下，它将调用GetTemplateLoc()，并将this设置为.template元素，因此您可以直接在函数中使用this，而无需传递任何参数。

重要提示：始终使用 var 声明变量。JavaScript 没有变量的自动函数局部范围，即每个声明没有var的变量都是全局的，无论你在哪里声明它。换句话说，忘记var算作错误。

试试这个：你可以直接使用this.id来传递点击元素的id，其中this引用被点击元素的实例。

<script>
    fsa = (function() {
        function GetTemplateLoc(templateId ) {
            //templateId = document.activeElement.id;
            alert(templateId + templateId2);
        }

        return {
            GetTemplateLoc: GetTemplateLoc,
        }
    })();
    //call the functions
    $(document).on('click', '.template', function () {
        fsa.GetTemplateLoc(this.id);
    });
</script>

如果你能够在GetTemplateLoc函数中使用jQuery，你可以做这样的事情：

var fsa = (function() {
    function GetTemplateLoc($trigger) {
        var templateId = $trigger.attr('id'),
            templateId2 = $($trigger.siblings('.template')[0]).attr('id');
        alert(templateId + ' ' + templateId2);
    }

    return {
        GetTemplateLoc: GetTemplateLoc,
    }
})();
$(document).on('click', '.template', function () {
    fsa.GetTemplateLoc($(this));
});

你可以GetTemplateLoc设置为期望jQuery对象作为参数（$trigger开头的美元符号可以用来区分它是jQuery对象而不是任何其他数据类型，这不是必需的，但有时可以帮助澄清事情）。

templateId将存储单击的图像 ID 的值，templateId2将存储其他图像的 ID 的值。我还在警报中的两个变量之间添加了一个空格。

如果你不能在GetTemplateLoc中使用jQuery，你可以做这样的事情：

var fsa = (function() {
    function GetTemplateLoc(trigger) {
        var templateId = trigger.id;
        var templateId2 = trigger.nextElementSibling == null ? trigger.previousElementSibling.id : trigger.nextElementSibling.id;
        alert(templateId + ' ' + templateId2);
    }
    return {
        GetTemplateLoc: GetTemplateLoc,
    }
})();

这一次，触发事件的.template被传递到GetTemplateLoc，但这次它不是jQuery对象。 templateId分配给触发器的 ID，然后在三元中分配templateId2。首先，检查trigger的nextElementSibling以查看它是否null。如果是，我们知道trigger是两个.template要素中的第二个。因此我们可以templateId2设置为trigger以前的兄弟姐妹的ID。如果trigger的nextElementSibling不是null，那么我们知道trigger是第一个模板，我们用 nextElementSibling 的 ID 填充templateId2。这种确切的方法仅适用于两个.template，如果有更多，则需要一些额外的/不同的逻辑，可能需要检索所有.template ID，然后循环访问它们以将它们添加到警报消息中。希望这有帮助。

相关文章：