资讯专栏INFORMATION COLUMN

《JavaScript设计模式》阅读笔记_part2

RobinTang / 743人阅读

摘要:它属于类创建型模式。基于继承,将复杂的放置在函数中,简单的共同的放置到一个构造函数中。代码与继承类似,但是核心就是将简单的共有的放置到构造函数中,与类的思想类似。单例模式实现代码库,产生命名空间,一次只能实例化一个。

JavaScript设计模式阅读
更多文章查看本专栏
设计模式第一篇:创建型设计模式 1、简单工厂模式
简单工厂模式:又叫静态工厂方法,有一个工厂对象决定创建某一种产品对象类的实例。主要用于创建同一类对象。

根据现有的需求选择不同的东西。

// 简单的工厂模式
var redBall = function () {
    console.log("redBall")
};
var greenBall = function () {
    console.log("greenBall")
};
var blackBall = function () {
    console.log("blackBall")
};
var blueBall = function () {
    console.log("blueBall")
};

//工厂函数
var ballFactory = function (type) {
    switch (type) {
        case "red":
            return new redBall();
            break;
        case "green":
            return new greenBall();
            break;
        case "black":
            return new blackBall();
            break;
        case "blue":
            return new blueBall();
            break;

    }
}

通过一个工厂产生多个同类的,或者有相同属性但是也存在差异的产品。

function createBook(name,time,type) {
    var t = new Object();
    t.name = name;
    t.time = time;
    t.type = type;
    return t;
}

function createBall(type,text) {
    var t = new Object();
    t.content = text;
    t.show = function () {
        // do something
    }
    switch (type) {
        case "red":
            // different Part
            break;
        case "green":
            // different Part
            break;
        case "black":
            // different Part
            break;
        case "blue":
            // different Part
            break;
    }
}

和类的区别:类是将初始的东西给你,然后你自己去对相应的需求进行添加实例方法。而工厂是根据你需要的方法直接生成好给你。好处,如果有大量相同的含有特殊功能的实例存在,可以通过简单工厂增加复用性。

核心:根据情况的不同选择不同的情况进行处理,像是一个封装型的"if else"。

2、工厂方法模式
工厂方法模式:又称为工厂模式,也叫虚拟构造器模式或者多态工厂模式。

它属于类创建型模式。通过对产品类的抽象使其创建业务,只要负责用于创建多类的实例。
将实际创建对象的工作推迟到了子类当中。

//  类的安全模式
var Factory = function (type, content) {
    if(this instanceof  Factory){
        return new this[type](content);
    }else{
        return new Factory(type, content);
    }
};
//  创建不同类型基类的实现
Factory.prototype={
    Java:function (content) {
        this.content = content;
    },
    PHP:function (content) {
        this.content = content;
    },
    Python:function (content) {
        this.content = content;
    },
    JavaScript:function (content) {
        this.content = content;
    },
}
3、抽象工厂模式
通过对类的工厂抽象使其业务用于对产品类簇的创建,而不负责创建某一类产品的实例。

用于产生类簇。

创建一个类,类里面拥有许多抽象的类,抽象的类定义了同类的类的结构。在使用的时候将抽象的类进行继承。

/**
 * 实现subType类对工厂类中的superType类型的抽象类的继承
 * @param subType 要继承的类
 * @param superType 工厂类中的抽象类type
 */
const VehicleFactory = function(subType, superType) {
    if (typeof VehicleFactory[superType] === "function") {
        function F() {
            this.type = "车辆"
        }
        F.prototype = new VehicleFactory[superType]()
        subType.constructor = subType
        subType.prototype = new F()                // 因为子类subType不仅需要继承superType对应的类的原型方法,还要继承其对象属性
    } else throw new Error("不存在该抽象类")
}

VehicleFactory.Car = function() {
    this.type = "car"
}
VehicleFactory.Car.prototype = {
    getPrice: function() {
        return new Error("抽象方法不可使用")
    },
    getSpeed: function() {
        return new Error("抽象方法不可使用")
    }
}

const BMW = function(price, speed) {
    this.price = price
    this.speed = speed
}
VehicleFactory(BMW, "Car")        // 继承Car抽象类
BMW.prototype.getPrice = function() {        // 覆写getPrice方法
    console.log(`BWM price is ${this.price}`)
}
BMW.prototype.getSpeed = function() {
    console.log(`BWM speed is ${this.speed}`)
}

const baomai5 = new BMW(30, 99)
// baomai5.getPrice()                          // BWM price is 30
// baomai5 instanceof VehicleFactory.Car       // true
4、建造者模式
将一个复杂对象的构建层与其表示层相互分离,同样的构造过程可采用不同的表示。

关注产生过程,将对象的创建分为模块化创建,自定义度变高。

建造一个电脑:

//  构建基本主体
const basicComputer = function () {

}
basicComputer.prototype = {
    //  自定义的一些原型方法
}
//  构建CPU模块
const cpu = function (type) {
    this.type = type;
}
cpu.prototype = {
    //  自定义的一些原型方法
}
//  构建显卡模块
const graphicsCard  = function (type) {
    this.type = type;
}
graphicsCard.prototype = {
    //  自定义的一些原型方法
}
//  构建屏幕模块
const screen = function (type) {
    this.type = type;
}
screen.prototype = {
    //  自定义的一些原型方法
}

const computer = function () {
    const t = new basicComputer();
    t.cpu = new cpu();
    t.graphicsCard = new graphicsCard();
    t.screen = new screen();
    return t;
}
5、原型模式
用原型实例指向创建对象的类,使用与创建新的对象的类共享原型对象的类型以及方法。

基于继承,将复杂的放置在函数中,简单的共同的放置到一个构造函数中。

在使用的时候可以对原型进行拓展。

代码与继承类似,但是核心就是将简单的共有的放置到构造函数中,与类的思想类似。

6、单例模式
只允许实例化一次的类。在使用的时候可以用于创建代码库,创建命名空间。

单例模式实现代码库,产生命名空间,一次只能实例化一个。

//  一个命名空间
const A = {
    fun_1: {
        fun_1_1:function () {
            //  do something
        },
    },
    fun_2: {
        //  do something

    },
    fun_3:function () {
        //  do something

    }
}
//  空间类可为一个代码块,也可以为更多一层次的代码库(命名空间)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101109.html

相关文章

  • [译]如何使用Flask开发一个增删改查的应用(part2)

    摘要:获取成为开发专家的技巧。我们可以在两个文本框输入笔记的标题和内容。在本教程中,我们将使用一个名为的工具。它是一个火狐浏览器的扩展,我们可以使用它管理数据库。安装,打开火狐浏览器,点击,然后点找到的文件夹图标并点击它。 showImg(https://cdn-images-1.medium.com/max/600/1*Ou6FFJJD3zhcIUU8wBZqIw.png); 教程译文首发...

    adam1q84 评论0 收藏0
  • JavaScript设计模式之发布-订阅模式(观察者模式)-Part2

    摘要:设计模式与开发实践读书笔记。看此文章前,建议先看设计模式之发布订阅模式观察者模式在中,已经介绍了什么是发布订阅模式,同时,也实现了发布订阅模式。 《JavaScript设计模式与开发实践》读书笔记。 看此文章前,建议先看JavaScript设计模式之发布-订阅模式(观察者模式)-Part1 在Part1中,已经介绍了什么是发布-订阅模式,同时,也实现了发布-订阅模式。但是,就Part1...

    Charlie_Jade 评论0 收藏0
  • JavaScript设计模式之发布-订阅模式(观察者模式)-Part2

    摘要:设计模式与开发实践读书笔记。看此文章前,建议先看设计模式之发布订阅模式观察者模式在中,已经介绍了什么是发布订阅模式,同时,也实现了发布订阅模式。 《JavaScript设计模式与开发实践》读书笔记。 看此文章前,建议先看JavaScript设计模式之发布-订阅模式(观察者模式)-Part1 在Part1中,已经介绍了什么是发布-订阅模式,同时,也实现了发布-订阅模式。但是,就Part1...

    chemzqm 评论0 收藏0
  • Part 2: Containers

    摘要:在默认情况下使用的公共注册表。注意我们将在这里使用的公共注册表,因为它是免费和预配置的,但是有许多公共注册中心可供选择,而且您甚至可以使用可信注册表建立您自己的私有注册表。标记镜像将本地映像与注册表中的存储库关联的符号是。 要求 安装了1.13或者更高版本的Docker 阅读了Part1中的定位(我没写) 介绍 是时候用Docker构建一个app了。我们会从构建这样一个app的最底...

    Soarkey 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<