动态调用函数javascript

Question

我想要做的是将我的所有JavaScript与页面分开，因此它适用于所有禁用JavaScript的程序，但也可以使用闭包编译器的高级编译来编译它（http://closure-compiler.appspot.com/home ）。

这是我开始的方式：

从...

<a href="javascript:doMultiple('download', 'release');">Create archive</a>

至...

<a class="javascript doMultiple download release" href="ca.php">CreateArchive</a>

然后我循环所有对象以找到首先有类javascript等等:( links是a标签的数组）

for (i = 0; i < links.length; i = i + 1) {
    if (links[i].className.substr(0, 10) === "javascript") {
        jsArray = links[i].className.split(" ");
        links[i].style.display = "inline";
        if (links[i].addEventListener) {
            links[i].addEventListener("click", window[jsArray[1]], false);
        } else {
            links[i].onclick = window[jsArray[1]];
        }
        links[i].href = "#";
    }
}

使用这种方法，javascript压缩器将删除函数doMultiple，因为它没有被使用，因为它知道我有一个类有...

我的问题是，我怎么能解决这个问题，如果我不能解决这个问题，我能以某种方式摆脱窗口[jsArray [1]]并以另一种方式解决这个问题吗？ 因为我认为这不是最好的方法。

一堂课也可以是：

<a class="javascript popUp register.php 350 300" href="register.php">Register</a>

所以我想使用这种方法动态添加所有JavaScript。

最好的祝福，
约翰斯文森

Answer 1

你不应该让事情复杂化。 最好将事件附加到DOM元素。

我强烈建议您使用像jQuery这样的JavaScript框架，甚至可以使用纯JavaScript实现这一点。

例如

<a href="#" id="createArchive" class="remove otherClass">Create archive</a>

要么

<a href="#" id="createArchive" class="release otherClass">Create archive</a>

对于JavaScript：

var element = document.getElementById("createArchive");

var handler = function() {
        // this line will execute only on IE
        // you need an if-else case to test
        // against the browser other than IE
        // and use this.class.split
        var classes = this.className.split(' ');

        doMultiple('download', classes[0]);
        // or anything you want to on this click event
};

if (element && element.attachEvent) {
    // This is for IE
    element.attachEvent("onclick", handler);
}
else if (element && element.addEventListener) {
    // This is for rest of the world
    element.addEventListener("click", handler, false);
}

如果你使用jQuery，生活很简单

$("#createArchive").bind("click", function() {
    doMultiple('download', 'release');
});

就是这样，并且还要注意HTML中没有JavaScript代码。

问题2

对于Google Closure Compiler，您必须使用排除您不希望编译/缩小的函数。

您应该有一个.JS文件，其中包含要排除的函数名称。

您的exclude.js应包含以下函数的签名 ：

function doMultiple() { }
function popUp() { }

并从命令行运行此命令以使用闭包编译器进行编译

java -jar .\compiler.jar --compilation_level ADVANCED_OPTIMIZATIONS --js input_script_file.js --js_output_file=compiled.min.js --externs exclude.js

希望这有帮助。 请随时提出任何问题

Answer 2

首先， 对局部变量使用var关键字 。 变量jsArray是全局变量，因为你没有在它之前使用var关键字，这基本上是错误的（在这种情况下它不应该是全局的）。

其次，您可以使用标记的data-属性传递其他数据 。 所以以下内容：

<a class="javascript popUp register.php 350 300" href="register.php">Register</a>

可以改为更有意义的：

<a data-window-type="popUp" data-popup-height="350" data-popup-width="300" href="register.php">Register</a>

因此，您拥有以前存储在class属性中的所有数据（除非它是多余的）。 访问它就像访问任何其他标记属性一样简单。

当谈到您当前的代码时，我认为它过于复杂，我不确定您想要实现的目标。 只需遵循上述规则，您的代码可能会更简单。

Answer 3

我很高兴有人试图摆脱链接中的“javascript：”调用。 :-D

这很简单。 将它划分为“分层”步骤，这就是你要做的事情：

1. 循环遍历具有您指定的类名的链接;
2. 将它们绑定到一个事件监听器，它将触发任何操作。

作为初步说明，您应该考虑一种更好的方法来处理这个问题。 简单地“转换”一个JavaScript调用就不是好事了，因为它会1）需要丑陋的黑客来完成你想要的东西，2）仍然违背内容语义：类名也是内容; 它们不打算用作行为或造型。

在你想到一个更好的方法之后 - 我相信你会很容易找到一个 - 你基本上会做你正在做的事情; 它只需要一些JavaScript爱：

首先，定义动作。

function the_action(event)
{
    // Prevents the browser of following the link's href.
    // "javascript:void(0)" or "#" are for dumbs. ;-)
    event.preventDefault();

    // You can reuse the original href!
    // (like any other attribute or element property)
    // "this" is the DOM element.
    var link_url = this.getAttribute('href');

    alert('lol!');
}

现在，循环这些链接并添加侦听器的更好方法是：

var selector = 'a.foobar'
  , links = document.querySelectorAll(selector);

i = links.length; while(i--)
{
    links[i].addEventListener('click', the_action, false);
}

请注意，我在循环之前定义了函数，因为如果我将它放在addEventListener调用中，它将为列表中的每个元素创建一个新的Function对象。

另请注意，在上面的代码段中，我使用的代码仅在现代浏览器中可用。 如果你必须支持IE，我建议你得到一个简单的JavaScript库来“标准化”东西。 关于这个，你可以选择jQuery - 我不喜欢它，但这是另一个长时间的对话 - ，Mootools，Mandoo和其他人。 这是关于哲学/品味。 :-)

选择一个库也可以使你的代码更清晰。 保持良好！

祝好运！