Modelli di progettazione di applicazioni JavaScript [duplicate]

8

Ho bisogno di scrivere un'applicazione PhoneGap con JavaScript e sto pensando ai modelli di progettazione del codice. Ho letto alcuni libri di modelli di progettazione JavaScript, ma non riesco davvero a vedere i vantaggi / gli svantaggi su di loro e penso di non capire l'implementazione e il diritto di utilizzo.

Vorrei avere qualche opinione su quale potrebbe essere più adatta alle mie esigenze. Mi piacerebbe che il codice fosse leggibile e mantenibile.

L'applicazione stessa è piuttosto piccola e semplice. Ha una gestione del giocatore (aggiungi / rimuovi), una gestione del gioco (aggiungi / rimuovi giocatori da una squadra, avvia / ferma / ripristina un cronometro).

Nell'ultima app che ho creato ho avuto oltre 30 funzioni con nome in un ambito globale che penso sia un grande no no. Quindi, ora voglio fare le cose per bene, e stavo pensando di usare un oggetto letterale o un modello di modulo ... qualcosa del genere forse:

var MYAPP = {
    init: function() {
        $(document).ready(function() {
            MYAPP.bind(); 
        });
    },

    bind: function() {
        // Bind jQuery click and page events
    },

    player: {
        add:            function(name) { ... },
        remove:         function(name) { ... }
    },

    team: {
        addPlayer:      function(name) { ... },
        removePlayer:   function(name) { ... }
    },

    game: {
        create:         function() { ... },
        startTime:      function() { ... },
        stopTime:       function() { ... },
        resetTime:      function() { ... }
    }
};

document.addEventListener('deviceready', MYAPP.init, false);

... o forse questo?

var MYAPP = {
    init: function() {
        $(document).ready(function() {
            MYAPP.bind(); 
        });
    },

    bind: function() {
        // Bind jQuery click and page events
    }
}

var PLAYER = (function () {

    // Some private variables
    var privateVar, privateMethod;

    return {
        add: function (name) { ... },
        remove: function (name) { ... }
    };

}());

document.addEventListener('deviceready', MYAPP.init, false);
    
posta micadelli 26.07.2012 - 21:07
fonte

4 risposte

7

Il tuo primo esempio è abbastanza buono. Id consiglia il modello del modulo sef-rivelatore, ti permette di dividere la tua applicazione in file:

(function( MYAPP, $, undefined ) { 

  // we pass in undefined because 'undefined' is no reserved word in Javascript

  'use strict';

  //Private Method
  function addItem( item ) {
    //...
  }  

   //Public Method
   MYAPP.someMethod = function() {
     // ...
   };

}( window.MYAPP = window.MYAPP || {}, jQuery )); 

In questo modo fai in modo che shure jQuery o qualsiasi libreria tu voglia usare sia ciò che ti aspetti, e usi lo stesso modello su più file.

Potrebbe funzionare per la tua applicazione:

(function( MYAPP, $, undefined ) { 
  'use strict';

  // These are private
  var players = [], 
      team = []; 

  // This will be executed at ready event
  $(document).ready(function() {
    bind(); 
  });

  // private Method 
  // (it doesn't need to be public, since the ready 
  // handler shares the same scope)
  function bind() {
    // Bind jQuery click and page events
  }


  MYAPP.player = {
    add: function(name) {
      players.push(name);
    },
    remove: function(name) {
      // ...
    }
  };

  MYAPP.team = {
    addPlayer: function(name) {
      // ...
    },

    removePlayer: function(name) {
      // ...
    }
  };

}( window.MYAPP = window.MYAPP || {}, jQuery )); 

Una parola per la modalità rigorosa. La modalità rigorosa ti aiuta in un paio di modi:

  • Cattura alcuni comuni blooper in codice, generando eccezioni.
  • Previene, o genera errori, quando azioni relativamente "non sicure" sono preso (come ottenere l'accesso all'oggetto globale).
  • Disattiva le funzionalità che sono confuse o poco curate.

Per abilitare la modalità rigorosa, mettilo all'inizio di un programma per abilitarlo per l'intero script:

"use strict";

O posizionalo all'interno di una funzione per attivare la modalità rigorosa solo all'interno di quel contesto.

function imStrict(){
   "use strict";
   // ... your code ...
}
    
risposta data 26.07.2012 - 21:17
fonte
4

Questo articolo è il migliore che abbia mai visto spiegando i vari pattern di progettazione di JS e il modo in cui possono venire insieme man mano che l'applicazione cresce. Di solito uso qualcosa di simile allo schema YUI perché è facile per chiunque leggere e include metodi e proprietà private e pubbliche.

    
risposta data 26.07.2012 - 21:54
fonte
1

Utilizza il modello di modulo, usa un framework di gestione delle dipendenze (come require.js) durante lo sviluppo.

Di solito avevamo questo "require" - "fornire" la dualità, e il pattern del modulo, ci ha soddisfatto con qualche milione di righe di codice JS lato client (sì, ci sono alcune app di huuge là fuori).

Considera l'utilizzo di alcuni framework MVC come Knockout.JS

Guarda come sono strutturate le app di Ext.JS.

Guarda come è strutturato YUI 3. Yahoo! è anche un grande utente di JavaScript, e avevano Crockford a bordo fino a poco tempo fa, sanno cosa fanno forse.

La cosa essenziale della manutenzione del codice è duplice. Per ogni cambiamento:

  1. conosci il file da aprire
  2. sapere dove scorrere immediatamente il file

Ora, se hai un unico file di grandi dimensioni, infrangi la regola nr. 1.

Altrimenti, i principi SOLID di Uncle Bob sono ancora adeguati, anche il solito modulo che tratta i consigli di Kevlin Henney. Javascript è solo una lingua.

    
risposta data 26.07.2012 - 21:17
fonte
0

In last app I created I had over 30 named functions in a global scope which I think is a big no no.

corretto al 100%.

[I] was thinking of either using an object literal or a module pattern.

Certo. Quelli sarebbero modelli fattibili.

I miei pensieri si allineano strettamente con @Aadaam con due avvertimenti:

  1. Ecco my link di modelli di progettazione JavaScript preferiti .
  2. Preferisco rivelando il modello del prototipo . Il mio secondo preferito è rivelazione del modello di modulo , che differisce leggermente dal modello di modulo standard in quanto è possibile dichiarare ambito pubblico / privato.
risposta data 27.07.2012 - 13:50
fonte

Leggi altre domande sui tag