Modular-HTML Code
Single HTML pages from mutliple HTML and JavaScript files
Brought to you by:
fmtaylor92
Menu
▾
▴
Tree [81b0e0] master / History
| File | Date | Author | Commit |
|---|---|---|---|
| js | 2014-03-15 |
Frank Taylor
|
[717217] Initial commit |
| modular-js | 2014-03-15 |
Frank Taylor
|
[717217] Initial commit |
| README.htm | 2014-03-15 |
Frank Taylor
|
[81b0e0] sourceforge |
| modular-example.htm | 2014-03-15 |
Frank Taylor
|
[717217] Initial commit |
| modular-js.zip | 2014-03-15 |
Frank Taylor
|
[717217] Initial commit |
| page-module-1.htm | 2014-03-15 |
Frank Taylor
|
[717217] Initial commit |
| page-module-2.htm | 2014-03-15 |
Frank Taylor
|
[717217] Initial commit |
| page-module-3.htm | 2014-03-15 |
Frank Taylor
|
[717217] Initial commit |
Read Me
<html>
<head><title>Modular-HTML</title></head>
<body>
<h3>Modular HTML JavaScript Library</h3>
Here is a minimal <b><a href="./modular-example.htm">example</a></b> of Modular-HTML.<br/><br/>
Most web pages which use JavaScript/Ajax are as complex as Java programs: Amazon's home page is over 5,600 lines long.<br/>
Until this project, programmers were forced to put all their HTML into one file, while other languages, like Java, allow you to split up files and packages.<br/>
With so many JavaScript libraries used together, having unique names for functions and variables is getting increasingly difficult, so this project allows package-names for variables and functions, ex: <code>com.yankees.shortstop and com.dodgers.setShortStop()</code>.<br/><br/>
<u>Modular-HTML allows you to:</u>
<ul>
<li>split up web pages into separate files, and combine them onto one page</li>
<li>add JavaScript libraries dynamically through JavaScript calls, not just <code><script></code> tags<small>(optional)</small></li>
<li>create Javascript packages, so that you can have functions and variables with same names in different packages. ex: <code>com.taxi.setCustomer()</code> function differs from <code>com.bank.setCustomer()</code><small>(optional)</small></li>
<li>send and recieve messages across multiple pages through broadcaster<small>(optional)</small></li>
<li><small>(optional)</small></li>
</ul>
<br/>
Here are the <b><a href="./modular-js.zip">libraries</a> and <a href="https://sourceforge.net/projects/modularhtml">sourceForge project</a> to download</b> for Modular-HTML, which includes:
<ul>
<li><a href="./modular-js/module.js">module.js</a> with functions to add pages to <code><DIV></code>s on parent page and add javascript libraries dynamically.</li>
<li><a href="./modular-js/namespace.js">namespace.js</a> which allows packages tp be used in JavaScript. ex: <code>com.spaceship.position and com.user.position</code> can be two separate variables</small></li>
<li><a href="./modular-js/broadcaster.js">broadcaster.js</a><small>(optional)</small> which is a message queue between separate packages. Useful for organizing when and where to change values.</li>
<li>JQuery library<small>(which you can replace, and I will eliminate soon)</small></li>
</ul>
<hr/>
<h4>Instructions</h4>
<ol>
<li>Add scripts to your main HTML page:<br/>
<small><code><script src="./modular-js/jquery-latest.min.js"></script><br/>
<script src="./modular-js/namespace.js" ></script><br/>
<script src="./modular-js/module.js" ></script><br/>
<!-- this script is optional, used for broadcast mechanism --><br/>
<script src="./modular-js/broadcaster.js" ></script></code></small></li>
<li>To insert a page into your main page's <code><DIV id="someDivId"></code>, call <code>modulepackage.addModulePage("someDivId", "./page-to-insert.htm");</code>. Optional parameters include a function to call once page is loaded.</li>
<li><small>(optional)</small>add JavaScript libries dynaimcally with this command: <code>modulepackage.addScript("./js/some-library.js</code></li>
<li><small>(optional)</small>define package-names using this command: <code>var somePackage = namespace('some.package.name')</code>, then define functions and variables, like this: <code>somePackage.setInitial= function(BroadObj) { ... }</code> and <code>somePackage.customers= new Array()</code></li>
<li><small>(optional)</small>if you used the package-names in your JavaScript, you can create a <code>somePackage.receiveBroadcast= function(BroadObj) {}</code> function in your library which uses that broadcaster, so that whenever someone calls <code>broadcastpackage.broadcastToAll(BroadObj, "pkgName")</code>, each JavaScript library that has the <code>receiveBroadcast</code> function will receive updates.</li>
</ol>
<hr/>
author: <a href="http://dl.dropboxusercontent.com/u/688127/public-web-site/index.h">Frank Taylor</a>
</body>
</html>
