当函数绑定到许多链接时,JavaScript/jQuery的解释性质会增加代码大小



我在表中有许多URL(50或更多)。我通过选择其父级的所有锚标签来使每个链接的单击事件超载。

$(".mapURL a").click(function(e) {
    e.preventDefault();
    var url = ($(this).attr('href'));
    fetchMapByURL(url);
});

由于解释性语言中的JavaScript确实暗示将生成以下代码50次(要使用每个锚标记界限),从而使其效率低下并增加客户端的内存使用>

编辑 - 函数fetchmapbyurl(url)是一个较大的函数(30行),它使AJAX调用API以获取图像并将其加载到画布上。我还应该不打扰吗?

请用尽可能多的技术细节详细说明您的答案。

javaScript的解释性...

JavaScript本质上不是"解释"的。只是在公共环境(浏览器,节点)中,它以源形式传递到目标环境。只要有好处,所有现代JavaScript引擎都将代码编译为机器代码。还有一个在一个JavaScript编译器,它使您可以编译源代码和副本,而不是源代码,而不是源到目标环境(在这种情况下,Rhino Compiler  Mdash;现在有点过时了JVM)。

...这暗示着以下代码将生成50次...

不,您有一个附加到该代码中50个元素的处理程序函数,而不是50个单独的处理程序功能。

即使您以错误的方式做并创建了50个功能:

// WRONG, for illustration purposes
$(".mapURL a").each(function() {
    $(this).click(function(e) {
        e.preventDefault();
        var url = ($(this).attr('href'));
        fetchMapByURL(url);
    });
});

...虽然将创建50个不同的函数对象(每个功能对象(每个记忆都很小),但JavaScript引擎将在这50个功能对象上重复使用 code 。(这里的代码很小,以至于可能没有很多好处,但是...)

但是50个功能对象没什么大不了的。我们在JavaScript中使用各个地方,它们具有较小的基线足迹的高度优化的东西。在大多数现代环境中,您必须至少要陷入至少数十万,即使不是成千上万的人都会担心。

,但这对您的代码无关紧要,该代码只有一个元素重复使用一个处理程序功能。


函数fetchMapByURL(url)是一个较大的函数,可以使AJAX调用API以获取图像并将其加载到画布上。我还应该不打扰吗?

您的处理程序是调用该功能。一个函数称为的不同位置都没关系,仍然只有一个副本(除非您创建更多,请参见上面的"错误")。

最新更新