前端设计模式

1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。

//构造函数设计模式
function People(name,age) {
  this.name = name
  this.age = age
}
People.prototype.sayName = function() {
  console.log(this.name)
}
var student1 = new People('Jack',18)
var student2 = new People('jirengu',24)

student1 ===  student2 //false 两个不同的引用
//混合设计模式
function People(name, age) {
  this.name = name
  this.age = age
}
People.prototype.sayName = function () {
  console.log(this.name)
}

function Student(name, age, score) {
  People.call(this, name, age)
  this.score = score
}
Student.prototype = create(People.prototype)
Student.prototype.constructor = Student
function create(parentObj) {
  function F() { }
  F.prototype = parentObj
  return new F()
}
Student.prototype.sayScore = function () {
  console.log(this.score)
}

var student1 = new Student('Jack', 18, 100)
var student2 = new Student('Peter', 28, 60)
student1 === student2//false,两个不同的引用
//模块设计模式
var Person = (function(){
  var name = 'Jack'
  function sayName(){
    console.log(name)
  }
  return {
    name: name,
    sayName: sayName
  }
})()
//工厂设计模式
function createPerson(opts) {
  var person = {
    name: opts.name || 'hunger'
  }
  person.sayName = function(){
    console.log(this.name)
  }
  return person
}

var student1 = createPerson({name: 'Jack'})
var student2 = createPerson({name: ''})
student1 === student2 //false,不同的引用
//单例模式
var People = (function(){
  var instance;
  function init() {
    var name = 'Jack'
    var age = 18
    return {
      name: name,
      age: age
    }
  }
  return {
    createPeople: function() {
      if(!instance) {
        instance = init()
      }
      return instance
    }
  }
})()

var student1 = People.createPeople()
var student2 = People.createPeople()
student1.name = 'Peter'
console.log(student2)//{name:'Peter',age:18}
student2.age = 30
console.log(student1)//{name:'Peter',age:30}
student1 === student2//true 指的是同一个引用

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

     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 (let i = 0; i < events[evt].length; i++) {
            events[evt][i].handler(args)
          }
        }
        function off(evt) {
          if (!events[evt]) {
            return
          }
          delete events[evt]
        }
        return {
          on: on,
          fire: fire,
          off: off
        }
      })()

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

推荐阅读更多精彩内容

  • 1. 写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数模式 写一个函数,...
    萧雪圣阅读 124评论 0 0
  • 1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数胡模式(constr...
    饥人谷_NewClass阅读 249评论 0 1
  • 写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 工厂模式(factory) 缺点...
    放风筝的小小马阅读 213评论 0 2
  • 1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数模式 构造函数模式是...
    hellowade阅读 138评论 0 0
  • 一、构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例 单例模式单例就是保证一个类只有一个实...
    任少鹏阅读 207评论 0 0
  • 当你走的那一刻, 我把世界涂黑。 我把心儿藏在月上, 把泪泻在黎明。 你把多少话要留? 不睡,在倾听。 你把心儿摔...
    疯_嫠阅读 57评论 0 1
  • 1 今天早晨起床后,很方便地完成了近7天的分类统计和回顾,因为方法得当,所以很方便,感恩! 2 今天早晨出门前,...
    LiHongxi阅读 52评论 0 0
  • 结婚证不同于身份证一样有有效期,而是象征着一对新人爱情的信物。执子之手,与子偕老。
    梁栋航Albert阅读 584评论 0 0
  • 文件系统相关类 要处理文件系统相关功能,一般直接使用Python 标准库中的函数,Qt 包含的以下几个类,只需要简...
    勤劳的悄悄阅读 978评论 0 1