前端设计模式

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')
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数模式 写一个函数,...
    萧雪圣阅读 261评论 0 0
  • 一、构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例 单例模式单例就是保证一个类只有一个实...
    任少鹏阅读 403评论 0 0
  • 1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数胡模式(constr...
    饥人谷_NewClass阅读 405评论 0 1
  • 1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数模式 构造函数模式是...
    hellowade阅读 289评论 0 0
  • 写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 工厂模式(factory) 缺点...
    放风筝的小小马阅读 362评论 0 2