Skip to content

Commit 7edcf73

Browse files
chuanxshichuanxshi
committed
added more object creation patterns
1 parent 1d5b010 commit 7edcf73

File tree

6 files changed

+212
-2
lines changed

6 files changed

+212
-2
lines changed

‎object-creation-patterns/chaining.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script>
9+
/* Title: Chaining Pattern
10+
Description: it enables you to call methods on an object one after the other
11+
*/
12+
13+
var obj = {
14+
value: 1,
15+
increment: function () {
16+
this.value += 1;
17+
return this;
18+
},
19+
add: function (v) {
20+
this.value += v;
21+
return this;
22+
},
23+
shout: function () {
24+
console.log(this.value);
25+
}
26+
};
27+
28+
// chain method calls
29+
obj.increment().add(3).shout(); // 5
30+
31+
// as opposed to calling them one by one
32+
// obj.increment();
33+
// obj.add(3);
34+
// obj.shout();
35+
</script>
36+
</body>
37+
</html>

‎object-creation-patterns/object-constants.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!doctype html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<title>JavaScript Patterns</title>

‎object-creation-patterns/private-static-members.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script>
9+
/* Title: Private Static Members
10+
Description: shared by all the objects with the same constructor function and not accessible outside the constructor
11+
*/
12+
13+
// method 1
14+
var Gadget = (function () {
15+
16+
// static variable/property
17+
var counter = 0;
18+
19+
// returning the new implementation
20+
// of the constructor
21+
return function () {
22+
console.log(counter += 1);
23+
};
24+
}()); // execute immediately
25+
26+
var g1 = new Gadget(); // logs 1
27+
var g2 = new Gadget(); // logs 2
28+
var g3 = new Gadget(); // logs 3
29+
30+
31+
// method 2
32+
var Gadget = (function () {
33+
34+
// static variable/property
35+
var counter = 0,
36+
NewGadget;
37+
38+
// this will become the
39+
// new constructor implementation
40+
NewGadget = function () {
41+
counter += 1;
42+
};
43+
44+
// a priviledged method
45+
NewGadget.prototype.getLastId = function () {
46+
return counter;
47+
};
48+
49+
// overwrite the contructor
50+
return NewGadget;
51+
52+
}()); // execute immediately
53+
54+
var iphone = new Gadget();
55+
iphone.getLastId(); // 1
56+
var ipod = new Gadget();
57+
ipod.getLastId(); // 2
58+
var ipad = new Gadget();
59+
ipad.getLastId(); // 3
60+
</script>
61+
</body>
62+
</html>

‎object-creation-patterns/public-static-members.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script>
9+
/* Title: Public Static Members
10+
Description: accessible outside the constructor
11+
*/
12+
13+
// Public Static Members
14+
15+
// counstructor
16+
var Gadget = function () {};
17+
18+
// a static method
19+
Gadget.isShiny = function () {
20+
return "you bet";
21+
};
22+
23+
// a normal method added to the prototype
24+
Gadget.prototype.setPrice = function (price) {
25+
this.price = price;
26+
};
27+
28+
// calling a static method
29+
console.log(Gadget.isShiny()); // "you bet"
30+
31+
// creating an instance and calling a method
32+
var iphone = new Gadget();
33+
iphone.setPrice(500);
34+
35+
console.log(typeof Gadget.setPrice); // "undefined"
36+
console.log(typeof iphone.isShiny); // "undefined"
37+
38+
Gadget.prototype.isShiny = Gadget.isShiny;
39+
console.log(iphone.isShiny()); // "you bet"
40+
41+
42+
// constructor
43+
var Gadget= function (price) {
44+
this.price = price;
45+
};
46+
47+
// a static method
48+
Gadget.isShiny = function () {
49+
50+
// this always works
51+
var msg = "you bet";
52+
53+
if (this instanceof Gadget) {
54+
// this only works if called non-statically
55+
msg += ", it costs $" + this.price + '!';
56+
}
57+
58+
return msg;
59+
};
60+
61+
// a normal method added to the prototype
62+
Gadget.prototype.isShiny = function () {
63+
return Gadget.isShiny.call(this);
64+
};
65+
66+
console.log(Gadget.isShiny()); // "you bet"
67+
68+
var a = new Gadget('499.99');
69+
console.log(a.isShiny()); // "you bet, it costs $499.99!"
70+
71+
72+
73+
</script>
74+
</body>
75+
</html>

‎object-creation-patterns/sandbox.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!doctype html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<title>JavaScript Patterns</title>

‎object-creation-patterns/sugar-method.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script>
9+
/* Title: method() Method
10+
Description: adding convenient funcationality to a language
11+
*/
12+
13+
var Person = function (name) {
14+
this.name= name;
15+
}.
16+
method('getName', function () {
17+
return this.name;
18+
}).
19+
method('setName', function (name) {
20+
this.name = name;
21+
return this;
22+
});
23+
24+
var a = new Person('Adam');
25+
a.getName(); // 'Adam'
26+
a.setName('Eve').getName(); // 'Eve'
27+
28+
if (typeof Function.prototype.method !== "function") {
29+
Function.prototype.method = function (name, implementation) {
30+
this.prototype[name] = implementation;
31+
return this;
32+
};
33+
}
34+
</script>
35+
</body>
36+
</html>

0 commit comments

Comments
 (0)