前端javascript学习设计模式的理解

2019.07.01

579

作为前端新手,在学习了设计模式之后,我希望用一种易于理解的语言从源头解释它。当然,它不一定正确,只是对设计模式的简单理解。

创建型设计模式

创建型设计模式:顾名思义,这些模式用于创建实例对象

单例模式:首先我们必须了解单身人士是什么。

:它指的是一个。

:指创建的实例。

单例:指创建相同实例。也就是说,使用类创建的实例始终是相同的。

让我们看看以下代码:

上课的人{ 构造函数(){} } 设p1=new Person(); 设p2=new Person(); (p1===p2)//假

上面的代码定义了一个Person类。创建了此类的两个实例。我们可以看到这两个实例并不相同。也就是说,通过同一个类的实例获得的是不一样的(这就是为什么),但如果我们总是得到相同的情况下,那么这就是路**单。那么,如何实施单例模式:

要实现单例模式,我们必须注意两点:

需要使用return。如果在使用new时没有手动配置返回,则默认情况下将返回它。但是,我们希望每次都返回实例,也就是说,您必须手动控制创建的对象,因此这里需要使用return我们需要每次return的是同一个对象。换句话说,在第一个实例中,您需要保存此实例。在下一个实例中,直接返回此保存的实例。因此,这里需要用到闭包了

代码实现如下:

(function(){ Sea instance=null; 返回班级{ 构造函数(){ 是(实例){ //第一次创建实例,然后需要保存实例 实例=这个; } else { 返回实例 } } } })() 设p3=new Person(); 设p4=new Person(); (p3===p4)//是的

从前面的代码中,我们可以看到,在结束时,每次返回第一个创建的实例时,都使用实例变量来保存创建的实例。这样,无论您相信多少次,都可以创建相同的实例。这是Singleton模式。

工厂模式

对于工厂,我们的印象可能是内部有各种模具,根据您想要的产品型号生产您需要的产品。例如,如果您要求工厂帮助您处理产品,您只需告诉工厂产品的结构。工厂将有相应的模型来帮助您生产。您无需担心如何处理它。工厂模式也是如此。 (工厂模式也是创建实例对象的创建设计模式)。您不必自己创建相应的类来创建实例。您只需要告诉工厂类要创建的实例。返回所需的实例对象。

工厂模型根据抽象程度分为三种类型:

1.简单工厂模式

2.工厂方法模式

3.工厂抽象模式

简单工厂模式

定义:定义工厂类,该工厂类通过工厂函数返回不同的实例,具体取决于传递的参数。请参阅以下代码:

//学生班 班级学生{ 构造函数(名称,年龄){ =姓名; This.age=年龄; } showName(){ () } } //老师班 班主任{ 构造函数(名称,年龄){ =姓名; This.age=年龄; } showName(){ () } } //警察课 警察级{ 构造函数(名称,年龄){ =姓名; This.age=年龄; } showName(){ () } } 根据类创建对象。 Const s1=new Student('王小一',24); Const t1=新老师('李一老师',39); Const p1=新警官('张是一名警官',40);

我们可以看到前面的代码中定义了三个类,学生班,教师班和警察班。它们具有相同的属性和方法。当我们需要创建学生实例时,我们称之为学生课程。当我们需要创建教师实例时,我们称之为教师课程。当我们需要建立警察实例时,我们会打电话给警察课。假设我们有更多具有相同功能的字符类,所以当我们需要创建一个实例时,我们还必须调用相应的类。实际上,这些类实现了相同的功能,因此我们可以通过类完成所有这些字符实例的创建。我们尝试按以下方式修改代码:

//学生班 班级学生{ 构造函数(名称,年龄){ =姓名; This.age=年龄; } showName(){ () } } //老师班 班主任{ 构造函数(名称,年龄){ =姓名; This.age=年龄; } showName(){ () } } //警察课 警察级{ 构造函数(名称,年龄){ =姓名; This.age=年龄; } showName(){ () } } //工厂类 工厂类{ 设obj=null; //工厂功能 构造函数(角色,名称,年龄){ 变化(角色){ 案例'学生': Obj=新生(姓名,年龄); 休息 案例'老师': Obj=新老师(姓名,年龄); 休息 案件'警察': Obj=新警察(姓名,年龄); 休息 } } 返回obj; } Const s2=new Factory('student','王小二',25); Const t2=新工厂('老师','李二老师',39); CONST P2=新工厂( '警察', '张两个警察',40);

上面的代码中,我们可以看到,还定义了三类学生班级,班主任,警察,但在创建实例时使用,并且不再工厂类有那种对应字符。这种工厂是工厂级的。我们观察到的类工厂的实现,发现工厂函数(构造函数用于直接在这里,我们也可以定义自己的工厂函数)。将不同的参数返回到工厂函数,并返回不同的实例。这是简单的工厂模型。

简单工厂模式总结

实现:从上面的代码中,我们可以知道,称为工厂的简单模式是一个工厂类和工厂函数,返回不同实例来传递不同的参数。

特点:1.有更少的类来创建因为返回的实例必须传递的参数的影响来评价。如果有太多的类,逻辑将是复杂的。 2.您不需要注意实例的创建过程,您只需要传递相应的值即可。

适用场景:对于生活中的实际使用中,如果我们需要去篮球,足球和排球体育课,我们可以去一个相应的球一个(类似于创建为自己的对象),或者通过管理员,告诉他需要什么样的球。至于如何管理相应的球,这与我们无关。该管理员是工厂类。

缺点设有简单工厂模式,我们知道,简单工厂模式是适合于产生更少的类和逻辑是复杂的,需要再次类。一旦你需要添加一个新的类,你要重新编辑类工厂,这是非常不方便的。

工厂方法模式

工厂方法模式是简单工厂的附加优化。在工厂方法模式,不再是我们提供了一个统一的类工厂创建的所有对象,但不同厂家不同的对象。这意味着每个对象都有一个相应的工厂。这看起来很复杂。事实上,我认为这是不方便解决简单工厂模式来添加一个新的类,因为工厂功能需要添加一个新的类后进行修改。工厂方法的模式是解决此问题,请参阅以下代码:

Sea Factory=(function(){ 离开s={ 学生(姓名,年龄){ =姓名; This.age=年龄; 归还这个 } 老师(姓名,年龄){ =姓名; This.age=年龄; 归还这个 } 警察(姓名,年龄){ =姓名; This.age=年龄; 归还这个 } //在这里添加一个新类别 医生(姓名,年龄){ =姓名; This.age=年龄; 归还这个 } } 班级表现{ //根据参数传递的工厂函数不同。 构建器(类型,名称,年龄){ if((type)){ return s [type] .call(this,name,age) } else { 抛出新错误(`$ absent` {type}类) } } } })() 让s3=新工厂('学生','王小三',25); 让t3=新工厂('Master','李三 master',25); 让P3=新工厂('警察',“张三名官员,28); 让d3=新工厂('医生','杨医生',33);

在前面的代码中,我们可以看到,与功能的简单工厂相比,模型模型工厂的工厂功能不是固定的,而是根据类型而变化。当我们必须添加一个新类型时,只需要添加对象实例,就没有必要修改工厂的功能。在这种情况下,您不必添加新类别,修改太多代码逻辑。这是工厂方法模式。其实就是对简单工厂模式的优化而已

学web前端其实很简单,下面是小编整理的一整套系统的web前端学习教程(部分截图),关注小编头条号,私信【前端】即可免费领取!

最新案例

联系电话 400-6065-301

微信咨询 寒总监