Strategia per caricare file statici specifici di una pagina su un'applicazione web

Ci sono alcuni modi in cui puoi separare il tuo codice. In un'applicazione esistente, il namespace javascript potrebbe essere utile. Usa il tuo bundler di scelta (gulp, grunt, ecc.) Ma separa la pagina javascript per file e spazio dei nomi.

var myCo = myCo || {};
    myCo.page = myCo.page || {};
    myCo.page.productDetail = function(){
        // You can set properties and methods on the object to use later in
        // this code. Set these in the page.
        this.container = null;
        this.init = function(){
            // Here is where you put initialization code,
            // like setting controls you need to reference
            // or getting data, etc.
        };
        this.getProductData = function(){
            // return data here
        };
}

Nella tua pagina attuale, avresti un blocco di script che le chiamate inizializzano sul tuo "controller".

<script>
    var page = new myCo.page.productDetail();
    page.container = $("#pageContainer");
    page.init();
</script>

Questo è un modo semplice per assicurarsi che il codice non associato a questa pagina non venga attivato. Puoi usare qualsiasi js che hai, mantienilo correttamente con namespace e puoi ancora usarlo, assicurati di tenere tutto il codice che gira su una pagina nel tuo js specifico per la pagina.

Questo ha l'ulteriore vantaggio di essere facile da aggiungere ai progetti esistenti, mentre il refactoring del codice esistente in Angular (almeno per me) è stato un incubo.

Non ho mai lavorato con React, ma Vue sembra essere abbastanza aperto per permettervi di usare qualunque codice tu voglia, il che significa che non devi necessariamente avvolgere il tuo programma di utilità javascript in un codice speciale perché possa essere usato da Vue.

Se ha senso avere un file bundle.js o più dipende dai parametri del tuo progetto, ovvero richieste:

• Quando il tempo di caricamento della pagina è fondamentale, sarebbe opportuno dividere la funzionalità in diversi pacchetti. Serve prima un set minimo di funzionalità e successivamente carica in modo asincrono le funzionalità necessarie

• Se progetti per dispositivi mobili, ovvero non solo per piccoli display ma anche per connessioni errate devi calcolare un compromesso tra un grasso richiesta vs molti più piccoli e prendi connessioni instabili in considerazione

• Poi c'è la cache del browser: se cambi il tuo JS una volta ogni tanto, gli utenti potrebbero non notare quando rileggeranno la tua pagina, poiché il browser ha comunque memorizzato nella cache il tuo JS

Evidently, this causes issues in certain ways as including the line $('#bank-account').on('change' ... in those files that are not the one it is supposed to be run at, will trigger some random behavior.

Questo è not evidentemente e un chiaro segno di un design sbagliato. Nel migliore dei casi, dovrebbe fare niente , che è determinato e innocuo comportamento.

Per migliorare il layout e il design del codice, ti consiglio di dare un'occhiata ai moderni bundler :

• Browserify

• cumulativo

• Webpack

• Brunch

Qui trovi concetti come entry points e alcuni di loro supportano tree shaking .

È possibile invece di avere un singolo bundle.js che abbia qualcosa come un shared.js che è un pacchetto di funzionalità comuni e un pacchetto per pagina che rappresenta un separa entry point dalla tua applicazione.

tree shaking è una tecnologia utilizzata per rimuovere le parti non necessarie del codice incluso in un pacchetto, il che rende i pacchetti piccoli.

Take for instance something as simple as initializing a select library like $('#mySelect').select() or something as complex as a Vue or React object to create a data-driven component on that specific page.

Se stai usando detti bundler puoi farlo in entrambi i modi: avere uno o più entry points . Il componente dovrebbe essere attivo su ogni pagina in cui è incluso, altrimenti rimane in silenzio, senza fare nulla. E questo è indipendente dall'uso di Angular, Elm, Ember, jQuery, Preact, Ractive, React, VueJs o altro.