JavaScript设计模式第一弹-创立型设计模式

作者 : 开心源码 本文共4665个字,预计阅读时间需要12分钟 发布时间: 2022-05-12 共182人阅读

前言

接下来将会为大家详情设计模式中的创立型设计模式,在此之前需要掌握肯定的JavaScript对象继承基础。

简单工厂模式

先说说

  • 什么是简单工厂模式:又叫静态工厂方法,由一个工厂对象决定创立某一种产品对象类的实例

看着定义有点懵,没关系。继续往下走

工厂函数

  • 说明:简单来说,就是为了把多个相同类型的类集成到一个函数内,我们把这个函数叫做工厂函数
  • 用途:使得其余人不用关注创立对象是基于哪个基类,直接用该工厂函数就可
  • 代码
//定义小猫类var Cat = function(){    this.voice = '喵';}Cat.prototype.getVoice = function(){    console.log(this.voice);}//定义小狗类var Dog = function(){    this.voice = '汪';}Dog.prototype.getVoice = function(){    console.log(this.voice);}//动物工厂var AnimalFactory = function(name) {    switch(name){        case 'cat':            return new Cat();        case 'dog':            return new Dog();    }}//创立实例var hellokity = AnimalFactory('cat');hellokity.getVoice();   //'喵'

当然,上面两种方法十分类似,于是还可以有下面的定义方式:

var createAnimal = function(name,voice) {    var o = new Object();     o.name = name;    o.voice = voice;    o.getVoice = function() {        console.log(this.voice);    }    return o;}var hellokity = createAnimal('hellokity','喵');hellokity.getVoice();   //'喵'

看似最后一种方法如同简便不少,但是实际上这两种定义方法是有区别的。

  • 第一种方式所定义的实例对象是拥有父类的方法,也就是可以访问到原型链上面的属性和方法的。
  • 第二种方式定义则是由于在内部新建了一个对象,那么父级对象什么的自然也就不存在了(当然这里不是指object)。

最后回顾

最后再次加深对简单工厂模式的印象吧

简单工厂模式:又叫静态工厂方法,由一个工厂对象决定创立某一种产品对象类的实例

工厂方法模式

先说说

  • 什么是工厂方法模式:通过对产品类的笼统使其创立业务主要负责用于创立多类产品的实例

懵?没关系。继续往下走

安全模式类

  • 用途:可以屏蔽使用该类的所造成的错误
  • 例子
var Demo = function() {};Demo.prototype.getName = function(){    console.log('get success!')}var d = Demo();d.getName();    //报错//安全模式类var Demo = function() {    if(!(this instanceof Demo)){        return new Demo    }};Demo.prototype.getName = function(){    console.log('get success!')}var d = Demo();d.getName();    //'get success!'

工厂方法

实际上工厂方法和简单工厂模式区别在于:简单工厂模式假如需要添加类的话,那么它则需要改变两处地方,一处是工厂函数,一处是改变类。但是假如是工厂方法模式的话,则只要要往工厂方法中增加基类则可以。代码实现如下:

//安全模式创立的工厂类var superHeroFatory = function(type,skill){    if(this instanceof superHeroFatory){        var s = new this[type](skill);        return s    }else{        return new superHeroFatory(type,skill)    }}superHeroFatory.prototype = {    IronMan: function(skill){        this.name = 'Iron Man';        this.skill = skill;        this.getName = function(){            console.log(this.name);        }        this.getSkill = function(){            console.log(this.skill);        }    },    CaptainAmerica: function(skill){        this.name = 'Captain America';        this.skill = skill;        this.getName = function(){            console.log(this.name);        }        this.getSkill = function(){            console.log(this.skill);        }    }}var captainAmerica = superHeroFatory('CaptainAmerica','shield');captainAmerica.getName();   //'Captain America'captainAmerica.getSkill();  //'shield'

最后回顾

这个工厂方法模式处理了创立多类对象所带来的麻烦,这样的工厂方法对象的方式也避免了使用者与对象类之间的耦合,客户不关心创立该对象的具体类,只要调用工厂方法就可。

笼统工厂模式

先说说

  • 什么是笼统工厂模式:通过对类的工厂笼统使其业务用于对产品类簇的创立,而不负责创立其某一类产品的实例

看着定义有点懵,没关系。继续往下走

笼统类

  • 概念:笼统类是一种公告但不能使用的类,使用就会报错。
  • 用途:定义一个产品簇,并公告少量必备的方法,假如子类没有重写就会报错
  • 例子:在java中可以简单定义,但是在js中的话暂时还没有这种笼统类的定义,于是我们可以用这种方式模仿笼统类:
var Car = function() {};Car.prototype = {    getPrice(){        return new Error('笼统方法不可用')    },    getName(){        return new Error('笼统方法不可用')    }}

于是乎,在对象实例化后调用这些函数就会报错。由于笼统类是没有具体实现的,它只用作继承的方式

笼统工厂模式

  • 说明:为了更好的创立笼统类,于是将笼统类整合为一个笼统工厂
  • 用途:用于创立笼统对象的一种方法
  • 定义
var VehicleFactory = function(subType,superType){    if(typeof VehicleFactory[superType] === 'function'){        // 缓存类        function F() { };                //继承父类属性和方法        F.prototype = new VehicleFactory[superType]();                //子类constructor指向子类        subType.constructor = subType;                //子类原型继承“父类”        subType.prototype = new F();    }else{        throw new Error('未创立该笼统类')    }}//小汽车笼统类 VehicleFactory.Car = function(){    this.type = 'car';}VehicleFactory.Car.prototype = {    getPrice(){        return new Error('笼统方法不可用')    },    getName(){        return new Error('笼统方法不可用')    }}//大巴笼统类VehicleFactory.Bus = function(){    this.type = 'bus';}VehicleFactory.Bus.prototype = {    getPrice(){        return new Error('笼统方法不可用')    },    getName(){        return new Error('笼统方法不可用')    }}

笼统类的实现

啥也别说了,直接上码

var BMW = function(price,name){    this.price = price;    this.name = name;}VehicleFactory(BMW,'Car');BMW.prototype.getName = function(){    console.log(this.name);}var X2 = new BMW(200,'X2');X2.getName();   //'X2'X2.getPrice();  //报错,由于不记得定义这个方法了

最后回顾

最后再次感受一下定义吧

笼统工厂模式:通过对类的工厂笼统使其业务用于对产品类簇的创立,而不负责创立其某一类产品的实例

建造者模式

先说说

  • 什么是建造者模式:将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示

与工厂模式差别

  • 工厂模式主要是为了创立对象实例或者者类簇(笼统工厂),关心的是最终创立的是什么,而对创立的过程并不关心
  • 建造者模式在创立对象时要更复杂,它更多的关心创立对象的过程甚至于每个细节。或者者说这种模式创立了一个复合对象

建造者模式

  • 说明:关心创立对象的过程,对于创立的具体实现的细节也参加了干涉
  • 用途:当需要我们创立对象不仅需要得到对象实例,还需对对象细化时,则可以使用建造者模式
  • 代码
//创立类var Human = function(props){    this.name = props && props.name || '保密';}Human.prototype.getName = function(){    console.log(this.name);}//名字类var Name = function(name){    var that = this;    (function(name,that){        that.wholeName = name;        if(name.indexOf(' ') > -1){            that.FirstName = name.slice(0,name.indexOf(' '));            that.SecondName = name.slice(name.indexOf(' '));        }    })(name,that)}var Person = function(name){    var _name = new Name(name);    var _person = new Human({name:_name});    return _person}var Miles = new Person('Miles Jiang');Milse.getName();    //{wholeName: "Miles Jiang", FirstName: "Miles", SecondName: " Jiang"}

最后回顾

这种模式下,我们即可以关心到对象的创立过程。因而我们通常将创立对象板块化,这样使得被创立的类的每个板块都可以取得灵活的运用和高质量的复用

单例模式

先说说

  • 什么是单例模式:又被称为单体模式,是只允许实例化一次的对象类。有时我们也用一个对象来规划一个命名空间,井井有条地管理对象上的属性与方法

命名空间

  • 说明:用来束缚每个人定义的变量
  • 用途:防止共同开发时带来的变量名冲突
  • 例子
var Miles = {    getDom: function(id){        return document.getElementById(id)    }}

最后回顾

为了梳理代码,使得代码有序整洁

后话

本文章是通过学习张荣铭所著的《JavaScript设计模式》所总结。希望大家看完文章可以学到东西,同时也推荐大家去看看这本设计模式,写得很不错。

成功不在一朝一夕,我们都需要努力

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JavaScript设计模式第一弹-创立型设计模式

发表回复