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