#G.js A small simple javascript lib to help you define and require Module.
#feature define & require javascript module like AMDjs. But not exactly follow it.
Lightweight, about 1.7kb(Minified and Gzipped)
#How to use
<h1 id="hello"></h1>
<script src="./G.js"></script>
<script>
G.req('jQuery', function ($) {
$('#hello').text('Welcome to use G.js!');
});
</script>
#API Make sure one javascript file contains only one javascript module!
##Define a Module
###Define a Module as a Function
// file: lib/a.js
G.def('a', function() {
return 'a'; // G.req('a') === 'a';
});
###Define a Module as a simple object
// file: lib/b.js
G.def('b', {
name: 'b'
});
###Define a Module with Dependencies
// file: lib/c.js
G.def('c', ['a', 'b'], function (a, b) {
return a + b.name; // G.req('c') === 'ab';
});
###Require a Module Asynchronously
// file: demo.html
<script src="./G.js"></script>
<script>
G.req('c', function (c) {
G.log('c'); // print 'ab' by console.log if exist
});
</script>
###Require a Module Synchronously
// file: demo2.html
<script src="./G.js"></script>
// must include modules!
<script src="lib/a.js"></script>
<script src="lib/b.js"></script>
<script src="lib/c.js"></script>
<script>
G.log(
G.req('c');// print 'ab' by console.log if exist
);
</script>
###Module name and url rules
BaseUrl is directory of G.js, or you can set it by a global variable: GJS_URL.
LibUrl is baseUrl+'/lib/', or you can set it by a global variable: GJS_LIBURL.
HostUrl is location.protocol + '//' + location.host.
if it is a local file, then hostUrl is directory of baseUrl.
Supposing files like this:
Lib url rules
http://guokr.com/ (filepath: ~/guokr/G/)
G.js
lib/
a.js
b.js
c.js
other/d.js
index.html
e.js
c.js
NOTE：http://guokr.com/lib/ is mapped to directory ~/guokr/G/。
####Lib url rules:
LibUrl is 'http://guokr.com/lib/'.
Lib Module name is relative to libUrl.
~/guokr/G/lib/a.js is a lib module:
G.def('a', function() {
return 'a';
});
~/guokr/G/lib/other/d.js is a lib module:
G.def('other/d', function() {
return 'other/d';
});
####Relative url rules:
BaseUrl is 'http://guokr.com/'.
Relative Module name is relative to baseUrl.
~/guokr/G/c.js is a relative module:
G.def('./c.js', function() {
return './c';
});
####Relative Dependencies module name is different:
For example:
//filename: ~/guokr/G/lib/c.js
G.def('c', function() {
return 'c';
});
//filename: ~/guokr/G/lib/b.js
G.def('b', ['./c'], function( c ) {
// is relative to ~/guokr/G/lib/b.js not baseUrl
return c === 'c'; // true
});
####Absolute url rules: Module name start with '/' or 'http://' or 'https://' or 'file://'.
if start with '/', for example:
e.js is a absolute module name
G.def('/e', {
name: 'e'
});
NOTE: Because of hostUrl is different between online(http://) and offline(file://), absolute module name which start with '/' is not recommended;
You can use relative module name instead;
if start with 'http://' or 'https://' or 'file://'.
e.js for example:
G.def('http://guokr.com/e.js', function() {
return 'e';
});
NOTE: Although a module can be named many ways, you can require them by any kind of name;
for Example:
G.req('./lib/a.js', function (a) {
return a === 'a'; // true
});
###Config and preload
<script>
var GJS_VERSION = '0.2', // will be prepend to javascript file url
GJS_PRELOAD = ['preloadModuleName'],
GJS_URL = '/js/',
GJS_LIB_URL = 'lib/';
</script>
<script>
(function() {
var type = 'text/javascript',
async = true,
s = document.getElementsByTagName('script')[0],
G = document.createElement('script');
G.type = type;
G.async = async;
G.src = 'http://guokr.com/G.js';
s.parentNode.insertBefore(G, s);
})();
</script>
#Other You might also want to check the build tool from guokr.
Check out the demo.html please!
#Licentse MIT. Be pleasure to fork and modify it.