js-day3 创建型设计模式

创建型设计模式

是一类处理对象创建的设计模式,通过某种方式控制对象的创建来避免基本对象创建时可能导致的设计上的问题或增加设计上的复杂度

Simpe Factory

简单工厂模式,又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例,主要用于创建同一类对象

基础需求

let LoginAlert=function (text) {
    this.content=text;
};
LoginAlert.prototype.show=function () {};
let userNameAlert=new LoginAlert('username <= 16 char number');
userNameAlert.show();
let passworldAlert=new LoginAlert('password error');
passworldAlert.show();
let LoginConfirm=function (text) {
    this.content=text;
};
LoginConfirm.prototype.show=function () {};
let loginFailConfirm=new LoginConfirm('username dont exist');
loginFailConfirm.show();
let LoginPrompt=function (text) {
    this.text=text;
};
LoginPrompt.prototype.show=function(){};
let PopFactory=function (name) {
    switch (name){
        case 'alert':
            return new LoginAlert();
        case 'confirm':
            return new LoginConfirm();
        case 'prompt':
            return new LoginPrompt();
    }
};

简单工厂

let Basketball=function () {
    this.intro='basketball';
};
Basketball.prototype={
    getMember:function () {
        console.log('5 members');
    },
    getBallSize:function () {
        console.log('very big');
    }
};
let Football=function () {
    this.intro='football';
};
Football.prototype={
    getMember:function () {
        console.log('11 members');
    },
    getBallSize:function () {
        console.log('big');
    }
};
let Tennis=function () {
    this.intro='tennis';
};
Tennis.prototype={
    getMember:function () {
        console.log('1 members');
    },
    getBallSize:function () {
        console.log('little');
    }
};
let SportsFactory=function (name) {
    switch (name){
        case 'NBA':
            return new Basketball();
        case 'wordCup':
            return new Football();
        case 'FrenchOpen':
            return new Tennis();
    }
};
let footnall=SportsFactory('wordCup');
console.log(footnall);
console.log(footnall.intro);
footnall.getMember();

对象包装实现

function createBook(name,time,type) {
    let o={};
    o.name=name;
    o.time=time;
    o.type=type;
    o.getName=function () {
        console.log(this.name);
    };
    return o;
}
let book1=createBook('js book',2014,'js');
let book2=createBook('css book',2013,'css');
book1.getName();
book2.getName();
function createPop(type,text) {
    let o={};
    o.content=text;
    o.show=function () {
        console.log(this.content);
    };
    if (type === 'alert'){}
    if (type === 'prompt'){}
    if (type === 'confirm'){}
    return o;
}
let userNameAlert=createPop('alert','26 char and number');

Factory Method

工厂方法模式,通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例

简单工厂实现(实现新的需求需要修改工厂类和添加类)

let Java=function (content) {
    this.content=content;
    (function (content) {
        let div=document.createElement('div');
        div.innerHTML=content;
        div.style.color='green';
        document.getElementById('container').appendChild(div);
    })(content);
};
let Php=function f(content) {
    this.content=content;
    (function (content) {
        let div=document.createElement('div');
        div.innerHTML=content;
        div.style.color='yellow';
        div.style.background='red';
        document.getElementById('container').appendChild(div);
    })(content);
};
let JavaScript=function (content) {
    this.content=content;
    (function (content) {
        let div=document.createElement('div');
        div.innerHTML=content;
        div.style.color='pink';
        document.getElementById('container').appendChild(div);
    })(content);
};
function JobFactory(type,content) {
    switch (type){
        case 'java:
            return new Java(content);
        case 'php':
            return new Php(content);
        case 'JavaScript':
            return new JavaScript(content);
    }
}
let js=JobFactory('JavaScript','javascript.....');

忽略new

let Demo=function () {};
Demo.prototype={
    show:function () {
        console.log('success');
    }
};
let d=new Demo();
d.show();
let d=Demo();
d.show();

安全模式类

let Demo=function () {
    if (!(this instanceof Demo)){
        return new Demo();
    }
};
Demo.prototype={
    show:function () {
        console.log('success');
    }
};
let d=Demo();
d.show();

安全工厂方法

let Factory=function (type, content) {
    if (this instanceof Factory){
        let s=new this[type](content);
        return s;
    } else {
        return new Factory(type,content);
    }
};
Factory.prototype={
    Java:function (content) {},
    JavaScript:function (content) {},
    php:function (content) {},
    UI:function (content) {
        this.content=content;
        (function (content) {
            let div=document.createElement('div');
            div.innerHTML=content;
            div.style.border='1px solid red';
            document.getElementById('container').appendChild(div);
        })(content);
    },
};
let data=[
    {type:'JavaScript',content:'javascript'},
    {type:'Java',content:'java'},
    {type:'Php',content:'php'},
    {type:'UI',content:'ui'},
    {type:'UI',content:'ui'},
    {type:'JavaScript',content:'javascript'},
    {type:'JavaScript',content:'javascript'},
];
let obj=[];
for (let i = 6;i>=0;i--){
    obj[i]=Factory(data[i].type,data[i].content);
    console.log(obj[i]);
}