zoukankan      html  css  js  c++  java
  • 抽象类工厂模式

    <script type="text/javascript">
                                //BMW    Car
        function VehicleFactory(subType, superType) {
            if (typeof VehicleFactory[superType] === 'function') {
                function F() {}
                F.prototype = new VehicleFactory[superType]()
                subType.constructor = subType//prototype已经赋值,下文不能赋值{},这样会删除以前的原型赋值
                subType.prototype = new F()
            } else {
                throw new Error('未创建该抽象类')
            }
        }
    /* 定义抽象类的结构 */
    // 汽车抽象类
        VehicleFactory.Car = function() {
            this.type = 'car'
        }
        VehicleFactory.Car.prototype = {
            getPrice() {
                return new Error('抽象方法不能调用')
            },
            getSpeed() {
                return new Error('抽象方法不能调用')
            }
        }
    
    // 公交车抽象类
        VehicleFactory.Bus = function() {
            this.type = 'bus'
        }
        VehicleFactory.Bus.prototype = {
            getPrice() {
                return new Error('抽象方法不能调用')
            },
            getPassengerNum() {
                return new Error('抽象方法不能调用')
            }
        }
    
    // 货车抽象类
        VehicleFactory.Truck = function() {
            this.type = 'truck'
        }
        VehicleFactory.Truck.prototype = {
            getPrice() {
                return new Error('抽象方法不能调用')
            },
            getTrainload() {
                return new Error('抽象方法不能调用')
            }
        }
    //实现具体的类则如下:
    
    // 汽车:宝马具体类
        function BMW(price, speed) {
            this.price = price
            this.speed = speed
        }
        VehicleFactory(BMW, 'Car')
        BMW.prototype.getPrice = function() {
            return this.price
        }
        BMW.prototype.getSpeed = function() {
            return this.speed
        }
        //当需要生产实例时,则:
        
        
        const bmw530 = new BMW(500000, 250)
        console.log( bmw530.getPrice() ) // 500000
        console.log( bmw530.getSpeed() ) // 250 
        console.log( bmw530.type );// 'Car'
        
    </script>

    抽象类工厂模式很巧妙的使用了函数也是对象,也可以由很多的属性的方法

    在很多软件系统中需要更换界面主题,要求界面中的按钮、文本框、背景色等一起发生改变时,可以使用抽象工厂模式进行设计。

     实例:

    <head>
        <style>
            #div1 {
                200px;
                height:200px;
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <input type='button' value='red'/>
        <input type='button' value='blue'/>
        <input type='button' value='black'/>
        <div id='div1'></div>
        <script type="text/javascript">
            
            var oDiv = document.getElementById('div1');
            var aBtn = document.getElementsByTagName('input');
            function factory(subtype,supertype){
                if (typeof factory[supertype] === 'function')
                {
                    function fn(){}
                    fn.prototype = new factory[supertype]
                    subtype.constructor = subtype
                    subtype.prototype = new fn()
                }else {
                    throw new Error('没有此抽象类');
                }
            }
    
            factory.color1 = function(){
                this.color = 'red'
            }
        
            factory.color2 = function(){
                this.color = 'blue'
            }
            factory.color3 = function(){
                this.color = 'black'
            }
            
            for (var i = 0;i<aBtn.length ;i++ )
            {
                (function(i){
                    aBtn[i].addEventListener('click',function(){
                        var j = i+1;
                        function c1(){}
                        factory(c1,'color'+j)
                        oDiv.style.background = (new c1()).color;
                    },false);
                })(i);
                
            }
            
    </script>
    </body>
  • 相关阅读:
    字符串转义 保存到mysql
    vue项目引入背景图报Module not found: Error: Can't resolve './src/assets/img/bg2.jpg' in'xxx'错误
    vscode启动项目时报错:ERROR Failed to compile with 22 errors ,These relative modules were not found:
    整合阿里云视频播放器
    layer.open输入字数实时显示
    layer.prompt弹框
    解决org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题
    微信扫码登录(OAuth2)
    阿里云短信服务
    单点登录(token,JWT)
  • 原文地址:https://www.cnblogs.com/jokes/p/9706713.html
Copyright © 2011-2022 走看看