Comment coder jQuery de manière plus modulaire?

Question

Je utilise un framework (Django) et j'ai beaucoup de flexibilité dans la façon dont je écris le HTML. Je continue à penser que la manière dont j'écris le jQuery pourrait être améliorée.

Prenons cet exemple : presque partout où un bouton de soumission apparaît sur notre site, nous le convertissons en un bouton plus joli (qui prend les valeurs et le comportement originaux et les remplace essentiellement). Ceci n'est qu'un exemple, mais il y a beaucoup de cas d'utilisation où j'ai des extraits de HTML placés sur le site et la structure générale n'a aucune idée de ce qui est sur la page qui doit être manipulé par JavaScript. Donc, 2 questions : est-il efficace d'exécuter quelque chose sur 100 pages qui ne sera utilisé que sur 50 (un plugin jQuery qui recherche d'abord un ensemble enveloppé) et si je voulais vraiment adopter une approche modulaire avec mon jQuery, comment devrais-je procéder ?

Answer 1

Si la préoccupation fondamentale de votre question concerne la programmation modulaire. Je suis actuellement étudie le livre de Douglas Crockford "JavaScript: The Good Parts".

De ce livre:

Les fonctions sont l'unité modulaire fondamentale de JavaScript. Elles sont utilisées pour la réutilisation de code, la dissimulation d'informations et la composition.

Ainsi, comme en javascript toutes les fonctions sont des objets, vous pouvez utiliser la notation littérale d'objet pour définir des structures de niveau supérieur en tant que modules de cette manière:

/* une seule variable globale pour encapsuler tout votre code */

var MAINOBJ= {};

jQuery(document).ready(function($) {

    /* modules */

    MAINOBJ.formStuff = {
        results : [],
        myFunction: function (){
            // code
            results = MAINOBJ.ajaxStuff.loadResults();
            // code
        }
    }

    MAINOBJ.ajaxStuff = {
        results : [],
        loadResults: function (){
            // code
            return results;
        }
    }

    /* Traversée du DOM */

    $('#myForm').submit(function(e) {
        e.preventDefault();
        MAINOBJ.formStuff.myFunction();
    });
})

En fait, c'est ma façon de structurer tout mon code jquery à l'intérieur de wordpress/joomla, etc., où nous partageons le même espace de noms avec beaucoup de code javascript étranger.

Answer 2

Avec une mise en cache appropriée, il est certainement plus efficace d'avoir un seul fichier .js minifié. Il ne sera chargé qu'une seule fois et il n'y aura qu'un seul appel par page. Si vous modularisez votre code, vous finirez par faire plus de requêtes, sans gagner de temps supplémentaire pour le téléchargement du js supplémentaire, car il sera en cache de toute façon.

Answer 3

Voici ce dont vous avez besoin : http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html . Mais c'est encore très expérimental. Pour l'instant, regardez les outils de fermeture Google.