JavaScript工厂模式详解

 更新时间:2021年10月12日 16:27:55   作者:房西的啥玩意呀''  
这篇文章主要介绍了JavaScript设计模式之工厂模式,结合完整实例形式分析了工厂模式的概念、原理及javascript定义与使用工厂模式的相关操作技巧,需要的朋友可以参考下

简单工厂模式(Simple Factory)

在这里插入图片描述

//篮球基类
var Basketball = function() {
    this.intro = '篮球盛行于美国';
}
Basketball.prototype = {
    getMember: function() {
        console.log('每个队伍需要五个队员');
    },
    getBallSize: function() {
        console.log('篮球很大');
    }
}
//足球基类
var Football = function() {
    this.intro = '足球在世界范围内都很流行';
}
Football.prototype = {
    getMember: function() {
        console.log('每个队伍需要11名队员');
    },
    getBallSize: function() {
        console.log('足球很大');
    }
}
//运动工厂
var SportsFactory = function(name) {
    switch (name) {
        case 'NBA':
            return new Basketball();
        case 'worldCup':
            return new Football();
    }
}
//当你需要为世界杯创建一个足球的时候,只需要记住运功工厂sportsFactory即可,调用并创建
var Footnall = SportsFactory('worldCup');
console.log(Footnall);
console.log(Footnall.intro);
Footnall.getMember();

在这里插入图片描述

在这里插入图片描述

//工厂模式
function createBook(name, time, type) {
    var o = new Object(); //创建一个对象,并对对象拓展属性和方法
    //这是不相似的部分
    o.name = name; //书本名称
    o.time = time; //书本出版时间
    o.type = type; //书本类型
    //下面是相似的部分
    o.getName = function() {
        console.log(this.name);
    };
    //将对象返回
    return o;
}
//创建两本书
var book1 = new createBook('JS book', 2021, 'js');
var book2 = new createBook('CSS book', 2019, 'css');
book1.getName();
book2.getName();

在这里插入图片描述

在这里插入图片描述

工厂方法模式(Factory Method)

在这里插入图片描述

var Demo = function() {}
Demo.prototype = {
    show: function() {
        console.log('成功获取');
    }
}
var d = new Demo();//正确创建实例
d.show(); //成功获取
var d = Demo();//错误创建实例
d.show(); //炸裂

在这里插入图片描述

在这里插入图片描述

var Demo = function() {
    if (!this instanceof Demo) {//判断this的指向
        return new Demo();
    }
}
Demo.prototype = {
    show: function() {
        console.log('安全模式类真好用');
    }
}
var d = Demo();
d.show();

在这里插入图片描述

安全的工厂方法

//安全模式创建工厂类
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) {
        //...
    },
    UI: function(content) {
        this.content = content;
        (function() {
            var div = document.createElement('div');
            div.innerHTML = content;
            div.style.border = '1px soild red';
            document.getElementById('container').appendChild(div);
        })(content);
    },
    php: function(content) {
        //...
    },
    javascript: function(content) {
        //..
    }
};
//创建对象
var data = [
    { type: 'javascript', content: 'js哪家强' },
    { type: 'java', content: 'java哪家强' },
    { type: 'UI', content: 'UI哪家强' }
];
for (let index = 0; index < data.length; index++) {
    console.log(data[index].type);
    Factory(data[index].type, data[index].content);
}

在这里插入图片描述

抽象工厂模式(Abstract Factory)

在这里插入图片描述

var Car = function() {}
Car.prototype = {
    getPrice: function() {
        return new Error('抽象方法不能调用');
    },
    getSpeed: function() {
        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: function() {
        return new Error('抽象方法不能调用');
    },
    getSpeed: function() {
        return new Error('抽象方法不能调用');
    }
};
//公交车抽象类
VehicleFactory.Bus = function() {
    this.type = 'bus';
}
VehicleFactory.Bus.prototype = {
    getPrice: function() {
        return new Error('抽象方法不能调用');
    },
    getPassengerNum: function() {
        return new Error('抽象方法不能调用');
    }
}

在这里插入图片描述

//抽象与实现
//宝马汽车子类
var BMW = function(price, speed) {
    this.price = price;
    this.speed = speed;
};
//抽象工厂实现对Car抽象类的继承
VehicleFactory(BMW, 'Car');
BMW.prototype.getPrice = function() { //重写方法
    return this.price;
}
BMW.prototype.getSpeed = function() {
    return this.speed;
};
//宇通公交车子类
var YUTONG = function(price, passenger) {
    this.price = price;
    this.passenger = passenger;
};
//抽象工厂实现对BUS抽象类的继承
VehicleFactory(YUTONG, 'Bus');
YUTONG.prototype.getPrice = function() {
    return this.price;
}
YUTONG.prototype.getPassengerNum = function() {
    return this.passenger;
};
//实例化类
var myBMW = new BMW('100w', '1000km/h');
console.log(myBMW.getPrice(), myBMW.getSpeed(), myBMW.type);

在这里插入图片描述

在这里插入图片描述

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • 理解javascript中Map代替循环

    理解javascript中Map代替循环

    这篇文章主要帮助大家理解javascript中Map代替循环,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • javascript FormatNumber函数实现方法

    javascript FormatNumber函数实现方法

    如果有一个数字498.8573945,如何把它格式化成两位小数据呢?用过asp的都知道,在vbscript里我们可以调用formatnumber,即用formatnumber(498.8573945,2)就可以输出:498.86。
    2008-12-12
  • JS判断指定dom元素是否在屏幕内的方法实例

    JS判断指定dom元素是否在屏幕内的方法实例

    做图片滚动加载的时候会判断图片是否在可视区域内,如果在就加载原地址图片,下面这篇文章就给大家介绍了利用JS判断指定dom元素是否在屏幕内的方法实例,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • javascript使用call调用微信API

    javascript使用call调用微信API

    这篇文章主要介绍了javascript使用call调用微信API,需要的朋友可以参考下
    2014-12-12
  • 基于JavaScript实现微信抢红包功能

    基于JavaScript实现微信抢红包功能

    本文通过实例代码给大家介绍了基于JavaScript实现微信抢红包功能,金额随机,额度在0.01和(剩余平均值*2)之间,具体的实例代码大家参考下本文
    2017-07-07
  • CocosCreator ScrollView优化系列之分帧加载

    CocosCreator ScrollView优化系列之分帧加载

    这篇文章主要介绍了CocosCreator ScrollView的优化,从分帧加载进行了讲解,对性能优化感兴趣的同学,一定要看一下
    2021-04-04
  • javascript实现获取指定精度的上传文件的大小简单实例

    javascript实现获取指定精度的上传文件的大小简单实例

    下面小编就为大家带来一篇javascript实现获取指定精度的上传文件的大小简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JS简单实现多级Select联动菜单效果代码

    JS简单实现多级Select联动菜单效果代码

    这篇文章主要介绍了JS简单实现多级Select联动菜单效果代码,涉及JavaScript数组元素的遍历及动态设置select的实现技巧,需要的朋友可以参考下
    2015-09-09
  • jquery 时间戳转日期过程详解

    jquery 时间戳转日期过程详解

    这篇文章主要介绍了jquery 时间戳转日期过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • layui table 表格模板按钮的实例代码

    layui table 表格模板按钮的实例代码

    今天小编就为大家分享一篇layui table 表格模板按钮的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论