javascript的设计模式--创造型设计模式

347 阅读1分钟

上周的课程中,老师解读了下js的中设计模式以及必要性,课后做了一个复习和汇总。

设计模式按照不同的目的需求可以分为几大类,例如:架构型设计模式、结构型设计模式、行为型设计模式等。

所谓的创造型设计模式可以分为:工厂模式、建造者模式、原型模式以及单例模式。

简单工厂模式:简单工厂模式的理念是创建对象,以对话框弹窗为例

function createPop(type,text){
    Var o=new Object();
    o.content=text;
    o.show=function(){
        //显示方法
    }
    if(type=='alert'){
        //弹窗差异部分
    }
    if(type=='prompt'){
        提示差异部分
    }
    if(type=='confirm'){
        提交差异部分
    }
    return o
}
Var user =createPop('alert','hhhh');

工厂方法模式:主要负责用于创建多类产品的实例

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){},
    Javascript:function(content){}
}
调用:
var data=[{},{},{}]
for(var i=0,i<data.length;i++){
    Factory(type,content)
}

建造者模式:将复杂对象的构建层与其表示层相互分离

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 Named =function(name){
    var that =this;
    (function(name,that){
        that.wholeName = name;
        if(name.indecOf('')>-1){
            that.FirstName = name.slie(0,name.indexOf(''));
            that.SecondName = name.slice(name.indexOf(''));
        }
    })(name,that)
}
//实例化职位类
var Work =function(work){
    var that =this;
    (function(work,that){
        switch(work){
            case 'code':
            that.work='工程师';
            case 'UI':
            that.work='设计师';
            case 'teach':
            that.work='教师';
        }
    })(work,that)
}
Work.prototype={
    changeWork:function(){
        this.work=work;
    }
}
//创建建造者
var Person =function(name,work){
    var _person=new Huname();
    _pername.name=new Name(name);
    _person.work=new Work(work);
    return _person;
}

单例模式:单例模式应用是最常见的

var A={
    Util:{
        method1:function(){},
        method2:function(){}
    }
    Ajax:{
        method1:function(){},
        method2:function(){}
    }
}
A.Ajax.method1();