相关文章导航
【JavaScript 面向对象编程——《深浅拷贝》】计数器例子
👉【JavaScript 面向对象编程——《设计模式》】计数器例子👈
【JavaScript 面向对象编程——《原型继承》】计数器例子
文章目录
一、模块模式优缺点
二、工厂模式优缺点
三、构造函数模式优缺点
四、原型模式优缺点
五、混合模式（构造函数模式 + 原型模式）优缺点
一、模块模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var makeCounter = (function(n) {
var num = n;
function changeBy(val) {
num += val;
}
return {
add : function() {
changeBy(1);
},
red : function() {
changeBy(-1);
},
value : function() {
return num;
}
}
});
function event(ele, btn1, btn2, obj) {
btn1.onclick = function() {
obj.add();
ele.innerHTML = obj.value();
}
btn2.onclick = function() {
obj.red();
ele.innerHTML = obj.value();
}
ele.innerHTML = obj.value();
}
window.onload = function() {
var Counter1 = makeCounter(0);
var add1 = document.getElementById('add1');
var red1 = document.getElementById('red1');
var demo1 = document.getElementById('demo1');
event(demo1, add1, red1, Counter1);
var Counter2 = makeCounter(0);
var add2 = document.getElementById('add2');
var red2 = document.getElementById('red2');
var demo2 = document.getElementById('demo2');
event(demo2, add2, red2, Counter2);
}
</script>
</head>
<body>
<h3>模块模式
</h3>
<hr />
<p>计数器 1
</p>
<input type="button" id="add1" value="自增 (+1)" />
<input type="button" id="red1" value="自减 (-1)" />
<p id="demo1"></p>
<hr />
<p>计数器 2
</p>
<input type="button" id="add2" value="自增 (+1)" />
<input type="button" id="red2" value="自减 (-1)" />
<p id="demo2"></p>
</body>
</html>
优缺点
【优点】：Module 模式用于进一步模拟类的概念，通过这种方式，能够使一个单独的对象用于公有 / 私有方法和变量，从而屏蔽来自全局作用域的特殊部分。产生的结果是：函数名与在页面上其他脚本定义的函数冲突的可能性降低。 【缺点】：…
二、工厂模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function makeCounter(n) {
var o = new Object();
o.num = n;
o.changeBy = function(val) {
this.num += val;
};
o.add = function() {
this.changeBy(1)
};
o.red = function() {
this.changeBy(-1);
}
o.value = function() {
return this.num;
}
return o;
}
function event(ele, btn1, btn2, obj) {
btn1.onclick = function() {
obj.add();
ele.innerHTML = obj.value();
}
btn2.onclick = function() {
obj.red();
ele.innerHTML = obj.value();
}
ele.innerHTML = obj.value();
}
window.onload = function() {
var Counter1 = makeCounter(0);
var add1 = document.getElementById('add1');
var red1 = document.getElementById('red1');
var demo1 = document.getElementById('demo1');
event(demo1, add1, red1, Counter1);
var Counter2 = makeCounter(0);
var add2 = document.getElementById('add2');
var red2 = document.getElementById('red2');
var demo2 = document.getElementById('demo2');
event(demo2, add2, red2, Counter2);
}
</script>
</head>
<body>
<h3>工厂模式
</h3>
<hr />
<p>计数器 1
</p>
<input type="button" id="add1" value="自增 (+1)" />
<input type="button" id="red1" value="自减 (-1)" />
<p id="demo1"></p>
<hr />
<p>计数器 2
</p>
<input type="button" id="add2" value="自增 (+1)" />
<input type="button" id="red2" value="自减 (-1)" />
<p id="demo2"></p>
</body>
</html>
优缺点
【优点】：解决了创建多个对象的问题。 【缺点】：但是没有结解决对象识别的问题（怎样知道一个对象的类型）。
三、构造函数模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function MakeCounter(n) {
this.num = n;
this.changeBy = function(val) {
this.num += val;
};
this.add = function() {
this.changeBy(1);
};
this.red = function() {
this.changeBy(-1);
};
this.value = function() {
return this.num;
};
}
function event(ele, btn1, btn2, obj) {
btn1.onclick = function() {
obj.add();
ele.innerHTML = obj.value();
}
btn2.onclick = function() {
obj.red();
ele.innerHTML = obj.value();
}
ele.innerHTML = obj.value();
}
window.onload = function() {
var Counter1 = new MakeCounter(0);
var add1 = document.getElementById('add1');
var red1 = document.getElementById('red1');
var demo1 = document.getElementById('demo1');
event(demo1, add1, red1, Counter1);
var Counter2 = new MakeCounter(0);
var add2 = document.getElementById('add2');
var red2 = document.getElementById('red2');
var demo2 = document.getElementById('demo2');
event(demo2, add2, red2, Counter2);
}
</script>
</head>
<body>
<h3>构造函数模式
</h3>
<hr />
<p>计数器 1
</p>
<input type="button" id="add1" value="自增 (+1)" />
<input type="button" id="red1" value="自减 (-1)" />
<p id="demo1"></p>
<hr />
<p>计数器 2
</p>
<input type="button" id="add2" value="自增 (+1)" />
<input type="button" id="red2" value="自减 (-1)" />
<p id="demo2"></p>
</body>
</html>
优缺点
【优点】：没有显示的创建对象，没有返回语句，直接将属性赋给 this 对象，将 MakeCounter 的实例对象标识为一种特定的类型。 【缺点】：每个方法在每个实例上面都需要重新定义一遍。
四、原型模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function makeCounter() {}
makeCounter.prototype.num = 0;
makeCounter.prototype.changeBy = function(val) {
this.num += val;
};
makeCounter.prototype.add = function() {
this.changeBy(1);
};
makeCounter.prototype.red = function() {
this.changeBy(-1);
};
makeCounter.prototype.value = function() {
return this.num;
};
function event(ele, btn1, btn2, obj) {
btn1.onclick = function() {
obj.add();
ele.innerHTML = obj.value();
}
btn2.onclick = function() {
obj.red();
ele.innerHTML = obj.value();
}
ele.innerHTML = obj.value();
}
window.onload = function() {
var Counter1 = new makeCounter();
var add1 = document.getElementById('add1');
var red1 = document.getElementById('red1');
var demo1 = document.getElementById('demo1');
event(demo1, add1, red1, Counter1);
var Counter2 = new makeCounter();
var add2 = document.getElementById('add2');
var red2 = document.getElementById('red2');
var demo2 = document.getElementById('demo2');
event(demo2, add2, red2, Counter2);
}
</script>
</head>
<body>
<h3>原型模式
</h3>
<hr />
<p>计数器 1
</p>
<input type="button" id="add1" value="自增 (+1)" />
<input type="button" id="red1" value="自减 (-1)" />
<p id="demo1"></p>
<hr />
<p>计数器 2
</p>
<input type="button" id="add2" value="自增 (+1)" />
<input type="button" id="red2" value="自减 (-1)" />
<p id="demo2"></p>
</body>
</html>
优缺点
【优点】：省略了为构造函数传递初始化参数，结果所有实例享有相同的属性（对于函数实用，但是对于那些基本属性也说的过去，但是对于引用类型的数据就麻烦了）。 【缺点】：基本属性我们可以在实例当中添加一个同名属性，这样可以隐藏原型当中的对应的属性，但是引用类型的属性却会导致所有实例共享。
五、混合模式（构造函数模式 + 原型模式）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function MakeCounter(n) {
this.num = n;
this.changeBy = function(val) {
this.num += val;
}
}
MakeCounter.prototype.add = function() {
this.changeBy(1);
};
MakeCounter.prototype.red = function() {
this.changeBy(-1);
};
MakeCounter.prototype.value = function() {
return this.num;
};
function event(ele, btn1, btn2, obj) {
btn1.onclick = function() {
obj.add();
ele.innerHTML = obj.value();
}
btn2.onclick = function() {
obj.red();
ele.innerHTML = obj.value();
}
ele.innerHTML = obj.value();
}
window.onload = function() {
var Counter1 = new MakeCounter(0);
var add1 = document.getElementById('add1');
var red1 = document.getElementById('red1');
var demo1 = document.getElementById('demo1');
event(demo1, add1, red1, Counter1);
var Counter2 = new MakeCounter(0);
var add2 = document.getElementById('add2');
var red2 = document.getElementById('red2');
var demo2 = document.getElementById('demo2');
event(demo2, add2, red2, Counter2);
}
</script>
</head>
<body>
<h3>混合模式
</h3>
<hr />
<p>计数器 1
</p>
<input type="button" id="add1" value="自增 (+1)" />
<input type="button" id="red1" value="自减 (-1)" />
<p id="demo1"></p>
<hr />
<p>计数器 2
</p>
<input type="button" id="add2" value="自增 (+1)" />
<input type="button" id="red2" value="自减 (-1)" />
<p id="demo2"></p>
</body>
</html>
优缺点
【优点】：a）构造函数用于定义实例的属性，而原型模式用于定义方法和一些共享的属性；b）每个实例都会有自己的属性，但同时又共享着方法，最大限度的节省了内存；c）另外这种模式还支持传递初始参数，使用最广泛； 【缺点】：…
