美文网首页
设计模式

设计模式

作者: 白璞1024 | 来源:发表于2019-02-10 17:12 被阅读0次

设计模式

[TOC]

1、简单工厂模式

通过实例化对象创建

var Popfactory = function (name) {
    switch(name){
        case 'alert':
            return new LoginAlert();
        case 'confirm':
            return new LoginConfirm();
        case 'Prompt':
            return new LoginPrompt();
    }
}   

但是三个方法的重合属性比较高的时候,

通过创建一个新的对象然后包装,增强其属性和功能来实现


function createPop(type,text){
    var o = new Object();
    o.content = text;
    o.show = function(){
        //公共的代码
    };
    if(type =='alert'){
        //这里添加弹出框的具体实现方式
    }
    if (type == 'propt') {
        //这里添加输入框的具体实现方式

    }
    if (type == 'confirm') {
        //这里添加确认框的具体实现方式
    }
    return o;
}
var userNameALert = createPop('alert','用户名只能是26个字母和数字');

2、工厂方法模式

将实际创建的对象工作推迟到子类当中。这样核心类就成了抽象类

安全模式类

安全类模式类屏蔽使用者对类的错误使用照成的错误,比如Demo类,我们必须要new Demo才可以,但是,为了防止人var d = Demo();这种操作带来的错误,我们需要兼容


var Demo = function (){
}
Demo.prototype = {
    show:function(){
        console.log('成功获取');
    },
}
var d = new Demo();
d.show();

var e = Demo();
e.show();//TypeError: undefined is not an object (evaluating 'e.show')

如上,这个时候就会报错,所以我们需要这样写Demo

var Demo = function (){
    if(!(this instanceof Demo)){
        return new Demo();
    }
}

安全的工厂方法

  1. 使用了安全模式类
  2. 工厂方法中,主方法通过type content灵活调用,不用switch,或者是if这样就能直接使用而不用在构造方法里也进行添加

var Factory = function(type,content){
    if(this instanceof Factory){
        var s = new this[type](content);
        return s;
    }
    else{
        return new Factory(type,content);
    }
}
Factory.prototype = {
    java:function(content){},
    javascript:function(content){},
    //...
}

3、抽象工厂模式

抽象工厂方法:

抽象类方法就是一个实现子类继承父类的方法,


//抽象工厂方法
var VehicleFactory = function(subType,superType){
    //判断抽象工厂中是否有这个抽象类
    if(typeof vehicleFactory[subType] == 'function'){
        // 缓存
        function F(){};
        F.prototype = new vehicleFactory[subType]();
        subType.constructor = subType;
        subType.prototype = new F();
    }else{
        throw new Error("未创建该抽象类");
    }
}

//小汽车的抽象方法
VehicleFactory.Car = function(){
    this.type = "car";
}
VehicleFactory.Car.prototype = {
    getPrice:function(){
        throw new Error("抽象方法不能调用");
    },
    getSpeed:function(){
        throw new Error("抽象方法不能调用")
    }
}

//公共车的抽象方法
VehicleFactory.Bus = function () {
    this.type = "Bus";
}
VehicleFactory.Bus.prototype = {
    getPrice: function () {
        throw new Error("抽象方法不能调用");
    },
    getSpeed: function () {
        throw new Error("抽象方法不能调用")
    }
}

抽象类的实现


//使用的方法:
var BMW = function(price,speed){
    this.price =  price;
    this.speed = speed;
}
VehicleFactory(BMW,"Car");
BMW.prototype.getPrice = function(){
    return this.price;
}
BWM.prototype.getSpeed = function(){
    return this.getSpeed;
}

//调用的时候
var car = new BMW("1000",10);
console.log(car.getPrice());
console.log(car.getSpeed());

4、建造者模式

工厂模式我们得到的都是对象实例或者是类簇,建造者模式目的也是为了创建对象,但是更多的是关心创建这个对象的过程,甚至创建对象的每一个细节

我的理解:就是将每个属性封装成一个类


//创建一个人的类
var Human = function(param){
    this.skill = param && param.skill ||"保密";
    this.hobby = param && param.hobby ||"保密";
}
Human.prototype = {
    getSkill : function(){
        return this.skill;
    },
    getHobby = function(){
        return this.hobby;
    }
}
//名字的类
var Named = function(name){
    var that = this;
    (function(name,that){
        that.wolename = name;
        if(name.indexOf(" ") > -1){
            that.firstName = name.slice(0,name.indexOf(" "));
            that.secondName = name.slice(name.indexOf(" "));
        }
    }(name,that))
}
//工作的类
var Work = function(work){
    var that = this;
    (function(work,that){
        switch(work){
            case "code":
                that.work = "工程师";
                that.workDescirpt = "编程";
                break;
            case "teacher":
                that.work = "老师";
                that.workDescirpt = "分享";
                break;
            case "UE":
                that.work = "设计师";
                that.workDescirpt = "设计";
                break;
            default :
                that.work = work;
                that.workDescirpt = "不知道你干嘛的";
        }
    }(work,that))
}
Work.prototype.changeWork = function(work){
    this.work = work;
}
Work.prototype.changeWorkDescirpt = function (workDescirpt) {
    this.workDescirpt = workDescirpt;
}







//创建应聘者,这个人创建一些属性,包括工作,名字之类的
var Persion = function(name,work){
    var _Persion = new Human();
    _Persion.work = new Worker(work);
    _Persion.name = new Named(name);
    return _Persion;
}

相关文章

  • 设计模式

    常用的设计模式有,单例设计模式、观察者设计模式、工厂设计模式、装饰设计模式、代理设计模式,模板设计模式等等。 单例...

  • 设计模式笔记汇总

    目录 设计原则 “依赖倒置”原则 未完待续... 设计模式 设计模式——策略模式 设计模式——装饰者模式 设计模式...

  • 设计模式

    《C#设计模式》 《C#设计模式》-设计模式概述 《C#设计模式》-面向对象设计原则 《C#设计模式》-单例模式 ...

  • 浅谈JS的一些设计模式

    @(书籍阅读)[JavaScript, 设计模式] 常见设计模式 设计模式简介 设计模式概念解读 设计模式的发展与...

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • 设计模式之工厂模式

    设计模式之工厂模式 标签(空格分隔): 设计模式 工厂模式 设计模式的感念 设计模式的应用 工厂设计模式的产生 工...

  • JavaJavascript基础进阶(十七)JS中常用的设计模式

    单利设计模式、构造原型设计模式、发布订阅设计模式、promise设计模式 单利模式 构造原型设计模式 最贴近OOP...

  • 设计模式 - 目录

    设计模式01 - 单例模式 设计模式02 - 工厂模式 设计模式03 - 建造者模式 设计模式04 - 适配器模式...

  • 第1章 设计模式概述

    一、设计模式的概念 二、设计模式的历史 三、设计模式的要素 四、设计模式的分类 ■ 创建型设计模式 ■ 结构型设计...

  • iOS设计模式(3)适配器模式

    设计模式系列文章 《iOS设计模式(1)简单工厂模式》《iOS设计模式(2)工厂模式》《iOS设计模式(4)抽象工...

网友评论

      本文标题:设计模式

      本文链接:https://www.haomeiwen.com/subject/rerxeqtx.html