Comunemente accettate le best practice per l’organizzazione del codice in JavaScript

Come JavaScript che framework come jQuery fare lato client di applicazioni web, più ricco e più funzionale, ho iniziato a notare un problema…

Come nel mondo si fa a mantenere questo organizzato?

  • Mettere tutti i vostri gestori in un punto e le funzioni di scrittura per tutti gli eventi?
  • Funzione di creazione/classi per avvolgere tutti i tuoi funzionalità?
  • Scrivere come un pazzo e basta spero che funziona per il meglio?
  • Dare il massimo e ottenere una nuova carriera?

Ho fatto menzione di jQuery, ma è davvero qualsiasi codice JavaScript in generale. Mi sto trovando che come linee su linee iniziano ad accumularsi, è sempre più difficile gestire i file di script o di trovare quello che stai cercando. Forse il più grande propblems ho trovato è che ci sono tanti modi per fare la stessa cosa, è difficile sapere quale è la corrente comunemente accettato le migliori prassi.

Ci sono raccomandazioni di carattere generale sul modo migliore per mantenere il vostro .js file come bello e pulito come il resto della tua applicazione? O è solo una questione di IDE? C’è un’opzione migliore là fuori?


MODIFICA

Questa domanda è stato destinato per essere di più circa l’organizzazione del codice e non l’organizzazione dei file. Ci sono stati alcuni davvero buoni esempi di unione dei file o dividere il contenuto in giro.

La mia domanda è: qual è l’attuale comunemente accettato migliori pratiche per organizzare il proprio codice? Qual è il tuo modo, o anche un metodo consigliato per interagire con gli elementi della pagina e creare reuseable codice che non entri in conflitto con l’altro?

Alcune persone hanno elencato spazi dei nomi che è una buona idea. Quali sono alcuni altri modi, più specificamente trattare con elementi della pagina e tenere il codice organizzato e pulito?

  • qualcuno che ha effettivamente avuto il tempo di parlare dell’organizzazione del codice stesso, non “solo” quello strumento di cui egli si serve per concatenare & comprimere il suo file JS: stackoverflow.com/questions/16736483/…
InformationsquelleAutor Hugoware | 2008-10-29



28 Replies
  1. 181

    Sarebbe molto bello se javascript aveva spazi dei nomi, ma trovo che organizzare le cose come Dustin Diaz descrive qui mi aiuta molto.

    var DED = (function() {
    
        var private_var;
    
        function private_method()
        {
            //do stuff here
        }
    
        return {
            method_1 : function()
                {
                    //do stuff here
                },
            method_2 : function()
                {
                    //do stuff here
                }
        };
    })();

    Ho messo diversi “spazi di nomi” e a volte le singole classi in un file separato. Di solito io inizio con un file e come classe o dello spazio dei nomi ottiene abbastanza grande da giustificare, ho separato fuori nel proprio file. Utilizzando uno strumento per unire tutti i file per la produzione è un’ottima idea.

    • Io di solito consultare il crockford modo”. +1 da me
    • Si può anche andare un po ‘ oltre. Vedi questo link: wait-till-i.com/2007/08/22/…
    • altrimenti chiamato module pattern ed è basato su IIFE pattern.
    • Non hai bisogno di esportare le classi in qualche modo? Come fa un oggetto creato dall’esterno di un modulo? E ci dovrebbe essere un metodo createNewSomething() nel ritorno in oggetto, quindi, la creazione di un oggetto avviene esclusivamente all’interno di un modulo? Hm… mi aspetterei che le classi (costruttori) sono visisble dall’esterno.
    • Il suo esempio non accetta parametri, ma la maggior parte sarebbero. Vedi qui il mio esempio per come questo di solito è fatto (Dattiloscritto, ma il 99% lo stesso): repl.it/@fatso83/Module-Pattern-in-TypeScript
  2. 87

    Cerco di evitare di includere javascript che con l’HTML. Tutto il codice è incapsulato in classi e ogni classe è nel proprio file. Per lo sviluppo, ho separato <script> tag per includere ogni file js, ma essi vengono combinati in un unico grande pacchetto per la produzione per ridurre il sovraccarico di richieste HTTP.

    In genere, io sono un singolo, ‘main’ js file per ogni applicazione. Quindi, se stavo per scrivere un “sondaggio” applicazione, vorrei avere un js file chiamato “survey.js”. Questo contiene il punto di ingresso in codice jQuery. Creare jQuery riferimenti durante la creazione di istanze e quindi passarli nella mia oggetti come parametri. Questo significa che le classi javascript sono “puri” e non contengono alcun riferimento a CSS id o nomi di classi.

    //file: survey.js
    $(document).ready(function() {
      var jS = $('#surveycontainer');
      var jB = $('#dimscreencontainer');
      var d = new DimScreen({container: jB});
      var s = new Survey({container: jS, DimScreen: d});
      s.show();
    });

    Trovo anche una convenzione di denominazione per essere importante per migliorare la leggibilità. Per esempio: ho anteponi ‘j’ per tutti jQuery istanze.

    Nell’esempio di cui sopra, c’è una classe chiamata DimScreen. (Si supponga che questo si oscura lo schermo e si apre una finestra di avviso.) Ha bisogno di un elemento div che si può ingrandire a coprire lo schermo, e quindi aggiungere una finestra di avviso, così mi passa un oggetto jQuery. jQuery è un plug-in concept, ma sembrava di limitazione (ad esempio, le istanze non sono persistenti, e non è possibile accedere con nessun rialzo. Così il DimScreen classe sarebbe un javascript standard di classe che succede solo a usare jQuery.

    //file: dimscreen.js
    function DimScreen(opts) { 
       this.jB = opts.container;
       //...
    }; //need the semi-colon for minimizing!
    
    
    DimScreen.prototype.draw = function(msg) {
      var me = this;
      me.jB.addClass('fullscreen').append('<div>'+msg+'</div>');
      //...
    };

    Ho creato alcuni abbastanza complesse applicazioni utilizzando questo approccio.

    • Trovo che l’utilizzo di $ come un nome di variabile prefisso è una pratica comune, ma potrei sbagliarmi. Così, $s = $('...') invece di jS = $('...'), solo una questione di preferenza, credo. Interessante, però, dal momento notazione ungherese è pensato per essere un codice di odore. E ‘ strano come i diversi alcuni di codice JavaScript convenzioni/preferenze sono per il C#/Java convenzioni di codifica.
    • Non è un codice di profumo in questo caso, è proprio questo uno dei pochi casi in cui ungherese è buona. Si potrebbe desiderare di leggere questo.
    • grazie per il link. Devo leggere tutti Joel blog, egli spiega le cose così bene. Sicuramente merita la fama e la reputazione che ha. Mi riferisco a Systems Hungarian come un codice di odore e Apps Hungarian come una pratica da ora in poi 🙂
    • Credo che in C# del mondo, potrebbe anche essere un grande articolo per promuovere l’uso di var, ora che ci penso. Più che gli argomenti contro l’uso di var è dove non sono sicuro del “tipo” di ciò che viene restituito, ma credo che l’argomento dovrebbe, piuttosto, essere contro non so ‘classe’ di ciò che viene restituito. Se l’utilizzo di Applicazioni ungherese, non si dovrebbe avere che riguardano quindi… interessante.
    • Il $ prefisso è effettivamente inutile. Applicazioni ungherese non è appropriato qui, perché JS è un tipo di sistema che ti impedisce di fare le cose sbagliate con jQuery oggetti. Applicazioni ungherese è solo auspicabile, quando il tipo di sistema non si può fare il controllo per l’utente.
    • Vedo il tuo punto, ma non è inutile come una guida per il programmatore. Il prefisso $ mi ricorda quello che è quando la lettura del mio codice, e pertanto aiuta rapida comprensione.
    • Ma è comunque una cattiva idea. Non si dovrebbe fare il lavoro che l’interprete può già fare. L’interprete ha una robusta tipo di sistema, quindi, si basano su di esso. Non scrivere nPixels o strName, quindi non scrivere $element. Inoltre, è inutile come una guida: non c’è niente che ti impedisce di scrivere var $element = 3.

  3. 39

    Si può rompere il tuo script in un file separato per lo sviluppo, e quindi di creare una “release” versione dove stipare tutti insieme ed eseguire YUI Compressor o qualcosa di simile su di esso.

    • A volte ci sono non necessari script javascript. È uno spreco di inviare quelle per il cliente. Penso sia bes inviare solo ciò che è necessario. Naturalmente, per un’applicazione web che viene utilizzato per tutto il giorno, come ad esempio una intranet app, potrebbe essere meglio per inviare l’intero lotto, al primo caricamento della pagina.
    • la compilazione dovrebbe includere l’asportazione delle inutilizzati roba.
    • C’è anche un concetto di caricamento pigro per provare a ridurre la larghezza di banda, dove si carica la pagina iniziale, e quindi eseguire il caricamento asincrono di richieste di file di script (come già detto in altre risposte a questa domanda). Però, che può richiedere più richieste e in realtà potrebbe essere meno utilizzabile. @DOK, se JS è memorizzato nella cache, una media richiesta può essere migliore di un paio di piccoli.
  4. 27

    Ispirato a precedenti post ho fatto una copia di Rakefile e fornitore directory distribuito con WysiHat (a RTE menzionato dal changelog) e fatto un paio di modifiche per includere il codice di controllo con JSLint e minimizzazione con YUI Compressor.

    L’idea è di utilizzare Pignoni (da WysiHat) per unire più Javascript in un file, controllare la sintassi del file unito con JSLint e minify con YUI Compressor prima della distribuzione.

    Prerequisiti

    • Java Runtime
    • ruby e rastrello gemma
    • Si dovrebbe sapere come mettere un VASO in Classpath

    Ora non

    1. Scaricare Rhino e mettere il VASO (“js.jar”) a classpath
    2. Scaricare YUI Compressor e mettere il VASO (build/yuicompressor-xyz.jar) a classpath
    3. Scaricare WysiHat e copia di “venditore”, la directory radice del tuo progetto JavaScript
    4. Scaricare JSLint per Rhino all’interno del “venditore”, la directory

    Ora creare un file denominato “Rakefile” nella directory principale del progetto JavaScript e aggiungere il seguente contenuto:

    require 'rake'
    
    ROOT            = File.expand_path(File.dirname(__FILE__))
    OUTPUT_MERGED   = "final.js"
    OUTPUT_MINIFIED = "final.min.js"
    
    task :default => :check
    
    desc "Merges the JavaScript sources."
    task :merge do
      require File.join(ROOT, "vendor", "sprockets")
    
      environment  = Sprockets::Environment.new(".")
      preprocessor = Sprockets::Preprocessor.new(environment)
    
      %w(main.js).each do |filename|
        pathname = environment.find(filename)
        preprocessor.require(pathname.source_file)
      end
    
      output = preprocessor.output_file
      File.open(File.join(ROOT, OUTPUT_MERGED), 'w') { |f| f.write(output) }
    end
    
    desc "Check the JavaScript source with JSLint."
    task :check => [:merge] do
      jslint_path = File.join(ROOT, "vendor", "jslint.js")
    
      sh 'java', 'org.mozilla.javascript.tools.shell.Main',
        jslint_path, OUTPUT_MERGED
    end
    
    desc "Minifies the JavaScript source."
    task :minify => [:merge] do
      sh 'java', 'com.yahoo.platform.yui.compressor.Bootstrap', '-v',
        OUTPUT_MERGED, '-o', OUTPUT_MINIFIED
    end

    Se avete fatto tutto correttamente, si dovrebbe essere in grado di utilizzare i seguenti comandi nella console:

    • rake merge — per unire diversi file JavaScript in una
    • rake check — per controllare la sintassi del codice (questo è il default attività, in modo che si può semplicemente digitare rake)
    • rake minify — per preparare versione minified del tuo codice JS

    Di origine fusione

    Usando Pignoni, JavaScript pre-processore, è possibile includere (o require) altri file JavaScript. Utilizzare la seguente sintassi per includere altri script dal file iniziale (denominato “main.js” ma si può cambiare, che nel Rakefile):

    (function() {
    //= require "subdir/jsfile.js"
    //= require "anotherfile.js"
    
        //some code that depends on included files
        //note that all included files can be in the same private scope
    })();

    E poi…

    Dare un’occhiata a Rakefile fornito con WysiHat per impostare l’unit test automatici su. Bella roba 🙂

    E ora per la risposta

    Questo non risponde alla domanda originale molto bene. Io lo so, e mi dispiace, ma ho postato qui perché ho la speranza che possa essere utile a qualcun altro per organizzare il loro disordine.

    Il mio approccio al problema è quello di fare molto object-oriented modelling posso e implementazioni separate in diversi file. Quindi i gestori deve essere il più breve possibile. L’esempio con List singleton è anche una bella.

    E spazi dei nomi… beh, non può essere imitato da una più profonda struttura dell’oggetto.

    if (typeof org === 'undefined') {
        var org = {};
    }
    
    if (!org.hasOwnProperty('example')) {
        org.example = {};
    }
    
    org.example.AnotherObject = function () {
        //constructor body
    };

    Io non sono grande fan di imitazioni, ma questo può essere utile se si dispone di molti oggetti che si desidera spostare fuori della portata globale.

  5. 18

    L’organizzazione del codice richiede l’adozione di convenzioni e standard di documentazione:

    1. Spazio dei nomi in codice per un file fisico;

    Exc = {};

    2. Lezioni di gruppo in questi spazi dei nomi javascript;

    3. Set di Prototipi o relative funzioni o classi per la rappresentazione di oggetti reali;

    Exc = {};
    Exc.ui = {};
    Exc.ui.maskedInput = function (mask) {
        this.mask = mask;
        ...
    };
    Exc.ui.domTips = function (dom, tips) {
        this.dom = gift;
        this.tips = tips;
        ...
    };


    4. Set di convenzioni per migliorare il codice. Per esempio, il gruppo di tutte le sue funzioni interne o metodi nella sua classe, attributo di un tipo di oggetto.

    Exc.ui.domTips = function (dom, tips) {
        this.dom = gift;
        this.tips = tips;
        this.internal = {
            widthEstimates: function (tips) {
                ...
            }
            formatTips: function () {
                ...
            }
        };
        ...
    };

    5. Rendere la documentazione di namespace, classi, metodi e variabili. Ove necessario anche discutere di parte del codice (alcuni FIs e Fors, di solito importante implementare la logica del codice).

    /**
      * Namespace <i> Example </i> created to group other namespaces of the "Example".  
      */
    Exc = {};
    /**
      * Namespace <i> ui </i> created with the aim of grouping namespaces user interface.
      */
    Exc.ui = {};
    
    /**
      * Class <i> maskdInput </i> used to add an input HTML formatting capabilities and validation of data and information.
      * @ Param {String} mask - mask validation of input data.
      */
    Exc.ui.maskedInput = function (mask) {
        this.mask = mask;
        ...
    };
    
    /**
      * Class <i> domTips </i> used to add an HTML element the ability to present tips and information about its function or rule input etc..
      * @ Param {String} id - id of the HTML element.
      * @ Param {String} tips - tips on the element that will appear when the mouse is over the element whose identifier is id <i> </i>.
      */
      Exc.ui.domTips = function (id, tips) {
        this.domID = id;
        this.tips = tips;
        ...
    };


    Questi sono solo alcuni suggerimenti, ma che ha molto aiutato nell’organizzazione del codice. Ricordare è necessario disporre di disciplina per avere successo!

  6. 13

    Buone OO design e identità di design pattern va un lungo cammino per rendere più facile da comprendere e mantenere.
    Ma una delle cose migliori che ho scoperto di recente sono segnali e slot aka publish/subscribe.
    Guarda http://markdotmeyer.blogspot.com/2008/09/jquery-publish-subscribe.html
    per un semplice jQuery attuazione.

    L’idea è ben utilizzati in altri linguaggi per lo sviluppo di GUI. Quando accade qualcosa di significativo da qualche parte nel codice si pubblica globale sintetica evento che altri metodi di altri oggetti può sottoscrivere.
    Ciò conferisce una eccellente separazione di oggetti.

    Penso Dojo (e Prototipo?) hanno costruito in versione di questa tecnica.

    vedere anche Quali sono i segnali e slot?

    • Ho fatto questo in jQuery. JS ha un built-in caso di modello, in modo che non si ha realmente bisogno di molto supporto del framework.
  7. 12

    Sono stato in grado di applicare correttamente le Javascript Module Pattern per un Ext JS applicazione al mio lavoro precedente. Esso ha fornito un modo semplice per creare ben incapsulato codice.

  8. 11

    Dojo ha il modulo di sistema dal giorno uno. In realtà è considerato una pietra miliare del Dojo, il collante che tiene tutto insieme:

    Utilizzando i moduli Dojo raggiunge i seguenti obiettivi:

    • Spazi dei nomi per il Dojo codice e codice personalizzato (dojo.declare()) — non inquinano lo spazio globale, coesistere con altre biblioteche, e l’utente non Dojo-codice consapevole.
    • Il caricamento dei moduli, in modo sincrono o asincrono per nome (dojo.require()).
    • Custom build analizzando le dipendenze dei moduli per creare un singolo file o un gruppo di file indipendenti (i cosiddetti livelli) per includere solo ciò che la vostra applicazione web. Custom build può includere Dojo moduli e fornito dal cliente moduli.
    • Trasparente CDN-ha basato l’accesso al Dojo e codice utente. AOL e Google trasportare Dojo in questo modo, ma alcuni clienti che per le loro applicazioni web personalizzate e.
  9. 9

    Check out JavasciptMVC.

    È possibile :

    • dividere il codice in model, view e controller livelli.

    • comprimere tutto il codice in un unico file di produzione

    • auto-generare il codice

    • creare ed eseguire unit test

    • e molto di più…

    Migliore di tutti, utilizza jQuery, quindi si può prendere vantaggio di altri plugin jQuery troppo.

    • Yup, ho usato jmvc ed è molto buono – docs potrebbe essere meglio però
  10. 9

    Il mio capo parla ancora di volte quando si scrive codice modulare (in linguaggio C), e si lamenta di come scadente il codice è al giorno d’oggi! Non è detto che i programmatori possono scrivere assemblea in ogni quadro. C’è sempre una strategia per superare il codice di organizzazione. Il problema di base è con i ragazzi che curano il java script come un giocattolo e non tentare mai di imparare.

    Nel mio caso, io scrivo js file su un tema dell’interfaccia utente o applicazione schermata di base, con un adeguato init_screen(). Utilizzando il corretto id convenzione di denominazione, faccio in modo che non ci siano spazio di nomi di conflitti all’elemento di primo livello. Nel discreta finestra.load(), mi lego le cose in base al livello superiore, id.

    Ho rigorosamente l’utilizzo di java script chiusure e modelli per nascondere tutti i metodi privati. Dopo aver fatto questo, non ha mai affrontato un problema di conflitto di proprietà/definizioni di funzione/definizione delle variabili. Tuttavia, quando si lavora con una squadra spesso è difficile applicare lo stesso rigore.

  11. 9

    Mi sorprende che nessuno menziona MVC framework. Sto usando Backbone.js per modularizzare e scindere il mio codice, ed è stato inestimabile.

    Ci sono un bel paio di questi tipi di quadri là fuori, e la maggior parte di loro sono abbastanza piccolo troppo. La mia opinione personale è che se si sta andando ad essere scrivere più di un paio di righe di jQuery per appariscente UI roba, o desidera una ricca applicazione Ajax, un framework MVC renderà la vostra vita molto più facile.

  12. 8

    “Scrivere come un pazzo e basta spero che funziona per il meglio?” Ho visto un progetto come questo, che è stato sviluppato e mantenuto da solo 2 sviluppatori, una grande applicazione con un sacco di codice javascript. In cima a che ci sono diverse scorciatoie per ogni possibile funzione jquery che si può pensare. Ho suggerito loro di organizzare il codice come plug-in, che è l’equivalente jquery di classe, di modulo, di spazio dei nomi… e l’intero universo. Ma le cose sono andate molto peggio, ora hanno iniziato a scrivere plugin sostituire ogni combinazione di 3 righe di codice utilizzato nel progetto.
    Personalmente credo jQuery è il diavolo e non deve essere utilizzato in progetti con un sacco di javascript, perché incoraggia ad essere pigri e non pensare di organizzare il codice in qualche modo. Preferisco leggere 100 righe di codice javascript di una riga con 40 incatenato delle funzioni di jQuery (non sto scherzando).
    Contrariamente alla credenza popolare, è molto facile per organizzare il codice javascript in equivalenti per gli spazi dei nomi e classi. Che è quello che YUI e Dojo fare. Si può facilmente rotolare il vostro proprio se vi piace. Trovo YUI approccio molto migliore ed efficiente. Ma di solito hanno bisogno di un bel editor con supporto per frammenti, per compensare YUI convenzioni di denominazione, se si vuole scrivere qualcosa di utile.

    • Io sono d’accordo con te su molto lunga, comandi concatenati, ma una delle parti migliori di jQuery è che mantiene tutti i Javascript di HTML. È possibile l’installazione di gestori di eventi per tutti i vostri elementi senza “bisogno” per aggiungere gli Id o<quello che> eventi di elementi. Come sempre, oltre l’uso di qualsiasi strumento è male…
    • Ho lavorato su una grande e ben organizzata, progetti in jQuery. Non so perché pensi che ottiene nel modo di organizzazione.
    • Bello paragrafi.
  13. 7

    Creare singleton per ogni cosa che davvero non è necessario creare un’istanza più volte sullo schermo, un classi per tutto il resto. E tutti loro sono messi nello stesso spazio dei nomi nello stesso file. Tutto è commentato, e progettato con UML , diagrammi di stato. Il codice javascript è chiaro che in html in modo che nessun javascript inline e io tendo ad usare jquery per minimizzare il cross browser.

    • buona commentando CHIAVE – sono contento che tu l’abbia detto così non ho dovuto. Vorrei aggiungere convenzioni di denominazione coerente, una sorta di facilmente comprensibile strategia di organizzazione per le variabili &amp; amp; funzioni e, come hai detto, un uso giudizioso di classi rispetto a singleton.
    • No. Se avete bisogno di commenti, il tuo codice non è generalmente abbastanza leggibile. Si sforzano di scrivere codice che non ha bisogno di commenti.
    • Inoltre, se avete bisogno di UML e diagrammi di stato, che probabilmente indica che l’architettura non è abbastanza chiaro dal codice. Downvoting.
    • Ben scritto progetti sono commenti per descrivere il MOTIVO per cui, non necessariamente una COSA. Il codice descrive già la COSA, ma spesso si ha bisogno di qualcosa per descrivere il PERCHÉ. Upvoting.
    • Ben scritta, i progetti sono abbastanza chiare codice che di solito si può dire, il “perché”, non solo il “cosa”. Io non fidarsi di un commento per dirmi “perché”, perché non ho alcuna garanzia che è in sintonia con il codice. Lasciate che il codice del documento stesso.
  14. 6

    Nel mio ultimo progetto -Viajeros.com – ho usato una combinazione di diverse tecniche. Non saprei come organizzare una web app — Viajeros è un sito di social networking per i viaggiatori con ben definite sezioni, quindi è una specie di facile separare il codice per ogni area.

    Uso dello spazio dei nomi di simulazione e il lazy loading, di moduli in base alla sezione del sito. In ogni caricamento della pagina dichiaro un “vjr” oggetto, e sempre carico di una serie di funzioni comuni (di vjr.base.js). Quindi ogni pagina HTML decide quali moduli con un semplice:

    vjr.Required = ["vjr.gallery", "vjr.comments", "vjr.favorites"];

    Vjr.base.js ottiene ogni uno con gzip dal server e li esegue.

    vjr.include(vjr.Required);
    vjr.include = function(moduleList) {
      if (!moduleList) return false;
      for (var i = 0; i < moduleList.length; i++) {
        if (moduleList[i]) {
          $.ajax({
            type: "GET", url: vjr.module2fileName(moduleList[i]), dataType: "script"
          });
        }
      }
    };

    Ogni “modulo” ha questa struttura:

    vjr.comments = {}
    
    vjr.comments.submitComment = function() { //do stuff }
    vjr.comments.validateComment = function() { //do stuff }
    
    //Handlers
    vjr.comments.setUpUI = function() {
        //Assign handlers to screen elements
    }
    
    vjr.comments.init = function () {
      //initialize stuff
        vjr.comments.setUpUI();
    }
    
    $(document).ready(vjr.comments.init);

    Data la mia limitata Javascript conoscenza, so che ci devono essere modi migliori per gestire questo, ma fino ad ora non funzionare grande per noi.

  15. 6

    Organizzare il tuo codice in Jquery centric spazio dei nomi può apparire come segue… e non entri in conflitto con altre API Javascript come Prototipo, Ext o.

    <script src="jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    
    var AcmeJQ = jQuery.noConflict(true);
    var Acme = {fn: function(){}};
    
    (function($){
    
        Acme.sayHi = function()
        {
            console.log('Hello');
        };
    
        Acme.sayBye = function()
        {
            console.log('Good Bye');
        };
    })(AcmeJQ);
    
    //Usage
    //         Acme.sayHi();
    //or
    //<a href="#" onclick="Acme.sayHi();">Say Hello</a>
    
    
    </script>

    Spero che questo aiuta.

    • Questa mi sembra un po ‘ cargo-coltà. jQuery.fn è un puntatore a jQuery.prototype, perché $() effettivamente restituisce una nuova istanza di jQuery funzione di costruzione. L’aggiunta di un “plugin” per jQuery significa semplicemente estendendo il suo prototipo. Ma quello che stai facendo non è, e non ci sono più puliti modi di realizzare la stessa cosa.
    • Io credo che lui semplicemente la creazione di funzioni statiche. Mi ricordo di aver visto jQuery docs che questo modo di dichiarare funzioni statiche è accettabile
  16. 6

    Bene principale di OO + MVC sarebbe sicuramente andare un lungo cammino per la gestione di un complesso app javascript.

    Fondamentalmente sto organizzando la mia app e javascript per i seguenti familiari design (che esiste tutto il viaggio di ritorno dal mio desktop giorni di programmazione per il Web 2.0)

    Comunemente accettate le best practice per l'organizzazione del codice in JavaScript

    Descrizione per i valori numerici sull’immagine:

    1. Widget che rappresentano il punto di vista della mia applicazione. Questo dovrebbe essere estensibile e separati ordinatamente risultante buona separazione che MVC cerca di raggiungere, piuttosto che trasformare il mio widget, spaghetti di codice (o l’equivalente in web app di mettere un grande blocco di Javascript direttamente in HTML). Ogni widget di comunicare attraverso gli altri, ascoltando l’evento generato da altri widget riducendo così il forte accoppiamento tra i widget che può portare a ingestibile codice (ricordate la giornata di aggiungere onclick ovunque si punta a una globale funzioni nel tag script? Urgh…)
    2. Modelli di oggetti che rappresentano i dati che mi desidera inserire nel widget e passando avanti e indietro per il server. Incapsulando i dati per il suo modello, l’applicazione diventa il formato dei dati agnostici. Per esempio: mentre Naturalmente in Javascript questi modelli di oggetti sono per lo più la serializzazione e la deserializzazione in JSON, se in qualche modo il server utilizza XML per la comunicazione a tutti ho bisogno di cambiare, cambiando la serializzazione/deserializzazione livello e non necessariamente deve cambiare tutte le classi di widget.
    3. Controller classi che gestiscono la logica di business e la comunicazione con il server + occasionalmente livello di cache. Questo livello di controllo il protocollo di comunicazione per il server e inserire i dati richiesti nei modelli di oggetti
    4. Classi sono avvolto ordinatamente negli appositi spazi dei nomi. Io sono sicuro che tutti noi sappiamo quanto è brutto spazio dei nomi globale potrebbe essere in Javascript.

    In passato, vorrei separare i file nella propria js e l’uso di una pratica comune per creare OO principi in Javascript. Il problema che ho appena scoperto che ci sono diversi modi per scrivere JS OO e non è detto che tutti i membri del team hanno lo stesso approccio. La squadra ha ottenuto più grande (nel mio caso più di 15 persone), questo diventa complicato, in quanto non vi è alcun approccio standard per Orientata agli Oggetti Javascript. Allo stesso tempo non voglio scrivere il mio quadro e ripetere alcuni dei lavori che sono sicuro che persone intelligenti che ho risolto.

    jQuery è incredibilmente bello come Framework Javascript e mi piace, però come progetto diventa più grande, ho chiaramente bisogno di una struttura aggiuntiva per la mia web app soprattutto per facilitare standardizzare OO pratica. Per me, dopo vari esperimenti, trovo che YUI3 Base e Widget (http://yuilibrary.com/yui/docs/widget/ e http://yuilibrary.com/yui/docs/base/index.html) infrastruttura offre esattamente ciò di cui ho bisogno. Alcuni motivi per cui li uso.

    1. Fornisce supporto dello spazio dei nomi. Un reale bisogno di OO e ordinata organizzazione del codice
    2. Di supporto It nozione di classi e oggetti
    3. Dà un standardizzare significa aggiungere le variabili di istanza per la classe
    4. Supporta l’estensione della classe ordinatamente
    5. Fornisce costruttore e distruttore
    6. Fornisce il rendering e l’associazione di eventi
    7. Ha base widget quadro
    8. Ogni widget ora in grado di comunicare tra di loro utilizzando standard di base del modello
    9. Più importante, dà a tutti gli ingegneri di una OO Standard di Javascript per lo sviluppo

    Contrario di molti punti di vista, che non necessariamente deve scegliere tra jQuery e YUI3. Questi due possono coesistere. Mentre YUI3 fornisce il necessario OO modello per il mio complesso di web app, jQuery fornisce ancora la mia squadra con facile da usare JS Astrazione che tutti abbiamo imparato ad amare e familiarità con.

    Utilizzando YUI3, sono riuscito a creare il pattern MVC, separando le classi che estendono la Base del Modello, le classi che si estende Widget come Vista e naturalmente si dispone di un Controller di classi che stanno facendo la logica necessaria e lato server chiamate.

    Widget in grado di comunicare con ogni altro evento di base del modello e di ascolto per l’evento e fare le necessarie attività basato su interfaccia predefinita. Messo semplicemente, mettendo OO + MVC struttura di JS è una gioia per me.

    Solo un disclaimer, io non lavoro per Yahoo! e semplicemente un architetto che sta cercando di affrontare il problema che pone la domanda originale. Penso che se qualcuno trova equivalente OO quadro, questo dovrebbe funzionare così. Principalmente, questa domanda vale anche per altre tecnologie. Grazie a Dio per tutte le persone che si avvicinò con OO Principi + MVC per rendere i nostri giorni di programmazione più gestibile.

  17. 5

    Io uso Dojo di gestione di pacchetti di (dojo.require e dojo.provide) e sistema di classe ( dojo.declare , anche per il semplice ereditarietà multipla) per modularizzare tutte le mie classi/widget, in un file separato. Non solo dose di questo mantenere il codice organizzata, ma permette anche di fare pigro/giusto il tempo di caricamento delle classi/widgets.

  18. 3

    Un paio di giorni fa, i ragazzi di 37Signals rilasciato un RTE di controllo, con una torsione. Hanno fatto una libreria che contiene i file javascript che utilizza una sorta di pre-processore di comandi.

    Sto usando da separare il mio file JS e poi alla fine li si fondono in uno. In questo modo sono in grado di separare le preoccupazioni e, alla fine, hanno solo un file che passa attraverso il tubo (con gzip, non meno).

    Nei modelli, di verificare se sei in modalità di sviluppo, e includere il file separati, e se in produzione, includere il finale (che devi “costruire” voi stessi”).

  19. 3

    Creare falsi classi, e assicurarsi che qualsiasi cosa che può essere gettato in una funzione separata in che senso è fatto così. Inoltre, assicuratevi di commentare un sacco, e non scrivere spagghetti codice, piuttosto tenere tutto in sezioni. Per esempio, alcune sciocchezze codice raffigurante i miei ideali. Ovviamente nella vita reale scrivo anche molte librerie che fondamentalmente comprendere la loro funzionalità.

    $(function(){
        //Preload header images
        $('a.rollover').preload();
    
        //Create new datagrid
        var dGrid = datagrid.init({width: 5, url: 'datalist.txt', style: 'aero'});
    });
    
    var datagrid = {
        init: function(w, url, style){
            //Rendering code goes here for style /width
            //code etc
    
            //Fetch data in
            $.get(url, {}, function(data){
                data = data.split('\n');
                for(var i=0; i < data.length; i++){
                    //fetching data
                }
            })
        },
        refresh: function(deep){
            //more functions etc.
        }
    };
  20. 2

    Penso che questo si lega, forse, DDD (Domain-Driven Design). L’applicazione su cui sto lavorando, anche se privi di una formale API, non dare suggerimenti di tali mediante il codice lato server (di classe, di nomi di file, ecc). Armati di che, ho creato un oggetto di livello superiore come un contenitore per l’intero dominio del problema; quindi ho aggiunto gli spazi dei nomi, dove necessario:

    var App;
    (function()
    {
        App = new Domain( 'test' );
    
        function Domain( id )
        {
            this.id = id;
            this.echo = function echo( s )
            {
                alert( s );
            }
            return this;
        }
    })();
    
    //separate file
    (function(Domain)
    {
        Domain.Console = new Console();
    
        function Console()
        {
            this.Log = function Log( s )
            {
                console.log( s );
            }
            return this;
        }
    })(App);
    
    //implementation
    App.Console.Log('foo');
  21. 2

    Per JavaScript organizzazione utilizzando la

    1. Cartella per tutti i javascript
    2. A livello di pagina javascript ottiene il suo file con lo stesso nome della pagina. ProductDetail.aspx sarebbe ProductDetail.js
    3. All’interno del javascript cartella per i file di libreria ho una cartella lib
    4. Mettere relative funzioni di libreria in una cartella lib che si desidera utilizzare durante la vostra applicazione.
    5. Ajax è il solo javascript che mi muove al di fuori del javascript cartella e si è proprio la cartella. Poi aggiungo due sotto cartelle client e server
    6. Cartella del Client ottiene tutto il .js file, mentre la cartella del server ottiene tutto il lato server di file.
    • Bello per l’organizzazione dei file. Che faccio con il codice. Ma alla fine ho compilare il codice in un… diciamo dll. È necessario che javascript troppo o finirete per la richiesta di 15 js file per pagina.
    • Non c’è niente di sbagliato con la richiesta di 15 JS file per pagina. Il tuo browser cache per successive richieste comunque.
    • L’unico problema con la richiesta di 15 file JS in una pagina è quante richieste HTTP che il browser in grado di gestire in tempo. Così in aggregazione in un unico file consente al browser di essere la richiesta di altri file necessari al tempo stesso.
    • Questo è vero, ma dopo il primo paio di colpi, essi saranno in cache del browser, in modo che non richiedono connessioni HTTP.
  22. 2

    Sto usando questa piccola cosa. Ti dà “include” direttiva per entrambi i JS e HTML template. Si eleminates il pasticcio completamente.

    https://github.com/gaperton/include.js/

    $.include({
        html: "my_template.html" //include template from file...
    })
    .define( function( _ ){ //define module...
        _.exports = function widget( $this, a_data, a_events ){ //exporting function...
            _.html.renderTo( $this, a_data ); //which expands template inside of $this.
    
            $this.find( "#ok").click( a_events.on_click ); //throw event up to the caller...
            $this.find( "#refresh").click( function(){
                widget( $this, a_data, a_events ); //...and update ourself. Yep, in that easy way.
            });
        }
    });
  23. 2

    È possibile utilizzare jquery mx (utilizzato in javascriptMVC) che è un insieme di script che consente di utilizzare modelli, opinioni e controllori. Io l’ho usato in un progetto e mi ha aiutato a creare strutturato javascript, con un minimo di script di dimensioni a causa della compressione. Questo è un controller di esempio:

    $.Controller.extend('Todos',{
      ".todo mouseover" : function( el, ev ) {
       el.css("backgroundColor","red")
      },
      ".todo mouseout" : function( el, ev ) {
       el.css("backgroundColor","")
      },
      ".create click" : function() {
       this.find("ol").append("<li class='todo'>New Todo</li>"); 
      }
    })
    
    new Todos($('#todos'));

    È inoltre possibile utilizzare solo il controller lato di jquerymx se non si è interessati a vista e parti di modello.

  24. 1

    La tua domanda è uno che albergava in me alla fine dello scorso anno. La differenza – di dare il codice per i nuovi sviluppatori, che non aveva mai sentito parlare di pubblico e privato e metodi. Ho dovuto costruire qualcosa di semplice.

    Il risultato finale è stato un piccolo (circa 1KB) quadro che traduce i valori letterali oggetto in jQuery. La sintassi è visivamente più facile per eseguire la scansione, e se il js cresce molto grande si può scrivere riutilizzabili query per trovare cose come selettori utilizzati, i file caricati, le funzioni dipendenti, etc.

    La pubblicazione di un piccolo quadro qui è impraticabile, così ho scritto un post del blog con esempi (il Mio per primo. Che è stata un’avventura!). Sei il benvenuto a dare un’occhiata.

    Per altri qui con un paio di minuti per il check-out, sarei molto grato feedback!

    FireFox raccomandato, dato che supporta toSource() per l’oggetto query di esempio.

    Evviva!

    Adam

  25. 0

    Io uso uno script personalizzato ispirato Ben Nolan comportamento (non riesco a trovare un link a questo più, purtroppo) per memorizzare la maggior parte dei miei gestori di eventi. Questi gestori di eventi vengono attivati dagli elementi di classe o un Id, per esempio.
    Esempio:

    Behaviour.register({ 
        'a.delete-post': function(element) {
            element.observe('click', function(event) { ... });
        },
    
        'a.anotherlink': function(element) {
            element.observe('click', function(event) { ... });
        }
    
    });

    Come la maggior parte delle mie librerie Javascript al volo, ad eccezione di quelli che contengono comportamento globale. Io uso Zend Framework headScript() segnaposto helper per questo, ma si può anche utilizzare javascript per caricare altri script al volo con Ajile per esempio.

    • È questo quello che cercavi? koders.com/javascript/…
    • Yup, che è l’unica! 🙂 Sembra che il codice dietro il link è molto più recente rispetto alla versione che mi è stata ispirata, però. Grazie per il tuo impegno!
  26. 0

    Non parlare di ciò che il vostro linguaggio server-side è. O, più pertinente, quale ambito si sta utilizzando, se — sul lato server.

    IME, organizzo le cose sul lato server e lasciare tutto agitare sulla pagina web. Il quadro di riferimento è dato il compito di organizzare non solo il JS che ogni pagina ha a carico, ma anche JS frammenti di lavorare con il markup generato. Tali frammenti di solito non vogliono emessa più di una volta – che è il motivo per cui sono astratti in il quadro di riferimento per il codice che per curare il problema. 🙂

    Per le pagine che hanno a che emettono loro JS, di solito trovo che c’è una struttura logica nel markup generato. Tali localizzata JS spesso può essere montato all’inizio e/o fine di una tale struttura.

    Di notare che nessuna di queste assolve da scrittura efficiente di JavaScript! 🙂

Lascia un commento