Skip to content

Commit 80241d1

Browse files
chuanxshichuanxshi
committed
added decorator, factory and observer patterns
1 parent a17101a commit 80241d1

File tree

3 files changed

+204
-0
lines changed

3 files changed

+204
-0
lines changed

‎design-patterns/decorator.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
6+
</head>
7+
<body>
8+
<script>
9+
var tree = {};
10+
tree.decorate = function() {
11+
console.log('Make sure the tree won\'t fall');
12+
};
13+
14+
tree.getDecorator = function(deco) {
15+
tree[deco].prototype = this;
16+
return new tree[deco];
17+
};
18+
19+
tree.RedBalls = function() {
20+
this.decorate = function() {
21+
this.RedBalls.prototype.decorate();
22+
console.log('Put on some red balls');
23+
}
24+
};
25+
26+
tree.BlueBalls = function() {
27+
this.decorate = function() {
28+
this.BlueBalls.prototype.decorate();
29+
console.log('Add blue balls');
30+
}
31+
};
32+
33+
tree.Angel = function() {
34+
this.decorate = function() {
35+
this.Angel.prototype.decorate();
36+
console.log('An angel on the top');
37+
}
38+
};
39+
40+
tree = tree.getDecorator('BlueBalls');
41+
tree = tree.getDecorator('Angel');
42+
tree = tree.getDecorator('RedBalls');
43+
44+
tree.decorate();
45+
</script>
46+
</body>
47+
</html>

‎design-patterns/factory.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
6+
</head>
7+
<body>
8+
<script>
9+
/***
10+
var jsp = {};
11+
jsp.dom = {};
12+
jsp.dom.Text = function() {
13+
this.insert = function(where) {
14+
var txt = document.createTextNode(this.url);
15+
where.appendChild(txt);
16+
};
17+
};
18+
jsp.dom.Link = function() {
19+
this.insert = function(where) {
20+
var link = document.createElement('a');
21+
link.href = this.url;
22+
link.appendChild(document.createTextNode(this.url));
23+
where.appendChild(link);
24+
};
25+
};
26+
jsp.dom.Image = function() {
27+
this.insert = function(where) {
28+
var im = document.createElement('img');
29+
im.src = this.url;
30+
where.appendChild(im);
31+
};
32+
};
33+
jsp.dom.factory = function(type) {
34+
return new jsp.dom[type];
35+
}
36+
37+
var o = jsp.dom.factory('Link');
38+
o.url = 'http://google.com'
39+
o.insert(document.body);
40+
41+
var taskManager = {};
42+
43+
taskManager.update = function() {
44+
console.log("update");
45+
}
46+
47+
taskManager.read = function() {
48+
console.log("read");
49+
}
50+
51+
var type = "update";
52+
var task;
53+
54+
if (type === 'update') {
55+
task = new taskManager.update();
56+
}
57+
58+
if (type === 'read') {
59+
task = new taskManager.read();
60+
}
61+
62+
taskManager.factory = function (typeType) {
63+
return new taskManager[typeType];
64+
}
65+
66+
task = new taskManager[type];
67+
68+
/*** Built-in Object Factory ***/
69+
var o = new Object(),
70+
n = new Object(1),
71+
s = Object('1'),
72+
b = Object(true);
73+
74+
// test
75+
o.constructor === Object; // true
76+
n.constructor === Number; // true
77+
s.constructor === String; // true
78+
b.constructor === Boolean; // true
79+
80+
</script>
81+
</body>
82+
</html>

‎design-patterns/observer.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
6+
</head>
7+
<body>
8+
<script>
9+
var observer = {
10+
addSubscriber: function(callback) {
11+
this.subscribers[this.subscribers.length] = callback;
12+
},
13+
removeSubscriber: function(callback) {
14+
for (var i = 0; i < this.subscribers.length; i++) {
15+
if (this.subscribers[i] === callback) {
16+
delete(this.subscribers[i]);
17+
}
18+
}
19+
},
20+
publish: function(what) {
21+
for (var i = 0; i < this.subscribers.length; i++) {
22+
if (typeof this.subscribers[i] === 'function') {
23+
this.subscribers[i](what);
24+
}
25+
}
26+
},
27+
make: function(o) { // turns an object into a publisher
28+
for(var i in this) {
29+
o[i] = this[i];
30+
o.subscribers = [];
31+
}
32+
}
33+
};
34+
35+
var blogger = {
36+
writeBlogPost: function() {
37+
var content = 'Today is ' + new Date();
38+
this.publish(content);
39+
}
40+
};
41+
42+
var la_times = {
43+
newIssue: function() {
44+
var paper = 'Martians have landed on Earth!';
45+
this.publish(paper);
46+
}
47+
};
48+
49+
observer.make(blogger);
50+
observer.make(la_times);
51+
52+
var jack = {
53+
read: function(what) {
54+
console.log('I just read that ' + what)
55+
}
56+
};
57+
58+
var jill = {
59+
gossip: function(what) {
60+
console.log('You didn\'t hear it from me, but ' + what)
61+
}
62+
};
63+
64+
blogger.addSubscriber(jack.read);
65+
blogger.addSubscriber(jill.gossip);
66+
blogger.writeBlogPost();
67+
68+
blogger.removeSubscriber(jill.gossip);
69+
blogger.writeBlogPost();
70+
71+
la_times.addSubscriber(jill.gossip);
72+
la_times.newIssue();
73+
</script>
74+
</body>
75+
</html>

0 commit comments

Comments
 (0)