June 29, 2014
The idea to get this rolling is following:
This is the engine of the entire system, we declare two private arrays which store the names of the possible modules we are loading and a reference to the class.
We expose three public methods via an object literal, I want this to be a singleton as maintaining state on the arrays is important:
This is a standard module that you accepts to parameters:
To successfully run the modules the actual HTML elements on the page only need one thing - Have the correct data-attr. In the modules you specify a name for that module and that is what you have to call to run the module through the data-attr. In the example above I am demonstrating the module “spring”, so to initialise this you need to apply “data-spring” to the element.
Optionally we can apply a data-options attribute to the element to allow options to be passed in. The only requirement for the options is to specify them in valid JSON format, the modules will take care of the rest.
Hi 👋, I'm Anthony Bordonaro. I work as a front-end developer at Envato, where I have the fortune of working with a bunch of fun, encouraging and smart colleagues on the Envato Marketplaces. I'm interested in how technology can help people solve problems and achieve their goals. I like to write about technology, focusing on front-end dev and my journey in learning about managing people and managing teams.
I live in Melbourne, Australia. Home of AFL and my favourite team the Carlton Football Club