高级任务6-前端设计模式

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

  • 构造函数模式
function Person(name, age) {
        this.name = name
        this.age = age
        }

        Person.prototype.sayName = function() {
            return this.name
        }

var student = new Person("jack", 30)
  • 混合模式
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 = Object.create(Person.prototype)
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 stu1 = new Student("jack", 18, 60)
  • 模块模式
var Person = (function() {
    var name = "jack"
    function sayName() {
        console.log(name)
    }
    return {
        name: name,
        sayName: sayName
    }
}())

Person
  • 工厂模式
function createPerson(name) {
        var person = {
            name: name
            }
        person.sayName = function() {
                console.log(this.name)
            }
            return person
        }

createPerson("mary").sayName()

function createPerson(name) {
    var person = {
        name: name,
        sayName: function() {
            console.log(this.name)
        }
    }
    return person
}

createPerson("mary").sayName()
  • 单例模式
var People = (function(){
    var instance
    function init(name) {
        return {
            name: name
        }
    }

    return {
        createPeople: function(name) {
            if(!instance) {
                instance = init(name)
            }
            return instance
        }
    }
}())

console.log(People.createPeople("jack"))
console.log(People.createPeople("mary"))
  • 发布订阅模式
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(i=0; i

使用发布订阅模式写一个事件管理器

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(i=0; i

你可能感兴趣的:(高级任务6-前端设计模式)