首页»JavaScript»前端工程师必须掌握的设计模式

时时彩后一选号技巧: 前端工程师必须掌握的设计模式

来源:bluesboneW 发布时间:2018-04-18 阅读次数:

构造函数模式 —— Constructor

黑龙江时时彩玩法 www.hfebe.com.cn 构造函数相信大家都不会陌生
在JS里,我们对构造函数使用new来新增实例

核心

1.将属性绑定到this上
2.将方法绑定到prototype上
3.使用new来新增实例【创建不同的引用类型】

案例

function People() {
    this.name = '人'
}

People.prototype.walk = function () {
    console.log('walk')
}

let xiaoming = new People()

工厂模式 —— Factory

顾名思义,工厂模式就是像是工厂一样流水线般生产处一个个对象

核心

1.return一个对象
2.创建不同的引用类型

案例

function createPerson() {
    // 定义工厂
    let person = {
        name: '人',
        walk: function () {
            console.log('walk')
        }
    }
    
    return person // 返回一个对象
}

let xiaoming = createPerson() // 工厂生产对象

单例模式 —— Singleton

核心

1.产生一个类的唯一实例
2.好处就是节约内存

案例

function createPeople() {
    let name
    return function (userName) {
        return name || (name = userName)
    }
}

let single = createPeople()
console.log(single('人')) // '人'
// 不管再传递任何值,也只会返回 '人'
console.log(single('马')) // '马'

混合模式 —— Mixin

核心

1.在JS中,一般我们实现继承的过程就是混合模式
2.其概念就是提供能够被一个或者一组子类简单继承功能的类

案例

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
}

function create(prototypeObj) {
    let empty = function () {}
    empty.prototype = prototypeObj
    return new empty()
    // return值如下
    // {
    //     __proto__:prototypeObj
    // }
}

Student.prototype = create(People.prototype)

Student.prototype.work = function () {
    console.log('work')
}

??槟J?—— Module

核心

在js中,常常使用闭包的形式来实现

案例

let Person = !(function () {
    let name = '小明'
    function sayName() {
        console.log(name)
    }

    return {
        name: name,
        sayName: sayName
    }
})()

发布订阅模式 —— Publish/Subscribe

核心

比如我【订阅者】现在订阅了一个公众号,公众号【发布者】向我发布消息

案例

实现一个jQuery的发布订阅案例

// 订阅者
$('div').on('click',function () {})

// 发布者
$('header').on('click',function () {
    $('div').trigger('click')
})

代码

let EventCenter = (function () {
    let 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(name) {
        delete events[name]
    }

    return {
        on: on, // 订阅者
        fire: fire, // 发布者
        off: off // 取消订阅
    }
})()

EventCenter.on('hello', function (num) {
    console.log(num)
})
EventCenter.on('hello', function (num) {
    console.log(num)
})

EventCenter.fire('hello', 1) // 1[出现两次]
QQ群:WEB开发者官方群(515171538),验证消息:10000
微信群:加小编微信 849023636 邀请您加入,验证消息:10000
提示:更多精彩内容关注微信公众号:全栈开发者中心(fsder-com)
网友评论(共0条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心
  • 胡杏儿晒儿子软萌照 睡眼惺忪眼神迷人可爱十足 2018-12-18
  • 坚守65天 穿梭长江源头——青海移动助力班德湖斑头雁孵化直播 2018-12-18
  • 【学习时刻】中央党校张志明:开辟中华民族伟大复兴的通衢大道 2018-12-17
  • 制造业如何在坚守中求变 2018-12-17
  • 2018年6月13日国台办新闻发布会 2018-12-16
  • 李贻伟当选惠州市人大常委会主任 刘吉当选市长 2018-12-16
  • 从榜单看黑茶“热” 首批中国黑茶类制茶大师公布 2018-12-16
  • 涂颜淼:转变思维 做新时代的消防战士 2018-12-15
  • 泼皮无赖风水神,尔有脸能告诉大家这个————“腐败分子是天上掉下来的吗?”————跟帖是哪一个主帖下边的跟帖? 2018-12-15
  • 毒贩冲卡疯狂逃窜  民警鸣枪示警一网打尽 2018-12-15
  • 女白领不是将自己嘴里吃剩的饭连口水一起打包的,而是将桌上的,人们没吃的留给了贫寒者,这有什么错? 2018-12-15
  • 回复@笑傲江湖V:七千二百多吧。 2018-12-14
  • “一带一路”大学双创教育“和声正美” 2018-12-14
  • 回复@艾鸣1:你看强坛除了小寻子这种跟你一样老蚕的人之外,有人会有人敢支持你么? 2018-12-14
  • 创新体制机制为振兴龙江提供人才保障 2018-12-14
  • 771| 538| 413| 134| 972| 226| 46| 502| 632| 448|