CodeX Module Dispatcher
Class for frontend Modules initialization from the DOM without inline scripts. Calls Modules init() method
Installation
Install npm package
npm i module-dispatcher --save
Usage
Import it in your JavaScript file
;
Create an instance of Dispatcher
If your JavaScript Modules are parts of one global Library
object, like
- YourLibrary.moduleOne
- YourLibrary.moduleTwo
- YourLibrary.moduleThree
You can instantiate Dispatcher by the following way
Library : YourLibrary;
If you don't specify Library, your Modules will be called as window.moduleOne
by default.
Add Modules to the DOM
Add attribute data-module="yourModuleName"
to the HTML Element of the Module you want to init.
<!-- Any stuff -->
You can init multiple Modules on one node as well
Passing settings to the Modules
If your Module has settings, place them via JSON inside the Node with data-module.
Important: escape settings data, so xss vulnerabilities won't ruin your code.
Don't forget to add an attribute hidden
to the <textarea>
tag
{ // your module's settings } <!-- Other stuff -->
For several Modules on one node, your settings should be an Array
[ { // Module 1 settings }, { // Module 2 settings }, ... ]
Issues and improvements
Ask a question or report a bug on the create issue page.
Know how to improve ModuleDispatcher? Fork it and send pull request.
You can also drop a few lines to CodeX Team's email.