master

分支 (1)

管理

管理

master

frontend-dp
/
设计模式4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // //1. 原始模式
        // var smallPlane = {
        //     width: 100,
        //     height: 100,
        //     blood: 100,
        //     touch: function () {
        //         this.blood -= 50;
        //         if (this.blood == 0) {
        //             console.log('die');
        //         }
        //     }
        // }

        // var smallPlane = {
        //     width: 100,
        //     height: 100,
        //     blood: 100,
        //     touch: function () {
        //         this.blood -= 50;
        //         if (this.blood == 0) {
        //             console.log('die');
        //         }
        //     }
        // }

        // 构造函数
        // function SmallPlane () {
        //     this.width = 100;
        //     this.height = 100
        //     this.name = 'smallPlane';
        //     this.blood = 100;
        //     this.touch = function () {
        //         this.blood -= 100;
        //         if (this.blood == 0) {
        //             console.log('die');
        //         }
        //     }
        // }

        // new SmallPlane();


        // function BigPlane () {
        //     this.width = 150;
        //     this.height = 200;
        //     this.blood = 200;
        //     this.name = 'bigPlane';
        //     this.touch = function () {
        //         this.blood -= 50;
        //         if (this.blood == 0) {
        //             console.log('die');
        //         }
        //     }
        // }

        // function AttackPlane () {
        //     this.width = 125;
        //     this.height = 100;
        //     this.blood = 100;
        //     this.name = 'AttackPlanea'
        //     this.touch = function () {};
        //     this.attack = function () {
        //         console.log('bultt');
        //     }
        // }

        // // 工厂模式
        // function PlaneFactory (type) {
        //     var newPlane = null;
        //     switch (type) {
        //         case 'SmallPlane':
        //             newPlane = new SmallPlane();
        //             break;
        //         case 'BigPlane':
        //             newPlane = new BigPlane();
        //             break;
        //         case 'AttackPlane':
        //             newPlane = new AttackPlane();
        //             break;
        //     }
        //     newPlane.die = function () {
        //         console.log('boomb');
        //     }
        //     return newPlane;
        // }

        // 工厂方法模式

        // PlaneFactory.prototype = new Event();
        // function PlaneFactory () {
        //     this.decorate_list = [];
        // }
        // // 集合所有装饰方法
        // PlaneFactory.prototype.decorators = {
        //     eatOneLife: function (obj) {
        //         obj.blood += 100;
        //     },
        //     eatTwoLife: function (obj) {
        //         obj.blood += 200;
        //     },
        //     eatShrinkLife: function (obj) {
        //         obj.blood -= 50;
        //     }
        // }
        // // 搜集对某对象的装饰描述
        // PlaneFactory.prototype.decorate = function (decorator) {
        //     this.decorate_list.push(decorator);
        // }

        // // 让装饰方法作用在该对象的身上
        // PlaneFactory.prototype.update = function () {
        //     for (var i = 0; i < this.decorate_list.length; i++) {
        //         this.decorators[ this.decorate_list[i] ] && this.decorators[ this.decorate_list[i] ](this);
        //     }
        // }

        // PlaneFactory.prototype.empty = function () {
        //     this.decorate_list = [];
        // }

        // PlaneFactory.prototype.remove = function (type) {
        //     // eatOneLife
        //     this.decorate_list =  this.decorate_list.filter(function (eleType) {
        //         return !(eleType == type);
        //     })
        // }

        // // 子类工厂都可以使用的的公共方法
        // PlaneFactory.prototype.touch = function () {
        //     this.blood -= 50;
        //     if (this.blood == 0) {
        //         this.die();
        //     }
        // }
        // PlaneFactory.prototype.die = function () {
        //     alert('boomb');
        // }


        // // 创建对象的接口
        // PlaneFactory.create = function (type) {
        //     // 判断一下是否存在该类型的子类工厂
        //     if (PlaneFactory.prototype[type] == undefined) {
        //         throw 'no this constructor';
        //     }
        //     // 继承
        //     if (PlaneFactory.prototype[type].prototype.__proto__ !== PlaneFactory.prototype) {
        //         PlaneFactory.prototype[type].prototype = new PlaneFactory();
        //     }
        //     var arg = [].slice.call(arguments, 1);
        //     var newPlane = new PlaneFactory.prototype[type](...arg);
        //     return newPlane;
        // }


        // // 真正定义子类工厂
        // PlaneFactory.prototype.SmallPlane = function (x, y) {
        //     this.x = x;
        //     this.y = y;
        //     this.width = 100;
        //     this.height = 100;
        //     this.blood = 100;
        //     this.name = 'SmallPlane';
        // }

        // PlaneFactory.prototype.BigPlane = function (x, y) {
        //     this.x = x;
        //     this.y = y;
        //     this.width = 150;
        //     this.height = 200;
        //     this.blood = 200;
        //     this.name = 'BigPlane';
        // }

        // PlaneFactory.prototype.AttackPlane = function (x, y) {
        //     this.x = x;
        //     this.y = y;
        //     this.width = 100;
        //     this.height = 125;
        //     this.blood = 100;
        //     this.name = 'AttackPlane';
        //     this.attack = function () {
        //         console.log(' biu~ biu~ biu!');
        //     }
        // }


        // // Event
        // // 1. Event on emmit remove once
        // // 2. 有助于了解 观察者模式
        // // 3. node


        // function Event () {
        //     // 存储 不同事件类型对应的不同处理函数
        //     this.cache = {};
        // }


        // Event.prototype.on = function (type, handle) {
        //     if (!this.cache[type]) {
        //         this.cache[type] = [handle];
        //     }else {
        //         this.cache[type].push(handle);
        //     }
        // }

        // Event.prototype.emmit = function () {
        //     var type = arguments[0];
        //     var arg = [].slice.call(arguments, 1);
        //     for (var i = 0; i < this.cache[type].length; i++) {
        //         this.cache[type][i].apply(this, arg);
        //     }
        // }

        // Event.prototype.empty = function (type) {
        //     this.cache[type] = [];
        // }

        // Event.prototype.remove = function (type, handle) {
        //     this.cache[type] = this.cache[type].filter(function (ele) {
        //         return ele != handle;
        //     })
        // }

        // Event.prototype.once = function (type, handle) {

        // }

        // // var oE = new Event();
        // // function deal1(time) {
        // //     console.log('overtime1:' + time);
        // // }
        // // oE.on('over', deal1);
        // // function deal2(time) {
        // //     console.log('overtime2:' + time);
        // // }
        // // oE.on('over', deal2);

        // // oE.emmit('over', '2018-9-25');

        // // oE.remove('over', deal2);

        // // oE.emmit('over', 'second-2018-9-25');


        // var oAp1 = PlaneFactory.create('AttackPlane', 10, 20);
        // var oAp2 = PlaneFactory.create('AttackPlane', 20, 70);

        // var oSp = PlaneFactory.create('SmallPlane', 20, 30);
        // var oBp = PlaneFactory.create('BigPlane', 30, 40);


        // // 装饰者模式
        // oAp1.decorate('eatOneLife');
        // oAp1.decorate('eatTwoLife');
        // oAp1.remove('eatOneLife');


        // oAp1.on('over', function () {
        //     this.die();
        // })


    </script>
</body>
</html>