广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Javascript Constructor构造器模式与Module模块模式
  • 369
分享到

Javascript Constructor构造器模式与Module模块模式

2024-04-02 19:04:59 369人浏览 薄情痞子
摘要

目录前言1.Constructor构造器模式1.1基础Constructor构造器模式1.2进阶 带原型的Constructor构造器模型2. Module 模块模式2.1对象字面量

前言

首先我们要知道:什么是模式?

模式,就是专门为某些常见问题开发的、优秀的解决方案。它通常经过一系列实践证明、针对某类问题具有可重用性的解决方案。 而设计模式,不同于编程模式,其与具体的语言无关。

1.Constructor构造器模式

1.1基础Constructor构造器模式

// 使用函数来模拟一个Car类
function Car(model,year,miles) {
	this.model = model ;
	this.year = year;
	this.miles = miles;

	this.toString = function () {
		return this.model + "已经行驶了" + this.miles + "米";
	}
}

//调用
var honda = new Car("东风Honda",2009,20000);//实例化Car

//输出结果
console.log(honda.toString());

缺陷:

  • 继承困难;
  • toString()是为每个使用Car构造器创建的新对象而分别重新定义的。这样不理想,因为这种函数应该在所有的Car类实力之间共享。

1.2进阶 带原型的Constructor构造器模型

function Car(model,year,miles) {
	this.model = model ;
	this.year = year;
	this.miles = miles;

	//每个对象都有构造器原型的所有属性。
	Car.prototype.toString = function() {
		return this.model + "已经行驶了" + this.miles + "米";
	}
}
//调用
var honda = new Car("东风Honda",2009,20000);//实例化Car
console.log(honda.toString());

优点:

  • toString()的单一实例能够在所有的Car对象之间共享。

2. Module 模块模式

模块能帮助我们清晰分离和组织项目中的代码单元。

在js中有几种实现模块的方法:

  • 对象字面量表示法;
  • Module模式
  • AMD模块
  • Commonjs模块
  • ES Harmony模块

本篇中我们主要介绍“对象字面量”表示法。

2.1对象字面量

示例:

<script type="text/javascript">
    const myObjectLiteral = {
        varibaleKey : varibaleValue,
        function: function () {
                //实现
        }
    };
</script>

注意 :

  • 对象字面量不需要使用 new 实例化;
  • 不能用在一个语句的开头,否则可能会被解释为一个块的开始;

2.2 Module(模块)模式

JS中,Module模式用于进一步模拟类的概念。它能够使一个单独的对象拥有公有、私有方法和变量,从而屏蔽来自 全局作用域的特殊部分。进而降低了与其他脚本冲突的可能性。

其中,私有部分,主要利用了“闭包”。由于闭包的存在,声明的变量和方法只能在该模式内部可用。但在返回对象上 定义的变量和方法,外部使用者是能够调用的。

一个关于购物车的例子:

<script type="text/javascript">
	const basketModule = (function() {
		//私有
		let baskey = [];
		function doSomethingPrivate () {
			//实现
		}
		function doSomethingElsePrivate() {
			//实现
		}
		//返回一个暴露出的公有对象api
		return {
			//添加item到购物车
			addItem: function (values) {
				basket.push(values);
			},
			//获取购物车里的item数
			getItemCount: function() {
				return basket.length;
			},
			//私有函数的公有形式别名
			doSomething: doSomethingPrivate,
			//获取购物车里所有item的价格总值
			getTotal: function() {
				let itemCount = this.getItemCount(),
					total = 0;
				while (itemCount--) {
					total += basket[itemCount].price;

				}
				return total;
			}
		}

	})();
	//交互
	basketModule.addItem({
		item: "bread",
		price: 0.5
	});
	basketModule.addItem({
		item: "酱油",
		price: 1.5
	});
	//输出结果
	console.log(basketModule.getItemCount());//2
	console.log(basketModule.getTotal());//0.5+1.5 = 2
	//注意
	console.log(basketModule.basket);//underfined。因为basket没有暴露在公有的API中
</script>

优点:

  • 整洁;
  • 支持私有数据。在 Module 模式中,代码的公有部分能够接触到私有部分,而外部代码无法接触到类的私有部分。

缺点:

  • 可见性需要改变时,需要修改每一处使用过该成员的地方;
  • 无法访问之后在方法中添加的私有成员;
  • 无法为私有成员创建自动化测试单元;

到此这篇关于Javascript  Constructor构造器模式与Module模块模式的文章就介绍到这了,更多相关Javascript  Constructor 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Javascript Constructor构造器模式与Module模块模式

本文链接: https://www.lsjlt.com/news/166020.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Javascript Constructor构造器模式与Module模块模式
    目录前言1.Constructor构造器模式1.1基础Constructor构造器模式1.2进阶 带原型的Constructor构造器模型2. Module 模块模式2.1对象字面量...
    99+
    2022-11-13
  • 解析Javascript设计模式Revealing Module 揭示模式单例模式
    目录1. Revealing Module 揭示模式2. Singleton 单例模式1. Revealing Module 揭示模式 该模式能够在私有范围内简单定义所有的函数和变量...
    99+
    2022-11-13
  • Go1.18多模块Multi-Module工作区模式是什么
    本文小编为大家详细介绍“Go1.18多模块Multi-Module工作区模式是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“Go1.18多模块Multi-Module工作区模式是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入...
    99+
    2023-06-29
  • 理解JavaScript设计模式中的建造者模式
    我们在前面已经提过设计模式创建型模式的 3 种工厂模式 和 单例模式;本篇带来同属创建型模式的“建造者模式” 建造者模式(Builder Pattern)使...
    99+
    2022-11-13
  • Go1.18 新特性之多模块Multi-Module工作区模式
    目录背景举例:未发布的 moduleGo1.18 新特性:多模块(Multi-Module)工作区模式Go1.18 工作区模式初始化一个新的工作区go.work 文件结构go.wor...
    99+
    2022-11-13
  • JavaScript模块模式的示例分析
    这篇文章主要介绍了JavaScript模块模式的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体如下:在JS中没有Class的概念...
    99+
    2022-10-19
  • Java结构型设计模式中建造者模式示例详解
    目录建造者模式概述角色优缺点应用场景基本使用创建产品类创建建造者类使用链式写法创建产品类与建造者类使用建造者模式 概述 建造者模式(Builder Pattern)属于创建型模式。 ...
    99+
    2022-11-13
  • PHP结构型模式之装饰器模式
    目录装饰器模式(Decorator Pattern)是什么装饰器模式的优点装饰器模式的实现装饰器模式的使用总结装饰器模式(Decorator Pattern)是什么 装饰器模式是一种...
    99+
    2023-05-15
    PHP装饰器模式 PHP结构型模式
  • javascript设计模式之迭代器模式
    目录迭代器模式介绍示例迭代器模式UML类图迭代器模式原生代码演示迭代器模式的场景ES6 Iterator示例总结迭代器模式介绍 顺序访问一个集合 顺序:如数组、类数组称为顺序,而非对...
    99+
    2022-11-12
  • MVC模式与三层架构
    目录1. 前言2. MVC模式3. 三层架构4. MVC和三层架构5. 总结5.1 IDEA 小技巧1. 前言 前面我们探讨了 JSP 的使用,随着计算机技术的不断更新迭代,JSP ...
    99+
    2023-03-21
    MVC模式 三层架构结构和作用
  • JavaScript设计模式适配器模式实例
    前言: 适配器设计模式可以用生活中常用的笔记本电脑来做例子,笔记本使用电压在20v左右,但是我们家用电压在220v左右,所以我们希望用家用电适配对应的笔记本电压,这个时候就需要使用电...
    99+
    2022-11-13
  • C#设计模式之适配器模式与装饰器模式的实现
    目录结构型设计模式适配器模式实现代码总结装饰器模式实现代码结构型设计模式 创建型设计模式主要是为了解决创建对象的问题,而结构型设计模式则是为了解决已有对象的使用问题。 适配器模式 适...
    99+
    2022-11-13
  • 怎样用Javascript实现建造者模式
    概述 建造者模式是相对比较简单的一种设计模式,属于创建型模式的一种; 定义:将一个复杂的对象分解成多个简单的对象来进行构建,将复杂的构建层与表现层分离,使相同的构建过程可以创建不同的...
    99+
    2022-11-12
  • JavaScript设计模式学习之适配器模式
    目录概述代码实现总结概述 适配器模式是设计模式行为型模式中的一种模式; 定义: 适配器用来解决两个已有接口之间不匹配的问题,它并不需要考虑接口是如何实现,也不用考虑将来该如何修改;适...
    99+
    2022-11-12
  • Java链式编程与Builder(建造者)设计模式
    一、链式编程 1.1.释义          链式编程,也叫级联式编程,调用对象的函数时返回一个this对象指向对象本身,达到链式效果,可以级联调用。  1.2.特点          可以通过一个方法调用多个方法,将多个方法调用链接起来,...
    99+
    2023-09-25
    java 开发语言
  • 结合ES6 编写 JavaScript 设计模式中的结构型模式
    目录前言什么是设计模式?结构型设计模式适配器模式实例桥接模式实例组合模式实例装饰者模式实例门面模式实例享元模式实例代理模式实例前言 本文将对 20 多种 JavaScript 设计模...
    99+
    2022-11-13
  • JavaScript设计模式之原型模式和适配器模式示例详解
    目录原型模式原型模式介绍代码实现适配器模式适配器模式介绍代码实现小结原型模式 原型模式介绍 原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象...
    99+
    2022-11-13
  • .Net创建型设计模式之建造者、生成器模式(Builder)
    目录一、动机(Motivation)二、意图(Intent)三、结构(Structure)四、模式的组成五、建筑者模式的具体实现六、建造者模式的实现要点1、建造者模式的优点:2、建造...
    99+
    2022-11-13
  • .Net设计模式之建造者、生成器模式怎么实现
    这篇文章主要讲解了“.Net设计模式之建造者、生成器模式怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“.Net设计模式之建造者、生成器模式怎么实现”吧!一、动机(Motivation...
    99+
    2023-06-30
  • Python设计模式中的结构型适配器模式
    目录一、适配器模式二、应用场景三、代码示例方式一方式二一、适配器模式 适配器,顾名思义是一种万能的接口,达到万能转换的效果。 适配器模式,定义一个适配器类,并且在该类中定义了适配器接...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作