JQuery JavaScript Conception: l'Autonomie de l'Exécution de la Fonction ou un Objet Littéral?

Je suis curieux de savoir si il ya des meilleures pratiques en matière de JQuery lors de la construction de encapsulé blocs de code.

Généralement, lorsque je construis une page j'aime encapsuler les fonctions utilisées dans cette page à l'intérieur d'un objet. Cela me permet quelques encapsulation lors de la construction d'applications. Il n'y a rien que je déteste plus que de voir un fichier JavaScript avec un tas de ce

function doSomethingOnlyRelevantOnThisPage() {
    //do some stuff
}

J'cela fait désordre de la conception, et n'a pas vraiment d'encapsuler des fonctionnalités bien.

Couramment dans de nombreux cadres, il y a une norme qui est utilisée pour effectuer cette encapsulation.

Dans Mootools ils favorisent l'Objet Littéral Notation:

var Site = {        
    //properties and methods
}

Dans YUI ils favorisent l'Autonomie de l'Exécution de la Fonction de notation:

(function() { //properties and methods })()

La bonne chose à propos le deuxième exemple est celui d'une fermeture est créé, vous permettant ainsi de définir des propriétés et des méthodes.

Ma question est: est-ce que JQuery aficionados avez des meilleures pratiques pour la création de ces proprement encapsulé structures? Quelle est la justification de leur utilisation?

OriginalL'auteur steve_c | 2008-10-09

  1. 9

    Depuis que j'ai travaillé avec jQuery pour un certain temps maintenant, j'ai décidé sur un modèle standard qui fonctionne bien pour moi.

    C'est une combinaison de l'YUI motif de module avec un peu de jQuery plugin modèle mixte.. Nous nous sommes retrouvés à l'aide de l'auto de l'exécution de la fermeture de modèle. Est-ce bénéfique de plusieurs façons:

    1. Il garde un code à un minimum
    2. Il met en place la séparation de comportement de la présentation
    3. Il fournit un système de verrouillage qui empêche les conflits de noms de

    C'est à quoi il ressemble:

    ;(function($) {        
    var myPrivateFunction = function() {
    };

    var init = function() {
        myPrivateFunction();
    };

    $(init);
})(jQuery);

    Nous nous sommes rendu compte que l'affectation du résultat de l'exécution de la fonction, semblable à l'YUI motif de module, expose code qui pourraient être appelés dans le code de présentation. Nous voulons éviter que cela, de sorte que ce modèle s'adapte.

    Bien sûr, nous aurions pu écrire la méthode init en ligne, sans la définition d'une variable de la fonction. Nous avons convenu de définir explicitement la fonction init fait le code plus clair pour les lecteurs.

    Ce qui se passe si on veut partager des fonctions entre les pages externes/js fichiers? - Nous simplement les accrocher dans le mécanisme existant que jQuery fournit pour l'extension de l'objet jQuery lui-même - l'extension de la fonction.

    Si les fonctions sont statiques, nous utilisons $.étendre, et si elles fonctionnent sur un ensemble de fractionnement, nous utilisons l' $.fn.étendre la fonction.

    Espère que cela aide quelqu'un.

    Je continue à voir ce modèle, mais je me languis pour plus de exemple - j'ai une page avec quelques distinctes et assez impliqués éléments interactifs dont la logique doit être encapsulé indépendamment l'un de l'autre. Des suggestions pour l'organisation de code dans ce genre de situation? À l'aide de $.fn.étendre différent pour chaque morceau de l'INTERFACE utilisateur semble contre-intuitif.
    Je certainement ne serait pas l'avocat à l'aide de l'extension de la fonction jquery, sauf si vous êtes l'écriture d'un plugin - quelque chose qui est réutilisable dans de nombreuses pages. Je voudrais, dans votre cas, de me casser la fonctionnalité dans ses différentes parties, la création d'une auto de l'exécution de la fonction à contenir cette logique dans sa propre fermeture. Un partage de code peut ensuite être attaché à jQuery via $.étendre, ce qui vous permettrait d'avoir des fonctions d'assistance qui ne nécessitent pas le contexte d'un élément de fonction.
    Très bon article sur Immédiatement appelée à la Fonction d'Expression (IIFE) benalman.com/news/2010/11/...

    OriginalL'auteur steve_c

  2. 3

    - Je utiliser YUI et jQuery lors de l'élaboration (YUI widgets et quelques fonctions de confort, de sélecteurs jQuery et javascript "extensions"), et le général javascript modèle que j'utilise est ceci:

    /*global YAHOO, $ */

//Create the public-scope accessable namespace for this page
YAHOO.namespace('Project');

YAHOO.Project.page = function() {
    //Private members

    var self = {};

    //Public members
    var pub = {};

    pub.init = function() {

    };

    return pub;
} ();

//When the DOM is loaded, initialize this module
$(document).ready(YAHOO.Project.page.init);

    Maintenant clairement, vous pouvez supprimer le YAHOO.espace de noms() appel si vous ne voulez pas utiliser YUI, mais c'est le plan de base. Il utilise l'objet littéral de la notation, mais vous permet également de définir des propriétés et des méthodes.

    Juste rappelez-vous que lors de l'appel des membres privés ou référence à des variables privées de référence comme self.funcName(). Vous pouvez définir à l'extérieur de la self objet, mais ensuite, vous obtenez un mismash partout dans votre objet, où vous êtes à essayer de comprendre si size_of() est une méthode privée ou définis à l'échelle mondiale, quelque part d'autre.

    OriginalL'auteur Dan Hulton

  3. 1

    J'ai l'habitude de suivre le prototype de modèle:

    MyFunction = function(param1, param2)
{
   this.property1 = param1;
   //etc.
}

MyFunction.prototype =
{
    memberOne: function(param1)
    {
       //...
    },

    memberTwo: function(param2)
    {
    }
}

    Vous obtenez quelque chose de "constructeur" (la fonction elle-même) et encapsulé "méthodes" et "champs".

    C'est plus facile pour quelqu'un qui est habitué à la classe de base des langages à objets 🙂

    Mais ce n'est utile que si vous prévoyez d'encapsuler de l'état dans les objets. Vous devez appeler de nouveau sur ces objets pour créer des instances. Dans mon cas, il serait de se comporter plus comme une classe statique dans OO termes.
    Vrai, vrai... dans ce cas je préfère l'auto-exécution des fonctions anonymes.

    OriginalL'auteur Tsvetomir Tsonev