A lightweight clientside module system for the browser
Not sure which to use? Go for module.min.js
module.js is the script on which is being done development
module.safe.js is a browser safe version of the original, transpiled using Babel
module.min.js is module.safe.js, just minified.
First, you have to load module.js.
Simply do that by putting a script tag in the head (assuming you've put it onto your webserver).
Best is to put it as far to the top as possible.
<html>
<head>
<script src="/path/to/module.js"></script>
</head>
<body>
...
</body>
</html>Now you've implemented module.js into your website!
Now you can use it in your scripts.
Below <script src="/path/to/module.js"></script> add the path to your script(s)
<head>
<script src="/path/to/module.js"></script>
<script src="/path/to/myscript.js"></script>
<script src="/path/to/mymodule.js"></script>
</head>For example, in myscript.js you put:
Module("/path/to/mymodule.js", function(mymodule){ // Load the module at "/path/to/mymodule.js"
mymodule.hi(mymodule.test); // Exported variable mymodule is being used
// At fist "I am being loaded!" will be printer, after that
// "Hello!" will be printed in the console
})And inside the module file mymodule.js:
define(function(){
var out = {test: "Hello!", hi: console.log};
console.log("I am being loaded!");
return out;
});That is easy.
<head>
<script src="/path/to/module.js"></script>
<script src="/path/to/myscript.js"></script>
<script src="/path/to/logger.js"></script>
<script src="/path/to/chat.js"></script>
<script src="/path/to/navbar.js"></script>
</head>Simply pass an array instead of an string into the Module function
myscript.js:
Module(["/path/to/logger", "/path/to/chat", "/path/to/navbar" ], function(logger, chat, navbar){
logger("Log stuff");
chat.init();
navbar.doSomething();
})You probably want to keep you script as small as possible.
You dont always want to type the long/ass/path/toYourScript.js.
Easy fix!
Module.config({
"vendor": "/js/vendor",
"js": "/js",
"crypt": "/js/lib/crypto"
});Now we can use @vendor:someHandler which gets replaced to /js/vendor/someHandler.js.
Module.config({
"vendor": "/js/vendor",
"js": "/js",
"crypt": "/js/lib/crypto"
});
Module(["@vendor:someHandler", "@js:minifier", "@crypt:md5" ], function(someHandler, minifier, md5Hasher){
/*
...
*/
})Also note: if no extension is given in the path, the path will be extended with .js.
(recursion as in module1 requires module2 and module2 requires module1)
Yes sorry, I haven't fixed that yet