The goal is to write more modular and maintainable JavaScript.
More modular,
by separating your app in multiple files, a file should really just do only one thing.
4 folders:
app/
The general global app files. Ex: scrollto anchor file, general parallax file, custom accordion constructor file...
templates/
Template specific files, you should not need this, but in case.
widgets/
Widget / component specific files. Ex: carousel widget, nav widget, accordion widget object with the app accordion constructor.
vendors/
You know.
More maintainable,
by writing all your JavaScript in .js files, not inline, when you can.
That means when you do JS, everything is at the same place, not at the bottom of each file. Do you write your CSS inline?
To do that, we init each modules only when you need it on your page.
data-template="templateName"data-widget="widgetName"data-app="moduleName"To init global things like parallax or scrollto anchor used in multiple things, but not every template
If your module has an init function, just add a data attribute in the html of your widget or object.
The goal is to write more modular and maintainable JavaScript.
More modular, by separating your app in multiple files, a file should really just do only one thing.
4 folders:
app/The general global app files. Ex: scrollto anchor file, general parallax file, custom accordion constructor file...templates/Template specific files, you should not need this, but in case.widgets/Widget / component specific files. Ex: carousel widget, nav widget, accordion widget object with the app accordion constructor.vendors/You know.More maintainable, by writing all your JavaScript in
.jsfiles, not inline, when you can.That means when you do JS, everything is at the same place, not at the bottom of each file. Do you write your CSS inline?
To do that, we init each modules only when you need it on your page.
data-template="templateName"data-widget="widgetName"data-app="moduleName"To init global things like parallax or scrollto anchor used in multiple things, but not every templateIf your module has an init function, just add a
dataattribute in the html of your widget or object.In action: https://github.com/locomotivemtl/locomotive.ca (in progress, not much JS yet)