初识设计模式

工厂模式

function createPerson(opts){
    var person = {};
    person.name = opts.name || " Chris"
person.sayName = function(){
    console.log(this.name);
}
return person;
}
var p1 = createPerson({name:"Chris"});
var p2 = createPerson({name:"kobe"});
p1.sayName();
p2.sayName();

构造函数模式

  function Person(name, age){
      this.name = name;
      this.age = age;
    }  
  Person.prototype.sayName = function(){
       console.log(this.name);
      }
// 调用
var student = new Person("Chris", 22);
 student.sayName();

模块模式

var student = (function(){
    var name = "Chris";
    function sayName(){
        console.log(name);
    }
    return {
        name: name,
        sayName: sayName
    }
})()
      student.sayName();

单例模式

  // 构造函数的实例只有一个 可以节约内存
  // 一般是通过闭包存储内部实例,通过接口访问内部实例。
var People = (function(){
      var instance;
      function init() {
          this.a = 1;
          this.b = 2;
      }
      return {
          createPeople: function(){
              if(!instance){
                  instance = init();
              }
              return instance;
          }
      }
  })();
  var obj1 = People.createPeople();
  var obj2 = People.createPeople();
  obj1 === obj2 // true

混合模式

  // 就是在原有的对象上面增加、覆盖对象的行为。
  var Person = function(name, age){
      this.name = name;
      this.age = age;
  };
  Person.prototype.sayName = function(){
      console.log(this.name);
  }
  var Student = function(name, age, score) {
      Person.call(this, name, age);
      this.score = score;
  }
  function inherit(superClass, slefClass){
      var _prototype = Object.create(superClass.prototype);
      _prototype.constructor = slefClass;
      slefClass.prototype = _prototype;
  }
  inherit(Person, Student);
  Student.prototype.sayScore = function(){
      console.log(this.score);
  }
var student = new Student("Chris", 22, 100);
student.sayName();
student.sayScore();

发布订阅模式

它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知。

  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;i<events[evt].length;i++){
        events[evt][i].handler(args);
    }
}

//  事件移除
function off(evt){
    delete events[evt]
}
return {
    on: on,
    fire: fire,
    off: off
}
})();

EventCenter.on("my_event", function(data){
    console.log("my_event被监控");
})
EventCenter.on("my_event2", function(data){
console.log("my_event2被监控");
})
EventCenter.fire("my_event");
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,827评论 2 17
  • 每一个模式描述了一个在我们周围不断重复发生的问题,以及该问题的解决方案的核心.这样,你就能一次又一次地使用该方法而...
    Dddddw阅读 361评论 0 1
  • *面试心声:其实这些题本人都没怎么背,但是在上海 两周半 面了大约10家 收到差不多3个offer,总结起来就是把...
    Dove_iOS阅读 27,209评论 30 471
  • 上一章 回到别墅后陆亦风直接回了自己的房间,冲了个澡换了身衣服才到书房办公。晚饭的时候大家都没有和杉妈提起王晋住院...
    狐狸九阅读 492评论 0 5
  • 人一切的痛苦,本质上都是对自己无能的愤怒。
    天蓝色的我阅读 299评论 0 0