/module-js

A library that you can use to modularize your frontend code rather than building all code inside one big file.

Primary LanguageTypeScriptMIT LicenseMIT

ModuleJS

A lightweight javascript library that provides an easy and effortless instantiation of javascript modules.

Build Setup

# install dependencies
npm install

# Build distribution files
grunt "Build Distribution"

# Build example
grunt "Build Test Application"

Nuget Package

# Nuget
https://www.nuget.org/packages/ModuleJS/

# Package Manager
> Install-Package ModuleJs

# .NET CLI
> dotnet add package ModuleJS

TypeScript Example

// TypeScript Class 
namespace Modules {
    export class MyModule implements ModuleJs.Abstract.IModule {
        /**
         * Initialize module
         */
        init(moduleHtml: HTMLElement): void {
            console.log(moduleHtml);
        }

        /**
         * On load is called after every module on page has initialized.
         */
        onLoad(): void {
            console.log("MyModule loaded");
        }

        /**
         * Dispose is called if module is removed from DOM.
         */
        dispose(): void {
            // Detach event handlers etc.
        }
    }
}
<html>
<head>...</head>
<body>
    <div data-module="MyModule">
        <p>Hello world</p>
    </div>
    <script src="scripts/MyModule.js"></script>
    <script src="scripts/modulejs.js"></script>
    <script>
        ModuleJS({ namespaces: ["Modules"]});
    </script>
</body>
</html>

Javascript Example

<html>
<head>...</head>
<body>
    <div data-module="MyModule">
        <p>Hello world</p>
    </div>
    <script src="scripts/modulejs.js"></script>
    <script>
        (function(Modules) {
            Modules.MyModule = function() {
                //...
            };
            Modules.MyModule.prototype = {
                constructor: Modules.MyModule,
                init: function(moduleHtml) {
                    console.log(moduleHtml);
                }
            }
        })(window.Modules || (window.Modules = {}));

        ModuleJS({ namespaces: ["Modules"]});
    </script>
</body>
</html>

console log output:

<div data-module="MyModule">
    <p>Hello world</p>
</div>

Run Example

Use any web server you want and host from /wwwwroot.