8
votes

Comment coder JQuery plus modulairement?

J'utilise un cadre (Django) et j'ai beaucoup de flexibilité dans la façon dont j'écris HTML. Je continue à penser que la façon dont j'écris JQuery pourrait être meilleure.

Prenez ceci par exemple: surtout n'importe où un bouton d'envoi apparaît sur notre site, nous le convertissons en un bouton plus jolie (prend les valeurs et le comportement d'origine et le remplace fondamentalement). Ceci est juste un exemple, mais il y a beaucoup d'étuis d'utilisation où j'ai des extraits de HTML placés sur le site et que la structure globale n'a aucune idée de ce qui est sur la page qui doit être manipulée par JavaScript. Donc 2 partie question: est-il efficace d'exécuter quelque chose sur 100 pages qui ne seront utilisés que sur 50 (JQuery Plugin qui recherchent d'abord un ensemble emballé), et si je voulais vraiment avoir une approche modulaire avec ma jQuery, comment J'y vais?


3 commentaires

Peut-être backbone.js? documentCloud.github.com/backbone


Bonne question, je pensais juste à cela hier et j'aimerais voir quelques suggestions


J'utiliserais des plugins JQuery. Voici un code de la chaudière que vous pourriez trouver utile. WebSanova.com/Tutorials/jquery/...


3 Réponses :


0
votes

Avec la mise en cache appropriée, il est définitivement plus efficace d'avoir un seul fichier .js minifié. Il ne sera chargé qu'une seule fois et il n'y aura que 1 appel par page. Si vous modularisez votre code, vous finirez par faire plus de demandes, tout en épargnant à aucun moment de darder le JS supplémentaire, car il sera mis en cache de toute façon.


4 commentaires

Si vous répandez le code sur de nombreux fichiers est votre préoccupation: plusieurs fichiers source peuvent être (et doivent être) concatérés dans un seul fichier et minifiés. Mais ce n'est pas quelque chose d'OP devrait s'inquiéter de la programmation, il s'agit strictement d'une préoccupation de temps de construction (ou d'une préoccupation de temps d'exécution, si vous avez un plugin qui la fait à la volée). L'efficacité ne doit pas affecter la modularité dans ce cas. (éditer) Mais je pense que je vous ai tort pour la première fois: vous avez raison, il est probablement plus efficace d'aller chercher un seul fichier JS, que ce script charger des modules supplémentaires au besoin (si c'est ce que vous avez censé).


Ouais, mais j'ai plus que cela ne veut que cela se soucie de vous inquiéter ... J'ai une validation pour les formulaires ... j'ai des widgets ... je veux dire idéalement, je pouvais simplement ajouter du javascript avec les extraits (pourrais-je faire ça?) C'est un travail pour quelque chose comme Pubsub? Serais-je juste identifier un script et appeler $ (document) .Ready continuellement (et juste le document de cache prêt)? Est-ce que cette approche est-elle un peu trop segmentée, et j'ai peut-être besoin d'un moyen d'appeler des trucs modulairement, mais j'ai un focal plus important de la manière de définir le code?


@ XCKPD7 Je ne peux pas répondre à cela comme cela dépendra finalement de votre situation. Quel problème essayez-vous de résoudre en modélisant votre code?


Messiness et non-maintenabilité ... Je ne veux pas tout courir tout le temps, et je ne veux pas de petits morceaux de JavaScript parsemé partout à la place.



1
votes

Si la préoccupation fondamentale de votre question concerne Programmation modulaire . J'étudie actuellement "JavaScript:" JavaScript: les bonnes parties "de Douglas Crockford" .

de ce livre: p>

Les fonctions sont l'unité modulaire fondamentale de JavaScript. Elles sont Utilisé pour la réutilisation de code, la cachette d'informations et la composition. P> blockquote>

Donc, comme dans JavaScript, toutes les fonctions sont des objets, vous pouvez utiliser la notation littérale de l'objet pour définir les structures de niveau supérieur en tant que modules de la manière suivante: P>

/* only one global variable to encapsulate all your 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;
        }
    }

    /* DOM traversing */

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


2 commentaires

Je ne demande pas comment utiliser un objet littéral pour organiser mon code ... Je demande comment implémenter mon code dans de petites pièces modulaires pouvant être mélangées et assorties.


@ XCKPD7 AHA. J'ai compris. Peut-être [ YouTube.com/watch?v=vxjvfposqhw] (Nicholas Zakas Scalable JavaScript L'architecture d'application) est ce que vous recherchez. Il y a un tutoriel court dans [ net. tutsplus.com/tatudials/javascript-ajax/... ] (écrire JavaScript modulaire) basé sur cette vidéo.



0
votes

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


0 commentaires