Created
February 10, 2012 16:10
-
-
Save dsimard/1790530 to your computer and use it in GitHub Desktop.
Modular javascript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> | |
| <script src="module_a.js"></script> | |
| <script src="module_b.js"></script> | |
| <script src="xtending_modules.js"></script> | |
| <meta charset=utf-8 /> | |
| <title>Modular js</title> | |
| <!--[if IE]> | |
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| <style> | |
| article, aside, figure, footer, header, hgroup, | |
| menu, nav, section { display: block; } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>Steps</h2> | |
| <ol id="steps"> | |
| </ol> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| $("#steps").append($("<li>").text("Init A")); | |
| var a = { | |
| callA: function() { | |
| $("#steps").append($("<li>").text("This is a call to module A : " + a.propertyFromA)); | |
| }, | |
| propertyFromA : 'My name is A' | |
| }; | |
| // Make sure that window.modules exists | |
| if (typeof window.modules === 'undefined') window.modules = {}; | |
| window.modules.a = a; | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| $("#steps").append($("<li>").text("Init B")); | |
| // Here are the properties and functions of module B | |
| var b = { | |
| callB: function() { | |
| $("#steps").append($("<li>").text("This is a call to module B : " + b.propertyFromB)); | |
| }, | |
| propertyFromB : 'My name is B' | |
| }; | |
| // Make sure that window.modules exists | |
| if (typeof window.modules === 'undefined') window.modules = {}; | |
| window.modules.b = b; | |
| })(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*** This function is for demo purpose ***/ | |
| window.addStep = function(msg) { | |
| $("#steps").append( | |
| $("<li>").text(msg) | |
| ); | |
| } | |
| /******/ | |
| $(document).ready(function() { | |
| // Here is where I extend all modules | |
| (function() { | |
| // This will contain all properties and functions from all loaded modules | |
| var z = {}; | |
| // Check which modules are loaded | |
| addStep("Check which modules are loaded"); | |
| for (var module in window.modules) { | |
| if (window.modules.hasOwnProperty(module)) { | |
| addStep("Module '" + module + "' is loaded"); | |
| // Load each properties and functions of the module | |
| var props = []; | |
| for (var prop in window.modules[module]){ | |
| if (window.modules[module].hasOwnProperty(prop)) { | |
| z[prop] = window.modules[module][prop]; | |
| props.push(prop); | |
| } | |
| } | |
| addStep("Added '" + props.join(", ") + "' from module '" + module + "'"); | |
| } | |
| } | |
| window.z = z; | |
| })(); | |
| // Check if can call A | |
| if (typeof z.callA === 'function') z.callA(); | |
| // Check if can call B | |
| if (typeof z.callB === 'function') z.callB(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment