龙都娱乐»JavaScript»前端工程师必须掌握的设计模式

前端工程师必须掌握的设计模式

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

构造函数模式 —— Constructor

构造函数相信大家都不会陌生
在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') }

模块模式 —— 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条评论
登录会员中心
龙都娱乐