Skip to content

Commit a45ff27

Browse files
tcorraltcorral
committed
Added new Patterns that are exclusive of Javascript.
Chaining Lazy Module ModuleRevealed Namespace Nullify Try-Finally
1 parent 60ebc79 commit a45ff27

File tree

14 files changed

+461
-0
lines changed

14 files changed

+461
-0
lines changed

‎Chaining/Chainable.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
var Chainable = function () {
2+
this.nNumber = 0;
3+
};
4+
Chainable.prototype.add = function (nNumber) {
5+
this.nNumber += nNumber;
6+
return this;
7+
};
8+
Chainable.prototype.multiply = function (nNumber) {
9+
this.nNumber *= nNumber;
10+
return this;
11+
};
12+
Chainable.prototype.toString = function()
13+
{
14+
return this.nNumber.toString();
15+
};

‎Chaining/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<html>
2+
<head>
3+
<link type="text/css" rel="stylesheet" href="../css/style.css"/>
4+
<title>Chain Pattern</title>
5+
<script type="text/javascript" src="Chainable.js"></script>
6+
</head>
7+
<body>
8+
<div id="source">
9+
<h2>Source</h2>
10+
<pre>
11+
var oChainable = new Chainable();
12+
// This must return "21"
13+
oChainable.add(3).add(4).multiply(3).toString();
14+
</pre>
15+
</div>
16+
<div id="console">
17+
<h2>Console</h2>
18+
<ul></ul>
19+
<h1>Chain</h1>
20+
</div>
21+
<script type="text/javascript" src="../js/utils.js"></script>
22+
<script type="text/javascript">
23+
var oChainable = new Chainable();
24+
// This must return "21"
25+
console.log(oChainable.add(3).add(4).multiply(3).toString());
26+
</script>
27+
</body>
28+
</html>

‎Lazy/Lazy.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
var Lazy = function (oContainer, sTextSpan, dTime)
2+
{
3+
this.oContainer = oContainer;
4+
this.update(sTextSpan, dTime);
5+
};
6+
Lazy.prototype.addZero = function(nTime)
7+
{
8+
return nTime < 10? '0' + nTime: nTime;
9+
};
10+
Lazy.prototype.getFormattedTime = function(dTime)
11+
{
12+
return this.addZero(dTime.getHours()) + ":" + this.addZero(dTime.getMinutes()) + ":" + this.addZero(dTime.getSeconds());
13+
};
14+
Lazy.prototype.update = function(sTextSpan, dTime)
15+
{
16+
var aHTML = [];
17+
aHTML.push("<div>");
18+
aHTML.push('<div>');
19+
aHTML.push('Not changed:');
20+
aHTML.push('<span>');
21+
aHTML.push(this.getFormattedTime(new Date()));
22+
aHTML.push("</span>");
23+
aHTML.push('</div>');
24+
aHTML.push("<span id='spanText'>");
25+
aHTML.push(sTextSpan);
26+
aHTML.push("</span>");
27+
aHTML.push("<span id='timeText'>");
28+
aHTML.push(this.getFormattedTime(dTime));
29+
aHTML.push("</span>")
30+
aHTML.push("</div>");
31+
this.oContainer.innerHTML = aHTML.join("");
32+
aHTML = null;
33+
this.update = function(sTextSpan, dTime)
34+
{
35+
var oText = document.getElementById("spanText");
36+
var oTime = document.getElementById("timeText");
37+
oText.innerHTML = sTextSpan;
38+
oTime.innerHTML = this.getFormattedTime(dTime);
39+
oText = oTime = null;
40+
};
41+
};

‎Lazy/index.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<html>
2+
<head>
3+
<link type="text/css" rel="stylesheet" href="../css/style.css"/>
4+
<title>Lazy Pattern</title>
5+
<script type="text/javascript" src="Lazy.js"></script>
6+
<style type="text/css">
7+
#test
8+
{
9+
margin-left: 40px;
10+
}
11+
#test span
12+
{
13+
margin-right: 10px;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<div id="source">
19+
<h2>Source</h2>
20+
<pre>
21+
var nCounter = 0;
22+
var aElements = ['Zero', 'First', 'Second', 'Third', 'Fourth'];
23+
var nIdTimeout = 0;
24+
var oLazy = new Lazy(document.getElementById('test'), aElements[nCounter], new Date());
25+
nIdTimeout = setInterval(function()
26+
{
27+
if(nCounter === 4)
28+
{
29+
clearInterval(nIdTimeout);
30+
}
31+
oLazy.update(aElements[nCounter++], new Date());
32+
}, 500);
33+
</pre>
34+
</div>
35+
<div id="console">
36+
<h2>Console</h2>
37+
<div id="test"></div>
38+
<ul></ul>
39+
<h1>Lazy</h1>
40+
</div>
41+
<script type="text/javascript" src="../js/utils.js"></script>
42+
<script type="text/javascript">
43+
var nCounter = 0;
44+
var aElements = ['Zero', 'First', 'Second', 'Third', 'Fourth'];
45+
var nIdTimeout = 0;
46+
var oLazy = new Lazy(document.getElementById('test'), aElements[nCounter], new Date());
47+
nIdTimeout = setInterval(function()
48+
{
49+
if(nCounter === 4)
50+
{
51+
clearInterval(nIdTimeout);
52+
}
53+
oLazy.update(aElements[nCounter++], new Date());
54+
}, 500);
55+
</script>
56+
</body>
57+
</html>

‎Module Revealed/ModuleRevealed.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
(function(win)
2+
{
3+
var oContainer = null;
4+
function setContainer(oCont)
5+
{
6+
oContainer = oCont;
7+
}
8+
function addZero(nTime)
9+
{
10+
return nTime < 10? '0' + nTime: nTime;
11+
}
12+
function getFormattedTime(dTime)
13+
{
14+
return addZero(dTime.getHours()) + ":" + addZero(dTime.getMinutes()) + ":" + addZero(dTime.getSeconds());
15+
}
16+
function insertTestModule()
17+
{
18+
oContainer.innerHTML = 'Test Module: ' + getFormattedTime(new Date());
19+
}
20+
function removeContent()
21+
{
22+
oContainer.innerHTML = '';
23+
}
24+
win.ModuleRevealed = {
25+
init: function(oContainer)
26+
{
27+
setContainer(oContainer);
28+
insertTestModule();
29+
},
30+
destroy: function()
31+
{
32+
removeContent();
33+
}
34+
};
35+
}(window));

‎Module Revealed/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<html>
2+
<head>
3+
<link type="text/css" rel="stylesheet" href="../css/style.css"/>
4+
<title>Module Revealed Pattern</title>
5+
<script type="text/javascript" src="ModuleRevealed.js"></script>
6+
<style type="text/css">
7+
#test
8+
{
9+
margin-left: 40px;
10+
}
11+
#test span
12+
{
13+
margin-right: 10px;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<div id="source">
19+
<h2>Source</h2>
20+
<pre>
21+
ModuleRevealed.init(document.getElementById('test'));
22+
</pre>
23+
</div>
24+
<div id="console">
25+
<h2>Console</h2>
26+
<div id="test"></div>
27+
<ul></ul>
28+
<h1>Module Revealed</h1>
29+
</div>
30+
<script type="text/javascript" src="../js/utils.js"></script>
31+
<script type="text/javascript">
32+
ModuleRevealed.init(document.getElementById('test'));
33+
</script>
34+
</body>
35+
</html>

‎Module/Module.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var Module = (function()
2+
{
3+
return {
4+
container: document.getElementById("test"),
5+
init: function()
6+
{
7+
this.container.innerHTML = 'Test module';
8+
},
9+
destroy: function()
10+
{
11+
this.container.innerHTML = '';
12+
}
13+
};
14+
});

‎Module/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<html>
2+
<head>
3+
<link type="text/css" rel="stylesheet" href="../css/style.css"/>
4+
<title>Module Pattern</title>
5+
<script type="text/javascript" src="Module.js"></script>
6+
<style type="text/css">
7+
#test
8+
{
9+
margin-left: 40px;
10+
}
11+
#test span
12+
{
13+
margin-right: 10px;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<div id="source">
19+
<h2>Source</h2>
20+
<pre>
21+
var oModule = Module();
22+
oModule.init();
23+
</pre>
24+
</div>
25+
<div id="console">
26+
<h2>Console</h2>
27+
<div id="test"></div>
28+
<ul></ul>
29+
<h1>Module</h1>
30+
</div>
31+
<script type="text/javascript" src="../js/utils.js"></script>
32+
<script type="text/javascript">
33+
var oModule = Module();
34+
oModule.init();
35+
</script>
36+
</body>
37+
</html>

‎Namespace/Namespace.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
(function(win, doc, ns)
2+
{
3+
var Ajax = function()
4+
{
5+
console.log('Ajax: Instanced!');
6+
};
7+
Ajax.prototype.setUp = function()
8+
{
9+
console.log('Ajax: Setup!');
10+
return this;
11+
};
12+
Ajax.prototype.call = function()
13+
{
14+
console.log('Ajax: Call!');
15+
};
16+
var DOM = function()
17+
{
18+
console.log('DOM: Instanced!');
19+
};
20+
DOM.prototype.byId = function(sId)
21+
{
22+
console.log('DOM: ById ' + sId + '!')
23+
};
24+
ns.DOM = new DOM();
25+
ns.Ajax = Ajax;
26+
}(window, document, App));

‎Namespace/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<html>
2+
<head>
3+
<link type="text/css" rel="stylesheet" href="../css/style.css"/>
4+
<title>Namespace Pattern</title>
5+
<script type="text/javascript">
6+
var App = {};
7+
</script>
8+
<script type="text/javascript" src="Namespace.js"></script>
9+
<style type="text/css">
10+
#test
11+
{
12+
margin-left: 40px;
13+
}
14+
#test span
15+
{
16+
margin-right: 10px;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<div id="source">
22+
<h2>Source</h2>
23+
<pre>
24+
App.DOM.byId('test');
25+
var oAjax = new App.Ajax();
26+
oAjax.setUp().call();
27+
</pre>
28+
</div>
29+
<div id="console">
30+
<h2>Console</h2>
31+
<ul></ul>
32+
<h1>Namespace</h1>
33+
</div>
34+
<script type="text/javascript" src="../js/utils.js"></script>
35+
<script type="text/javascript">
36+
App.DOM.byId('test');
37+
var oAjax = new App.Ajax();
38+
oAjax.setUp().call();
39+
</script>
40+
</body>
41+
</html>

0 commit comments

Comments
 (0)