前端设计模式

  1. 写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。
//构造函数模式:new一个实例
  function Person(name, age) {
      this.name=name;
      this.age=age;
  }
 Person.prototype.sayName= function () {
    console.log(this.name)
  };
 var person1 = new Person("lisa",30);
//混合模式
    function Person(name, age) {
        this.name=name;
        this.age=age;
    }
    Person.prototype.sayName= function () {
        console.log(this.name)
    };
    function Student(name,age,score) {
        Person.call(this,name,age);
        this.score=score;
    }
    Student.prototype=Object.create(Person.prototype);
    Student.prototype.sayScore = function () {
        console.log(this.score)
    }
    var stuent1= new Student("andy","12","100");
    //模块模式:通过闭包实现一个模块
    var Person = (function () {
        var name = "ruoyu";
        function sayName() {
            console.log(this.name)
        }
        return {
            name:name,
            sayName:sayName
        }
    })();
    Person.sayName();
//工厂模式:每次返回一个对象;
function CreatePerson(name) {
        var person={
            name:name,
            sayName:function () {
                console.log(this.name)
            }
        };
        return person;
    }
CreatePerson("ruoyu").sayName();
//单例模式:应用场景=》弹窗
    Person = (function() {
        var instance;
        function init(name) {
            return {name:name}
        }
    return {
        createPerson:function (name) {
            if(!instance){
                instance =  init(name);
            }
            return instance
        }
    }

    })();
    Person.createPerson("andy");//{name: "andy"}
    Person.createPerson("lili");//{name: "andy"}
//发布订阅模式
    var EventCenter = (function () {
        var events={};
        function on(evt,handler) {
            events[evt] =   events[evt] || [];
            events[evt].push({
                handler:handler
            });
        }
        function fire(evt,args) {
            if(!events[evt]){
                return
            }
            for(var i =0 ; i456
    EventCenter.fire("hello","123");//alert=>123
    EventCenter.off("hello");//解除事件
    EventCenter.fire("hello","123");//没有弹框
  1. 使用发布订阅模式写一个事件管理器,可以实现如下方式调用
Event.on('change', function(val){
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饥人谷');
Event.off('changer');
var Event = (function () {
        var events={};
        function on(evt,handler) {
            events[evt] =   events[evt] || [];
            events[evt].push({
                handler:handler
            });
        }
        function fire(evt,args) {
            if(!events[evt]){
                return
            }
            for(var i =0 ; i

你可能感兴趣的:(前端设计模式)