design_pattern_code

1.构造函数,最后通过new的形式调用

function Person(name,age){
    this.name=name
    this.age=age
}
Person.prototype.sayName = function(){
    return this.name
}
var man = new Person('asan',3)

2.混合模式,原型链的继承

function Person(name,sex){
    this.name = name;
    this.sex = sex;
}
Person.prototype.getName = function(){
    console.log('my name is '+this.name)
};
function Male(name,sex,age){
    Person.call(this,name,sex);
    this.age = age;
}
Male.prototype = Object.create(Person.prototype);
Male.prototype.getAge = function(){
    console.log(this.age)
};
var man = new Male('asan', 'm', 17);
man.getName();//my name is asan

3.模块模式,通过闭包来实现一个模块

var Person = (function(){
    var name = "asan"
    function sayName(){
        console.log(name)
    }
    return {
        name:name,
        sayName:sayName
    }
})

4.工厂模式,创建不同的引用方式

function createPerson(name){
    var person={
        name:name,
        sayName:function(){
            console.log(this.name)
        }
    }
    return person
}

5.单例模式,匿名函数,不会创建一个新的 而是引用一个原先的

var People = (function(){
    var instance;
    function init(name){
        return{
            name:name
        }
    }
    return {
        createPerson: function(name){
            if(!instance){
                instance= init(name)
            }
            return instance
        }
    }
}())

6.发布订阅模式

var EventCenter=(function(){
    var events={};

    function on(evt,handler){
        events[evt]=events[evt] || [];
        events[evt].push({
            handler:handler
        })
    }
    function fire(evt,arg){
        if(!events[evt]){
            return 
        }
        for(var i=0;i<events[evt].length;i++){
            events[evt][i].handler(arg)
        }
    }
    function off(evt){
        delete events[evt];
    }
    return {
        on:on,
        fire:fire,   
        off:off           
    }
})()

EventCenter.on('event',function(haha){
    console.log(haha);
})
EventCenter.fire("event","gaga")//输出gaga
EventCenter.off('event')

使用发布订阅模式写一个事件管理器,可以实现如下方式调用

Event.on('change', function(val){
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饥人谷');
Event.off('changer');
var Event = function(){
    this.events={}
}

Event.prototype.on = function(topicName,callback){
    this.events[topicName] = this.events[topicName] || []
    this.events[topicName].push({
        callback:callback
    })
}
Event.prototype.fire = function(topicName,arg){
    if(events[topicName]){
        events[topicName].forEach(function(callback){
            callback.apply(this,arg)
        })    
    }
}
Event.prototype.off = function(topicName){
    delete this.events[topicName]
}
Event.on('change', function(val){
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饥人谷');
Event.off('change');
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,926评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,083评论 19 139
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,927评论 2 17
  • 前言 人生苦多,快来 Kotlin ,快速学习Kotlin! 什么是Kotlin? Kotlin 是种静态类型编程...
    任半生嚣狂阅读 26,303评论 9 118
  • 窗外路灯昏暗 过往车辆喘喘… 聆听这孤寂的夜漫漫 哎呦!没网的日子真难… 隔壁的门紧关 路由的信号满满 吾欲求这般...
    了了情空阅读 243评论 0 0