首页»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条评论
登录会员中心
  • 苹果高管驳斥iPhone计划报废说 iOS 12就是证据 2019-02-16
  • 江西省第33届“爱鸟周”正式启动 2019-02-16
  • 现阶段人民是指全体社会主义劳动者、社会主义事业的建设者、拥护社会主义的爱国者和拥护祖国统一的爱国者。[哈哈] 2019-02-16
  • “有个景区叫宁夏”2018景区推介及产品政策在太原发布 2019-02-15
  • 重庆私藏的绝美古镇 悠闲不打挤 2019-02-15
  • 候选企业:国家开发银行 2019-02-14
  • 湖南省益阳市牵手第十二师二二一团举办“湘疆情深 爱洒兵团”捐赠仪式 2019-02-14
  • 88rising首张合辑即将发布 当红鬼才们的盛夏狂欢亚洲 文化 2019-02-14
  • 《中国国家地理》杂志社在拉萨林周县举行“黑颈鹤观察拍摄基地”授牌仪式文章中国国家地理网 2019-02-14
  • 随着科技的发展,人们获得信息的渠道越来越多,越来越方便。刘少奇同志说过:“你们的笔,是人民的笔,你们是党和人民的耳目喉舌。”愿人民日报做好党和人民的喉舌,越办越 2019-02-13
  • 从“掌握核心科技”到“创造核心科技” “自主”是格力的秘诀 2019-02-13
  • 曼谷车展遇见门罗 电动摩托也能很有范儿 2019-02-13
  • 杭州退役女狙击手爱上摩旅 曾“单骑”出国游老挝 2019-02-13
  • 镌刻下更美好的记忆(我与人民日报·纪念人民日报创刊70周年) 2019-02-12
  • 2018首届中国书画春节联欢晚会在京举行  2019-02-12
  • 908| 686| 442| 253| 275| 718| 216| 626| 860| 322|