创建型设计模式学习笔记

个人学习笔记 所以没有说明细节,有时间补充一下。如有错误欢迎指正批评:)

工厂模式

ES5前
var BookFactory = function(subType, superType) {  
    if(typeof BookFactory[superType] === 'function'){
        function F(){};
        F.prototype = new BookFactory[superType]();
        F.constructor = subType;
        subType.prototype = new F();
    } else {
        throw new Error('未创建该对象');
    }
}



BookFactory.IT = function() {  
   this.type = 'it';
}
BookFactory.IT.prototype = {  
    getPrice : function() {
       return new Error('抽象方法不能调用');
    },
    getCategory : function() {
       return new Error('抽象方法不能调用');
    }
}

var JavascriptBook = function(price, category) {  
    this.price = price;
    this.category = category;
}
BookFactory(JavascriptBook, 'IT');  
JavascriptBook.prototype.getPrice = function() {  
    console.log(this.price);
}
JavascriptBook.prototype.getCategory = function() {  
    console.log(this.category)
}

var book1 = new JavascriptBook(1000, 'HTML5');  
console.log(book1.getPrice());  
console.log(book1.type);  
ES6
    class Book {
        constructor() {
            this.haha = 'aaa'
            this.author = 'Yuan Liang';
        }

        show() {
           console.log(this.author);
        }

        static factory(type) {
           return new Book[type];
        }
    }

    Book.BookITBook = class BookITBook extends Book {
        constructor() {
            super();
            this.author = 'Liang Yuan';
        }
    }

建造者模式

ES5前
    var Human = function(param) {
        this.skill = param && param.skill || '保密';
        this.hobby = param && param.hobby || '保密';
    }

    Human.prototype = {
        getSkill : function(){
            return this.skill;
        },
        getHobby : function() {
            return this.hobby;
        }
    }

    var Work = function(work) {
        var that = this;
        (function(work, that){
            switch(work) {
                case 'code' :
                    that.work = '码农';
                    that.workDesc = '屌丝';
                case 'UI' :
                    that.work = '设计师';
                    that.workDesc = '逼格高';
                default :
                    that.work = work;
                    that.workDesc = '没描述';
            }
        })(work, that)

    }

    var Named = function(name) {
        var that = this;
        (function(name, that){
            that.wholeName = name;
            if(name.indexOf(' ') > -1) {
                that.FirstName = name.slice(0, name.indexOf(' '));
                that.LastName = name.slice(name.indexOf(' '));
            }
        })(name, that);
    }

    var Person = function(name, work) {
        var person = new Human();
        person.name = new Named(name);
        person.work = new Work(work);
        return person;
    }

    var person = new Person('xiao ming', 'code');
ES6 这里明显有其他更好的方法,有空再琢磨
    class Human {
        constructor(param) {
            this.skill = param && param.skill || '保密';
            this.hobby = param && param.hobby || '保密';
        }
        getSkill() {
            return this.skill;
        }
        getHobby() {
            return this.hobby;
        }
    }

    class Name {
        constructor(name) {
            this.wholeName = name;
            if(name.indexOf(' ') > -1) {
                this.FirstName = this.getFirstName(name);
                this.LastName = this.getLastName(name);
            }
        }
        getFirstName(name) {
            return name.slice(0, name.indexOf(' '));
        }
        getLastName(name) {
            return name.slice(name.indexOf(' '));
        }
    }

    class Work {
        constructor(work) {
            this.workTitle = '';
            this.workDesc = '';
            this.getWork(work);
        }
        getWork(work) {
            switch(work) {
                case 'code' :
                    this.workTitle = '码农';
                    this.workDesc = '屌丝';
                    break;
                case 'UI' :
                    this.workTitle = '设计师';
                    this.workDesc = '逼格高';
                    break;
                default :
                    this.workTitle = work;
                    this.workDesc = '没描述';
            }
        }
    }

    class Person {
        constructor(name, work) {
            this.name = new Name(name);
            this.work = new Work(work);
        }
        get() {
            return this;
        }
    }

    var person = new Person('Yuan Liang', 'code');

原型模式

ES5前
    function prototypeExtend() {
        var F = function() {
            arg = arguments;
            len = arg.length;
            for(i = 0; i < len; i++) {
                for(var j in arg[i]) {
                    F.prototype[j] = arg[i][j];
                }
            }
        }
        return new F();
    }

    var Penguin = prototypeExtend({
        speed : 20,
        swim : function() {
            console.log('游泳速度 :' + this.speed;
        },
        run : function(speed) {
            console.log('奔跑速度 :' + speed);
        },
        jump :function() {
            console.log('跳跃');
        }
    });
ES6 class可模拟 随便写一个下面
    class Ainmal {
        constructor(speed) {
           this.speed = speed;
        }
    }

    class Fish extends Ainmal {
       constructor(speed) {
           super(speed);
       }
       swim() {
          console.log('游泳速度 :' + this.speed)
       }
    }

    class Penguin extends Fish {
        constructor(speed) {
           super(speed);
        }
        run(speed) {
            console.log('奔跑速度 :' + speed);
        }
        jump() {
            console.log('跳跃');
        }
    }

单例模式

ES5前
    var Conf = (function(){
            var conf = {
                MAX_NUM : 100,
                MIN_NUM : 1,
                COUNT : 1000
            }

            return {
                get : function(name){
                    return conf[name] ? conf[name] : null;
                }
            }
        })();
惰性单例模式
    var LazySingle = (function(){
        var _instance = null;

        function Single() {
            return {
                publicMethod : function(){},
                publicProperty : '1.0'
            }
        }

        return function(){
            if(!_instance) {
                _instance = Single();
            }
            return _instance;
        }
    })();
    console.log(new LazySingle().publicProperty);
ES6
    let _instance = (function() {
        let instance = null;
        return (_instance) => {
            if(_instance) instance = _instance;
            return instance;
        }
    })();

    class Single {
        constructor() {
            if(!_instance) {
                return _instance();
            }  else {
                _instance
            }
        }
    }

    console.log(new Single() === new Single());

Yuan Liang

资深程序渣、秧歌队贝斯手、摄影百拍王、意淫旅行家、正经的令人发指!

http://yuanliang.io
—Read This Next—

ES6设计模式(一)


学习笔记 今儿再看了看ES6,准备把设计模式用ES6重写一下,以加深理解。 ES6的class只是现有javascript[[Prototype]]机制的包装。 想到设计模式就应该现梳理一下面向对象相关的知识。 面向对象最基本的核心就是 封装、继承、多态。以下就针对这三点基本核心
—You Might Enjoy—

ES6设计模式(三)


ES6设计模式 个人学习笔记 没啥说明转折,有时间补充一下 结构型设计模式 外观模式 用户简化底层代码方式,或者兼容性。 ES5 // 获取事件对象 var getEvent = function(event) { return event || window.eve