首页 > 其他分享 >JS 设计模式

JS 设计模式

时间:2023-03-07 12:22:23浏览次数:34  
标签:JS 对象 模式 工厂 实例 原型 设计模式

为什么会出现设计模式

随着公司业务的不断迭代和扩张,项目的复杂程度也在不断加强,如果不采取一些方法那么项目会变的难以开发及维护;而设计模式就是为了解决这样的问题诞生的。

设计模式通过将变与不变分离,确保变化的部分灵活、不变的部分稳定,来帮助开发者开发出“健壮”的代码,保证代码的可扩展性和高维护性。

JavaScript 设计模式的原则

JavaScript 设计模式围绕“单一功能”和“开放封闭”这两个原则来展开

 

下面我们来介绍下js的几种设计模式吧

一、构造器模式

对于构造器模式大家非常熟悉,我们平时使用的构造函数就是应用了构造器模式

 

 

构造函数每new一个实例,就会开启一个内存空间,像name、age的属性值是不一样的,所以给他们独自的内存空间是正确的,但是toStr是个方法,每个实例的方法都一样的,却也开辟了自己的内存空间,这样造成了内存的浪费

二、原型模式

要理解原型模式,我们必须要理解什么是原型对象

 

只要创建了一个新函数(非箭头函数),该函数就会有一个prototype属性,这个属性指向函数的原型对象,在默认情况下,所有的原型对象都会有一个constructor(构造函数)属性,而这个属性是一个指向prototype属性所在的函数的指针。

 

如果使用原型模式,我们只需要调用负责克隆的方法,便能完成同样的功能。还以Person为例

 

但是呢这样new实例都指向了Person.prototype对象,指向了同一内存空间,虽然解决了toStr这个方法在构造器模式的内存浪费问题,Person的实例对象其他的属性相互受到了影响。

所以我们让构造器模式与原型模式结合一下

 

或者用ce6的新语法class

 

三、工厂模式

工厂模式是一种创建型模式,也可以说,工厂模式就是创建对象的一种方式。

应用:工厂模式被广泛应用于软件工程领域,来抽象的创建特定对象的过程。

作用:创建对象;降低代码冗余度。

应用场景:要批量生产同种类的对象;如,你要生成一个班级没个学生某次考试的分数,有语文、数学、英语等。这时候你创建一个“工厂”,把信息丢到工厂里,工厂就给你造一个学生的考分出来,非常方便。

使用工厂模式创建对象

只要我们往工厂函数里面塞参数,工厂函数就会像生产产品一样造个学生的分数出来;但是工厂模式的本质是将创建对象的过程进行了封装,我们创建一个 学生分数(stuScore) 时无法知道其具体的数据类型,只知道是个对象,可大多的实际开发中我们有需要知道这个对象到底是个StuScore的实例还是Student的实例。 

四、抽象工厂模式

定义:使用一种工厂模式就可以创建多个抽象角色。

抽象工厂模式向用户提供了一个基础接口,使用户在不指定产品的具体的情况下,创建出多个用户产品族中的产品对象。

抽象工厂像极了生产工厂,抽象工厂是实现子类继承父类的方法。

例如:

抽象工厂不可以接创建实例,个人认为在项目中应该蛮实用的 少了很多的new 组合比较灵活

 更新中。。。

 

标签:JS,对象,模式,工厂,实例,原型,设计模式
From: https://www.cnblogs.com/gerrytong/p/17180841.html

相关文章

  • 设计模式-javascript实现【状态模式】
    定义:允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类。其主要原理是将状态封装成独立的类,并将请求委托给当前的状态对象,当对象内部状态变化时,会......
  • 【vue开发】vue 项目中 .eslintrc.js 配置示例,有配置说明
    module.exports={root:true,env:{node:true},extends:['plugin:vue/essential','plugin:vue/recommended','eslint:recommended'],parserOpt......
  • 90js_debugger调式,var,let,const
    自己写了一个js文件,主要是记录web页面F12调式代码如下:functiona(){leta_var="a";b(a_var);}functionb(a_var_from_a){debugger;console.log(globa......
  • 前端设计模式——单例模式
    单例模式是一种设计模式,它可以确保某个类只有一个实例,并提供一个全局的访问点来访问该实例,我们可以使用单例模式来管理全局状态和共享资源。在JavaScript中,单例模式可以通......
  • JS原生---歌词滚动效果案例
    【开门见山】实现目标:需要让歌词列表随着播放的时间更新而滚动,即实时的跟随歌曲的进度而滚动效果:​编辑 需要事先准备的东西:1.音频(mp3格式):​编辑 2.歌词(详细):​......
  • crypto.js 前端加解密
    crypto-js是谷歌开发的一个纯JavaScript的加密算法类库,可以非常方便的在前端进行其所支持的加解密操作。目前crypto-js已支持的算法有:MD5、SHA-1、SHA-256、AES、RSA、Rabb......
  • AES---JS加密python解密
    一.AES加密解密1.AES-128-CBCZero:数据长度不足时填充0,如果数据长度刚好合适就不填充PKCS5:填充8字节长度的ASCII码编号为8的字符PKCS7:(1)数据如果长度刚好合适,就填充数据......
  • java23种设计模式学习
    1、策略模式理解:就是通过传不同的参数,调用不同的对象代码实操publicinterfaceIStrategy{voidoperate();}publicclassBackDoorimplementsIStrategy{......
  • Book-深入设计模式-访问者模式
    Book-深入设计模式-访问者模式https://refactoringguru.cn/design-patterns/visitor访问者模式亦称:Visitor访问者模式是一种行为设计模式,它能将算法与其所作用的对象......
  • angularJs的作用域对象和控制器,依赖对象,依赖注入
    需要注意的是使用$scope,需要使用以下版本<scriptsrc="https://cdn.staticfile.org/angular.js/1.2.29/angular.min.js"></script>   代码部分<!DOCTYPE......