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);

在这里插入图片描述

在这里插入图片描述

总结

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

相关文章

  • JS集合set类的实现与使用方法示例

    JS集合set类的实现与使用方法示例

    这篇文章主要介绍了JS集合set类的实现与使用方法,结合具体实例形式分析了javascript集合的创建、元素添加、删除以及并集、交集、补集等运算相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • 全面解析Bootstrap布局组件应用

    全面解析Bootstrap布局组件应用

    这篇文章主要为大家全面解析Bootstrap布局组件应用,几乎对所有Bootstrap布局组件示例进行了解析,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 微信小程序利用Canvas绘制图片和竖排文字详解

    微信小程序利用Canvas绘制图片和竖排文字详解

    这篇文章主要介绍了微信小程序利用Canvas绘制图片和竖排文字详解,合成图片应该按照 Canvas 的文档来做都没什么问题,主要是有个竖排文字的需求,这里和大家分享一下,需要的朋友可以参考下
    2019-06-06
  • js 分栏效果实现代码

    js 分栏效果实现代码

    原创JS分栏效果,面向对象, 使用简单。
    2009-08-08
  • JavaScript 函数惰性载入的实现及其优点介绍

    JavaScript 函数惰性载入的实现及其优点介绍

    惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了
    2013-08-08
  • 一文详解e2e测试之cypress的使用

    一文详解e2e测试之cypress的使用

    这篇文章主要介绍了e2e测试之cypress的使用方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 纯js模仿windows系统日历

    纯js模仿windows系统日历

    本文主要介绍了纯js模仿windows系统日历的思路与实现方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • Google Map Api和GOOGLE Search Api整合实现代码

    Google Map Api和GOOGLE Search Api整合实现代码

    将GOOGLE MAP API 和 GOOGLE Search API 进行整合,我用面向对象的方式写了一个类,通过传一个经纬度进去,自动通过GOOGLE LOCAL SEARCH获取附近的相关信息。比如餐厅、景点等,反过来标到地图上,并可在任意容器内显示。
    2009-07-07
  • 求数组最大最小值方法适用于任何数组

    求数组最大最小值方法适用于任何数组

    之前虽然介绍过一种求数组最大最小值的方法,但那个方法只是用于数组中都是数字的,下面为大家介绍个方法适用于任何数组,有此需求的朋友可以参考下
    2013-08-08
  • JS+AJAX实现省市区的下拉列表联动

    JS+AJAX实现省市区的下拉列表联动

    这篇文章主要为大家详细介绍了JS+AJAX实现省市区的下拉列表联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论