美文网首页
前端设计模式

前端设计模式

作者: Jeff12138 | 来源:发表于2017-10-28 22:26 被阅读0次

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

构造函数模式:

function Person(name,age) {
  this.name = name
  this.age = age
}
Person.prototype.sayName = function () {
  return this.name
}
var student = new Person('XiaoMing', 18)
console.log(student)

混合模式:

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
}
Student.prototype = create(Person.prototype)
function create (parentObj) {
  function F() {}
  F.prototype = parentObj
  return new F()
}
Student.prototype.sayScore = function () {
  console.log(this.score)
}
var student = new Student('XiaoMing',18,95)
console.log(student)

模块模式:

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

工厂模式:

function createPerson(name) {
  var person = {
    name: name,
    sayName: function () {
      console.log(this.name)
    }
  }
  return person
}
var p1 = createPerson('XiaoMing')
var p2 = createPerson('XiaoHong')

单例模式:

var People = (function () {
  var instance
  function init(name) {
    return {
      name: name
    }
  }
  return {
    createPeople: function (name) {
      if (!instance) {
        instance = init(name)
      }
      return instance
    }
  }
}())
var obj1 = People.createPeople('XiaoMing')
var obj2 = People.createPeople('XiaoHong')

发布订阅模式:

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)
    }
  }
  return {
    on: on,
    fire: fire
  }
})()
EventCenter.on('my_event', function (data) {
  console.log('my_event1 received...')
})
EventCenter.on('my_event', function (data) {
  console.log('my_event2 received...')
})
EventCenter.fire('my_event')

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

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

相关文章

网友评论

      本文标题:前端设计模式

      本文链接:https://www.haomeiwen.com/subject/suhspxtx.html