【JavaScript 面向对象编程——《设计模式》】计数器例子

最新推荐文章于 2023-10-12 00:20:40 发布
最新推荐文章于 2023-10-12 00:20:40 发布
阅读量235 收藏 2
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/107073315
版权

相关文章导航

     【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() {
			// 计数器 1
			var Counter1 = makeCounter(0);
			var add1 = document.getElementById('add1');
			var red1 = document.getElementById('red1');
			var demo1 = document.getElementById('demo1');
			event(demo1, add1, red1, Counter1);

			// 计数器 2
			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();	// var o = {};

			// 加工
			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() {	
			// 计数器 1
			var Counter1 = makeCounter(0);
			var add1 = document.getElementById('add1');
			var red1 = document.getElementById('red1');
			var demo1 = document.getElementById('demo1');
			event(demo1, add1, red1, Counter1);

			// 计数器 2
			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() {
			// 计数器 1
			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);

			// 计数器 2
			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() {}

		// 原型模式，使用 prototype(原型属性) 定义属性和方法 
		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() {
			// 计数器 1
			var Counter1 = new makeCounter();
			var add1 = document.getElementById('add1');
			var red1 = document.getElementById('red1');
			var demo1 = document.getElementById('demo1');
			event(demo1, add1, red1, Counter1);

			// 计数器 2
			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;
			}
		}

		// prototype(原型属性) 定义共享的属性和方法
		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() {
			// 计数器 1
			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);
			
			// 计数器 2
			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）另外这种模式还支持传递初始参数，使用最广泛；

  • 【缺点】：…
iuukai
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
java源码包---java 源码 大量 实例
04-18
　Java二进制IO类与文件复制操作实例，好像是一本书的例子，源代码有的是独立运行的，与同目录下的其它代码文件互不联系，这些代码面向初级、中级Java程序员。 Java访问权限控制源代码 1个目标文件 摘要:Java源码,...
JAVA上百实例源码以及开源项目源代码
12-11
内容索引:JAVA源码,媒体网络,飞鸽传书 Java局域网通信——飞鸽传书源代码，大家都知道VB版、VC版还有Delphi版的飞鸽传书软件，但是Java版的确实不多，因此这个Java文件传输实例不可错过，Java网络编程技能的提升很有...
【JavaScript 面向对象编程——《深浅拷贝》】计数器例子
iuukai
07-01 152
相关文章导航 ????【JavaScript 面向对象编程——《深浅拷贝》】计数器例子????      【JavaScript 面向对象编程——《设计模式》】计数器例子      【JavaScript 面向对象编程——《原型继承》】计数器例子 关于深浅拷贝： 【JavaScript 浅拷贝】Object.create()、Object.assign()、扩展运算符 【JavaScript 深拷
js实现简单计算器（样式酷炫）
Lucky Star的博客
09-07 1875
js实现简单计算器 js实现简单计算器 不要进行除0操作 C 0 7 8 9 + 4 5 6 - 1 2 3 * 0 . = / Reset Universe? style.css
【JavaScript 面向对象编程——《原型继承》】计数器例子
iuukai
07-01 210
相关文章导航      【JavaScript 面向对象编程——《深浅拷贝》】计数器例子      【JavaScript 面向对象编程——《设计模式》】计数器例子 ????【JavaScript 面向对象编程——《原型继承》】计数器例子???? 文章目录 ...
刷题笔记（第一天）
最新发布
m0_62508027的博客
10-12 244
当一个函数定义在另一个函数内部，并且内部函数引用了外部函数作用域中的变量时，就会创建一个闭包。当内部函数从外部函数返回时，它会保留对外部函数作用域的引用，即使在外部函数执行完毕后，仍然可以继续访问这些变量。简单来说，闭包可以“记住”来自其外部函数作用域的值，并在以后使用它们，即使外部函数已经返回，而这些值通常已经超出范围。在这个例子中，add() 函数返回了另一个接受单个参数的函数，该函数返回参数与外部函数作用域中的 x 值的总和。2.（1）给定一个整型参数 n，请你编写并返回一个 counter 函数。
Javascript 闭包的理解
weixin_30625691的博客
10-15 68
Javascript 闭包的理解 示例1： function makeCounter() { var i = 0; console.log( ++i ); } var counter = makeCounter(); // 输出: 1 counter(); //TypeError: undefined ...
JAVA上百实例源码以及开源项目
01-03
　Java二进制IO类与文件复制操作实例，好像是一本书的例子，源代码有的是独立运行的，与同目录下的其它代码文件互不联系，这些代码面向初级、中级Java程序员。 Java访问权限控制源代码 1个目标文件 摘要:Java源码,...
java源码包2
04-20
　Java二进制IO类与文件复制操作实例，好像是一本书的例子，源代码有的是独立运行的，与同目录下的其它代码文件互不联系，这些代码面向初级、中级Java程序员。 Java访问权限控制源代码 1个目标文件 摘要:Java源码...
java源码包3
04-20
　Java二进制IO类与文件复制操作实例，好像是一本书的例子，源代码有的是独立运行的，与同目录下的其它代码文件互不联系，这些代码面向初级、中级Java程序员。 Java访问权限控制源代码 1个目标文件 摘要:Java源码...
Js实现简单计算器3 面向对象的方法 优化写法
milloc的博客
08-10 941
js实现简单计算器
再学python3(三)：python的函数
七刀的专栏
03-02 233
一、函数初级 # 函数动态参数 *args **kwargs # * 可动态接收参数个数， 组成元组，但不能接收按照关键字传参 def addNum1(*args): num = 0 for i in args: num += i; return num print(addNum1(2, 4)) print(addNum1(2, 4, 6)) #...
关于<script>元素（js两种引用方法：内部嵌入，外部引入）
iuukai
07-12 5834
文章目录一、在HTML中引用JavaScirpt脚本的方法有两种：内部嵌入和外部引用。二、在同一个HTML文档中，调用多个JavaScript脚本。三、<script>元素定义的6个属性。 一、在HTML中引用JavaScirpt脚本的方法有两种：内部嵌入和外部引用。 关于<script>标签的位置问题，虽然<script></script>可以放在...
setTimeout() 与 setInterval() 的区别及使用
iuukai
06-14 5117
Test1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> //变量初始化 var num1 = 0; var num2 = 0; var clock1; var clock2; //定义启动器 function work(ele)
【JavaScript】数值精度与数值范围
iuukai
09-10 3290
文章目录一、整数与浮点数二、精度丢失1. 组成2. 二进制表示3. 如何解决三、整数精度四、数值范围1. 正向溢出与负向溢出2. 利用 Number 对象返回具体最大值和最小值 一、整数与浮点数 JavaScript 内的数字没有 int(整数型) 与 float(浮点型) 之分，即 1 与 1.0 相同，为同一个数。 JavaScript 内所有数字都是浮点数，若遇到需要整数才能运算的情况，JavaScript 会自行将64位浮点数转成32位整数，再进行运算，而这个转换过程，便导致了精度丢失。 0.1 +
【JavaScript】《整体代码script》为何是一个宏任务
iuukai
07-14 2868
JavaScript是一门单线程的语言，因此，JavaScript在同一个时间只能做一件事，单线程意味着，如果在同个时间有多个任务的话，这些任务就需要进行排队，前一个任务执行完，才会执行下一个任务。 有很多小伙伴不明白【整体代码script】为何是一个宏任务，为了让大家更好理解这里举个栗子… 例子① <!-- 脚本 1 --> <script> // 同步 console.log('start1') // 异步宏 setTimeout(() => console.l.
【HTML5】Web SQL Database【已废弃】（可能是最全详解，含各种参数介绍，以及一些SQL语句）
iuukai
07-16 2304
在阅读本篇文章之前，请先注意以下几点声明： 1. 原文：  Beware. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further.  译文：   注意。此规范不再处于主动维护中，Web应用程序工作组不打算进一步维护它。 2. 原文：  This document was on th
【HTML5 + API】 地理定位（Geolocation）之【Google 地图 API 用不了？不如换国内地图 API ！！】
iuukai
07-11 1783
文章目录前提百度地图 API （简单教程）1. 获取经纬度2. 处理错误和拒绝3. 在地图中显示结果注意！！！！！ 前提   这几天在菜鸟学习 HTML5 教程，学到地理定位，发现一个很严重的问题，Google 地理位置服务早已不提供给我国，然，各大教程的代码和方法，都是由 Google 服务支持的，那不就不可用了么？   菜鸟教程：HTML5 Geolocation（地理定位）   我的学习方法是必须照着敲一遍，然后再各大浏览器运行测试一遍，若都可兼容运行那我才会去消化掉这些知识。所以，我把代码放去 E
现代JavaScript面向对象编程探索
"javascript面向对象编程" JavaScript面向对象编程是一种基于对象和原型的编程范式，...在深入学习时，还会涉及到闭包、模块化、类（ES6引入）以及更高级的继承模式，这些都是JavaScript面向对象编程的重要组成部分。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值