動態調用函數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和其他人。 這是關於哲學/品味。 :-)

選擇一個庫也可以使你的代碼更清晰。 保持良好！

祝好運！