Ce que je veux faire est de séparer tout mon JavaScript de la page, donc cela fonctionne pour tous avec JavaScript désactivé, mais aussi de pouvoir le compiler en utilisant la compilation avancée du compilateur de fermeture (http://closure-compiler.appspot.com/home ).

Voici comment j'ai commencé:

De...

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

À...

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

Ensuite, je boucle tous les objets pour trouver ce qui a d'abord la classe javascript, etc: (les liens sont un tableau des balises 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 = "#";
    }
}

Avec cette méthode, les compresseurs javascript suppriment la fonction doMultiple car elle n'est pas utilisée car elle ne sait pas que j'ai une classe avec ça ...

Et ma question est, comment puis-je résoudre ce problème, et si je ne peux pas, puis-je me débarrasser de la fenêtre [jsArray [1]] et résoudre le problème d'une autre manière? Parce que je pense que ce n'est pas la meilleure façon de le faire.

Une classe peut également être:

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

Je veux donc utiliser cette méthode pour ajouter dynamiquement tout JavaScript.

Cordialement,
Johan Svensson

0
Johan Svensson 23 nov. 2011 à 17:52

3 réponses

Meilleure réponse

Vous ne devriez pas avoir besoin de compliquer les choses. Il est préférable d'attacher un événement à votre élément DOM.

Je vous suggère fortement d'utiliser un framework JavaScript comme jQuery, ou même vous pouvez y parvenir en utilisant du JavaScript simple.

Par exemple

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

OU

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

Et pour 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);
}

Et si vous utilisez jQuery, la vie est simple

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

C'est tout, et n'oubliez pas qu'il n'y a pas de code JavaScript dans votre HTML.

Question 2

Pour Google Closure Compiler, vous devez utiliser exclure la fonction que vous ne souhaitez pas compiler / réduire.

Vous devriez avoir un fichier .JS qui contiendra les noms de fonction à exclure.

Votre exclude.js doit contenir la signature des fonctions comme:

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

Et exécutez cela à partir de votre ligne de commande pour compiler à l'aide du compilateur de fermeture

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

J'espère que cette aide. N'hésitez pas à poser n'importe quelle question

2
Abdul Munim 23 nov. 2011 à 14:31

Je suis heureux que quelqu'un essaie de se débarrasser des appels "javascript:" des liens. :-RÉ

C'est assez simple. En le divisant en étapes "hiérarchiques", voici ce que vous devez faire:

  1. Parcourez les liens qui ont le nom de classe que vous avez spécifié;
  2. Liez-les à un écouteur d'événements qui déclenchera quelle que soit l'action.

Comme note initiale, vous devriez penser à une meilleure approche pour gérer cela. Simplement «convertir» un appel JavaScript en ce n'est pas quelque chose de bien, car il faudra 1) exiger hacks laids pour accomplir ce que vous voulez et 2) aller toujours à l'encontre de la sémantique du contenu: noms de classes sont également du contenu; ils ne sont pas destinés à servir de comportement ou de style.

Après avoir réfléchi à une meilleure approche - je suis sûr que vous en trouverez une facilement -, vous ferez essentiellement ce que vous faites déjà; il a juste besoin d'un peu d'amour JavaScript:

Définissez d'abord l'action.

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!');
}

Maintenant, une meilleure façon de parcourir ces liens et d'ajouter l'écouteur:

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

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

Notez que je définis la fonction avant la boucle car si je la mets à l'intérieur de l'appel addEventListener, il créera un nouvel objet Function pour chaque élément de la liste.

Notez également que, dans les extraits ci-dessus, j'ai utilisé du code disponible uniquement dans les navigateurs modernes. Si vous devez prendre en charge IE, je vous recommande d'obtenir une bibliothèque JavaScript simple qui "normalisera" les choses. À ce sujet, vous pouvez choisir jQuery - je ne l'aime pas, mais c'est pour une autre longue conversation -, Mootools, Mandoo et autres. Il s'agit de philosophie / goût. :-)

Choisir une bibliothèque rendra également votre code plus propre. Gardez-le bien!

Bonne chance!

0
emyller 23 nov. 2011 à 14:25

Tout d'abord, utilisez le var mot-clé pour les variables locales . La variable jsArray est globale, car vous ne l'avez pas précédée du mot clé var, ce qui est fondamentalement faux (elle ne devrait pas être globale dans ce cas).

Deuxièmement, vous pouvez transmettre des données supplémentaires en utilisant des data- attributs de balises . Donc, ce qui suit:

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

Peut être changé pour le plus significatif:

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

Vous avez donc toutes les données précédemment stockées dans l'attribut class (sauf si elles étaient redondantes). L'accès est aussi simple que l'accès à tout autre attribut de balise.

En ce qui concerne votre code actuel, je pense qu'il est trop compliqué et je ne suis pas sûr de ce que vous vouliez réaliser. Suivez simplement les règles ci-dessus et votre code peut être beaucoup plus simple.

0
Tadeck 23 nov. 2011 à 14:07