динамически вызывать функцию 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 и т. д. (ссылки являются массивом тегов 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.

Я бы настоятельно рекомендовал вам использовать JavaScript-фреймворк, такой как jQuery, или даже вы можете добиться этого с помощью простого 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 необходимо использовать функцию exclude, которую вы не делаетехотите быть скомпилированными / минифицированными.

У вас должен быть .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

Я рад, что кто-то пытается избавиться от вызовов «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, Манду и другие. Это о философии / вкусе. : -)

Выбор библиотеки также сделает ваш код чище. Просто держи это хорошо!

Удачи!

Answer 3

Прежде всего, используйте ключевое слово 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 (если только он не был избыточным).Доступ к нему так же прост, как и к любому другому атрибуту тега.

Когда дело доходит до вашего текущего кода, я считаю, что он слишком сложен, и я не уверен, чего вы хотели достичь.Просто следуйте приведенным выше правилам, и ваш код может быть намного проще.