A while ago I inherited the front end on a product at work and I've been building further atop a somewhat confusing architecture of javascript. I finally have the time available, and the will from senior management, to dedicate some time to making this a bit more readable and maintainable.
This is a combo of ASP.NET MVC razor pages with javascript based around jQuery, some Kendo UI stuff, and knockout.js on some of the more complex pages.
Right now, every page that uses javascript calls an init line at the bottom like so. In this example you can see that it's also passing some data from the Model that was passed to the page. On the knockout pages, the data being passed into the js is the entire Model.
This doesn't seem entirely horrible, but I'm not quite sure if this is the right way to go about initializing the js.
@section Init
{
fc.initProfileLocations(@(((bool) TempData["PreventZip"]).ToString().ToLower()),@(((bool)TempData["duplicateAddress"]).ToString().ToLower()));
}
The js itself is pretty much all like the following.
(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));
Which is a sort of weird module pattern. I now have ES2015 modules available to me through Webpack but I'm not sure of the best way to utilize them as I've never used modules like CommonJS or AMD before. Especially since some pages are very simple and just need some initialization.
fwill be easy to forget what it means. Also, that looks like a fine way to pass data into the initialization method with Razor. – krillgar 23 hours ago