Ci scusiamo per la domanda smussata, proverò a spiegare ulteriormente.
Avrò un sito Web che utilizza jQuery e ritengo che ad un certo punto nel tempo ci sarà MOLTO codice jQuery, che significa MOLTE funzioni, selettori jQuery, ecc. C'è un modo per limitare la disponibilità del codice jQuery per pagine specifiche? Forse usando gli oggetti? Sto cercando il miglior approccio qui, quindi non scappo in una tempesta e non riesco a trovare la via d'uscita.
Grazie.
Normalmente separo il mio codice in modo modulare in cui ogni parte della pagina (ogni modulo) ottiene il proprio file per CSS, JS e HTML (oltre a PHP / qualsiasi codice lato server che si utilizza).
Ogni modulo è avvolto in un div o section (o qualsiasi cosa è semantico) con un ID (ovviamente) unico, come questo:
<section id="recent-comments">
<h2>Recent comments</h2>
<ul>
...
</ul>
</section>
Quindi creo un file CSS chiamato dopo il modulo ( recent-comments.css ) e un file JS ( recent-comments.js ). Il file JS può assomigliare a questo:
Base.modules.RecentComments = {
init: function () {
this.autoRefreshComments(); // this is just an example
},
autoRefreshComments: function () {
setInterval(function () {
$('#recent-comments').load('/new-comments');
}, 5000);
}
};
Se inizio a scrivere codice in un file di modulo che penso possa essere riutilizzato, di solito lo trasformo in un plug-in jQuery (che può essere riutilizzato).
Questo porta a molti file CSS e JS diversi, ma naturalmente li unisco tutti in uno prima di servirli al browser.
Il vantaggio di questo è che puoi trovare molto rapidamente il codice relativo a una parte della tua pagina e i tuoi file sono normalmente mantenuti piuttosto brevi e concisi.
I usato per servire diversi JS / CSS per ogni pagina (solo i moduli che erano in uso su quella pagina) ma non penso che migliori le prestazioni poiché porta a un unico CSS e File JS per pagina invece di un solo file CSS e JS che viene memorizzato nella cache sul caricamento della prima pagina.
Modifica: btw, questo è come apparirà la "classe" di Base:
var Base = {
modules: [],
init: function () {
Base.runModules();
},
runModules: function () {
for (var module in Base.modules) {
// Work out the HTML-ID based on the module-name (RecentComments == recent-comments)
var id = module.replace(/([A-Z])/g, '-$1').toLowerCase();
id = id.substring(0, 1) == '-' ? id.substring(1) : id;
var mod = jQuery('#' + id);
if (
mod.length &&
typeof(Base.modules[module]) != 'undefined' &&
typeof(Base.modules[module].init) == 'function'
) {
Base.modules[module].init(mod);
}
}
}
};
$(Base.init);
Leggi altre domande sui tag jquery