A lightweight javascript library that provides an easy and effortless instantiation of javascript modules.
# install dependencies
npm install
# Build distribution files
grunt "Build Distribution"
# Build example
grunt "Build Test Application"# Nuget
https://www.nuget.org/packages/ModuleJS/
# Package Manager
> Install-Package ModuleJs
# .NET CLI
> dotnet add package ModuleJS// 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><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>Use any web server you want and host from /wwwwroot.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent