Un po 'di tempo fa ho ereditato il front-end su un prodotto al lavoro e ho costruito ulteriormente su un'architettura un po' confusa di javascript. Finalmente ho il tempo a mia disposizione e la volontà del senior management di dedicare un po 'di tempo a renderlo un po' più leggibile e manutenibile.
Questa è una combinazione di pagine del rasoio ASP.NET MVC con javascript basato su jQuery, alcuni elementi dell'interfaccia utente di Kendo e knockout.js su alcune delle pagine più complesse.
In questo momento, ogni pagina che usa javascript chiama una linea di init in basso in questo modo. In questo esempio puoi vedere che sta passando anche alcuni dati dal modello che è stato passato alla pagina. Nelle pagine a eliminazione diretta, i dati passati a js sono l'intero Modello.
Questo non sembra del tutto orribile, ma non sono abbastanza sicuro se questo è il modo giusto per inizializzare il js.
@section Init
{
fc.initProfileLocations(@(((bool) TempData["PreventZip"]).ToString().ToLower()),@(((bool)TempData["duplicateAddress"]).ToString().ToLower()));
}
Lo stesso js è praticamente il seguente.
(function (f, $) {
var pl = f.profilelocations = fc.profilelocations || {};
f.initProfileLocations = function (preventZip, duplicateAddress) {
//initialize a bunch of stuff like jquery plugins, event handlers, etc.
};
pl.onLocationSelect = function () {
//stuff
}
}(window.fc = window.fc || {}, jQuery));
Che è una sorta di modello di modulo strano. Ora ho a disposizione moduli ES2015 tramite Webpack, ma non sono sicuro del modo migliore per utilizzarli poiché non ho mai utilizzato moduli come CommonJS o AMD. Soprattutto perché alcune pagine sono molto semplici e hanno solo bisogno di un'inizializzazione.