Un fichier JS pour plusieurs pages

Question

Je mets généralement tous les scripts JavaScript dans un fichier, par exemple scripts.js (moins de requêtes HTTP, c'est mieux). Ainsi, certains scripts sont nécessaires pour certaines pages, d'autres non.

Pour cibler une page spécifique, j'utilise quelque chose comme :

if ($("body#share").length > 0) {
    // Placez ici la logique concernant la page avec l'ID 'share'...
}

// Le fichier / script continue...

D'autres suggestions ou meilleures suggestions? Merci!

Clarification: Je ne cherchais pas à comparer les avantages et les inconvénients entre la consolidation de plusieurs fichiers JS en un seul gros fichier et le maintien de plusieurs fichiers JS séparés. La réponse à cela est sûrement 'dépend de la situation' (nous le savons). Ma question est, en supposant que toute ma logique JS est placée dans un seul grand fichier, comment faire en sorte qu'un (morceau de) script s'exécute seulement lorsque la page correspondante est chargée ? Une façon que j'utilisais était d'utiliser if ($('#id-of-target-element')) { /* exécuter le script */}; y a-t-il une meilleure façon?

Answer 1

J'aime l'approche de Paul Irish... vous n'avez pas à la suivre exactement, mais l'idée générale est très solide.

Cela pourrait ressembler à ceci pour votre exemple

Html

Votre javascript spécifique à la page

YourNamespace = {
  share : {
    init : function(){
      // Placez ici la logique concernant la page avec l'ID 'share'...
    }
  }
}

Le javascript de Paul Irish qui rend la magie possible

UTIL = { 
  fire : function(func,funcname, args){
    var namespace = YourNamespace;  // indiquez votre espace d'objets littéraux ici

    funcname = (funcname === undefined) ? 'init' : funcname;
    if (func !== '' && namespace[func] && typeof namespace[func][funcname] == 'function'){
      namespace[func][funcname](args);
    }
  }, 

  loadEvents : function(){
    var bodyId = document.body.id;

    // commencez par les éléments communs.
    UTIL.fire('common');

    // faites attention aussi aux classes.
    $.each(document.body.className.split(/\s+/),function(i,classnm){
      UTIL.fire(classnm);
      UTIL.fire(classnm,bodyId);
    });

    UTIL.fire('common','finalize');
  }
};

// lancez tout ici 
$(document).ready(UTIL.loadEvents);

Donc la ligne que vous voyez directement ci-dessus va lancer ce qui suit

YourNamespace.common.init()
YourNamespace.share.init()
YourNamespace.common.finalize()

Lisez son article de blog et quelques-unes des variantes qui y sont liées.

Answer 2

Des questions similaires ont déjà été posées et la réponse correcte était et sera toujours

Cela dépend de la situation.

Cependant, si votre préoccupation concerne la minimisation du temps de trajet aller-retour (RTT) alors il est certain que

Combiner les scripts externes en aussi peu de fichiers que possible réduit les RTT et les retards de téléchargement d'autres ressources.

Il est bon de le garder aussi peu que possible, mais vous n'êtes pas obligé de le garder strictement dans un seul fichier.

Regardons pourquoi c'est ainsi.

Alors que partitionner le code en composants logiciels modulaires est une bonne pratique d'ingénierie, importer des modules dans une page HTML un par un peut augmenter considérablement le temps de chargement de la page. Tout d'abord, pour les clients avec un cache vide, le navigateur doit émettre une requête HTTP pour chaque ressource, et subir les temps de trajet aller-retour associés. Deuxièmement, la plupart des navigateurs empêchent le reste de la page d'être chargé pendant le téléchargement et l'analyse d'un fichier JavaScript.

Ces images montrent plus clairement pourquoi combiner un certain nombre de fichiers JavaScript en moins de fichiers de sortie peut réduire considérablement la latence:

Tous les fichiers sont téléchargés séquentiellement et prennent un total de 4,46 secondes pour terminer.

Après avoir regroupé les 13 fichiers js en 2 fichiers: Les mêmes 729 kilo-octets prennent désormais seulement 1,87 seconde à télécharger

Modifications après les éclaircissements de Siku-Siku.Com: Désolé! J'ai totalement mal compris votre question. Je ne connais pas de meilleure manière de faire en sorte qu'un script particulier (morceau de) ne fonctionne que lorsque la page correspondante est chargée. Je pense que votre manière est suffisante.

Answer 3

Votre suggestion semble OK. Cependant, j'utiliserais un attribut de données HTML 5 pour baliser chaque page de cette manière :

Vous pouvez ensuite écrire du code JavaScript conditionnel en vérifiant cette propriété (à partir de jQuery 1.4.3) :

if ($("body").data("title") === "my_page_title") {
    // Placez la logique concernant la page avec le titre 'my_page_title' ici...
}

Cela vous permet de regrouper systématiquement tout le code pour une certaine page de manière sensée

Answer 4

Une autre option est que vous pourriez avoir, dans le code HTML

    appelerVotreFonctionJS();  /*Les choses que vous voulez voir se produire lors du chargement de la page*/

Cela suivra le flux normal de la page. Par conséquent, si vous manipulez des éléments sur la page, vous devrez placer cette portion </code> en bas de la page, après que tous les éléments ont été chargés par le navigateur.</p> <p>Je ne suis pas sûr à 100% que cela soit plus efficace que la solution actuelle que vous avez, mais d'un autre côté, cela indiquera à quelqu'un regardant votre page HTML quel JavaScript sera exécuté lorsque la page se charge. Cela pourrait être utile en termes de maintenance à l'avenir.... moins un jeu de devinettes quant au script s'exécutant lorsque la page charge.</p> <p>J'espère que cela vous aide!</p></x-turndown>

Answer 5

Ok. Espérons que cet exemple de code sera plus clair que ce long texte :

---

votre fichier one-and-only.js :

var MY_SITE = {
    // vous avez un objet de namespace où vous stockez toutes vos choses
    main_page: {
        // à l'intérieur vous avez des morceaux plus petits, pour des pages spécifiques ou des widgets
        // celui-ci est pour la page principale
        _init: function () {
        ... 
        },
        ... 
        showSplashScreen: function () {
        ...
        }      
    },
    ... 
    // mais il y a d'autres pages
    contacts: { ... },
    // ou des widgets
    cool_menu: { ... },
    // et peut-être que vous voulez mettre des fonctions communes dans un bloc dédié
    global_utilities: { ... },
    // et bien sûr - le loader
    _start: function () {
        // ici nous appelons simplement un _init du module de page qui a été spécifié 
        this[PAGE_TYPE]._init(); 
        // et des trucs plus complexes - nous pouvons rechercher la page pour des éléments
        // qui contiennent un attribut de données spécial, les collecter
        var widgets = $('[data-our-widget]').each().getAttributeValue( 'data-or-widget' );
       // et puis _init chacun de ces widgets comme nous l'avons fait avec la page principale 
        widgets.forEach( function (v) {
            this[v]._init();
        }
    }
};
document.on('ready', MY_SITE.start); // ici nous supposons un certain framework js aléatoire

vos balises </code> sur la page :</p> <pre><code><script>var PAGE_TYPE = 'main_page'; </code></pre> <p>vos éléments <em>'magiques'</em> sur la page :</p> <pre><code><div id="whatever" data-our-widget="cool_menu"> ... </div> </code></pre> <hr> <p><strong>Attention :</strong> <em>Ceci est un aperçu de haut niveau ! Les détails de mise en œuvre peuvent et doivent varier en fonction de <strong>vos</strong> besoins.</em></p></x-turndown>