CodeX Module Dispatcher

Class for frontend Modules initialization from the DOM without inline scripts

Installation

Install npm package

npm i module-dispatcher --save

Usage

Import it in your JavaScript file

import moduleDispatcher from 'module-dispatcher';

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

new moduleDispatcher({
    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.

<div data-module="comments">
    <!-- Any stuff -->
</div>

You can init multiple Modules on one node as well

<div data-module="comments likes"></div>

Passing settings to the Modules

If your Module has settings, place them via JSON inside the Node with data-module.

Don't forget to add an attribute hidden to the <module-settings> tag

<div data-module="comments">
    <module-settings hidden>
         {
             // your module's settings
         }
    </module-settings>
    <!-- Other stuff -->
</div>

For several Modules on one node, your settings should be an Array

<div data-module="module1 module2">
    <module-settings hidden>
        [
            {
                // Module 1 settings
            },
            {
                // Module 2 settings
            },
            ...
        ]
    </module-settings>
</div>

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.

License

MIT

Copyright (c) 2018 CodeX Team team@ifmo.su

About CodeX Team

CodeX is a new team based in ITMO University, unifying students and graduates interested in web-development, design and studying new technologies in practice.

https://ifmo.su