前言

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

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

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 内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

Javascript  Constructor构造器模式与Module模块模式的更多相关文章

  1. JavaScript类和继承 constructor属性

    本文介绍了JavaScript里面的constructor属性。这个属性是理解JavaScript类和继承的重要基础。

  2. Angular 理解module和injector,即依赖注入

    本文主要介绍Angular 理解module和injector的知识,这里整理了相关知识,并详细介绍了依赖注入的问题,有兴趣的小伙伴可以参考下

  3. Flutter Module添加到iOS项目示例详解

    这篇文章主要为大家介绍了Flutter Module添加到iOS项目示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  4. Angular Module声明和获取重载实例代码

    这篇文章主要介绍了Angular Module声明和获取重载实例代码的相关资料,需要的朋友可以参考下

  5. javascript new后的constructor属性

    new后的constructor属性使用说明,需要的朋友可以参考下。

  6. react组件中的constructor和super知识点整理

    这篇文章主要介绍了react组件中的constructor和super知识点整理,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  7. 深入浅析AngularJS中的module(模块)

    我们所说的模块,是你的AngularJS应用程序的一个组成部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等…都是属于一个模块,本文给大家介绍AngularJS中的module(模块) ,感兴趣的朋友一起学习吧

  8. Angular2中constructor和ngOninit的使用讲解

    这篇文章主要介绍了Angular2中constructor和ngOninit的使用讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  9. AngularJS Module方法详解

    AngularJS中的Module类负责定义应用如何启动,它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的

  10. 详解AngularJS中module模块的导入导出

    本文给大家介绍angularjs中module模块的导入导出,涉及到angularjs module相关知识,对angularjs module感兴趣的朋友一起看看吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部