码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript设计模式

时间:2020-03-26 01:16:35      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:desc   授权   享元模式   get   var   设置   使用   模版方法模式   javascrip   

Javascript设计模式

设计模式有23种,分为三个大类创建型,结构型,行为型。

创建型:工厂模式(工厂方法模式,抽象工厂模式,建造者模式),单例模式,原型模式。

解构型:适配器模式,装饰器模式,代理模式,外观模式,桥接模式,组合模式,享元模式。

行为型:策略模式,迭代器模式,模版方法模式,职责连模式,观察者模式,命令模式,备忘录模式,中介者模式,状态模式,解释器模式,访问者模式。

工厂模式

工厂模式是一个创建型模式,他提供了创建对象的一种方式,在创建对象时只提供创建方法,不暴露创建逻辑。工厂模式将new操作单独封装,遇到new操作时可以考虑使用这种模式。

举个例子:假如去餐厅吃饭,我们去了餐厅只需要点餐和取餐两个步骤,至于食物的加工处理是由餐厅来提供,我们不需要知道其中的过程。

演示代码:

class Person {
    constructor(name) {
        this.name = name
    }
    say() {
        console.log(‘ary you ok ?‘, this.name )
    }
}
class Make {
    create(name) {
        return new Person(name)
    }
}
const make = new Make()
const jack = make.create(‘jack‘)
jack.say()

场景:

// React.createElement()
React.createElement(‘h1‘, className = ‘blue‘, ‘hello worf‘ )

单例模式

单例模式属于创建型,是比较简单的一个模式。该模式一个类只能有一个实例,在系统中被唯一使用。

场景:购物车,登陆框,vuex 和 redux 中的 store。

适配器模式

旧接口与使用者不兼容,中间加一个适配转换接口。

场景:vue computed

装饰器模式

为对象添加新功能,不改变其原有结构和功能。它作为一个现有类的包装。

class Circle {
    draw() {
        console.log(‘画一个圆形‘)
    }
}
class Decorator {
    constructor(circle) {
        this.circle = circle
    }
    draw() {
        this.circle.draw()
        this.setRedBorder(circle)
    }
    setRedBorder() {
        console.log(‘设置红色边框‘)
    }
}
// 测试
// 未装饰的
let circle = new Circle()
circle.draw()
// 打印 画一个圆形

// 装饰器后的
let dec = new Decorator(circle)
dec.draw()
// 打印 画一个圆形  设置红色边框

场景:

ES7 装饰器

@dec
class Demo {
}
function dec(target) {
    target.isDec = true
}
console.log(Demo.isDec) // true
function log(target, name, descriptor) {
   var oldValue = descripter.value
   descriptor.value = function() {
       console.log(`Calling ${name} with`, arguments)
       return oldValue.apply(this, arguments)
   }
   return descriptor
}

class Math {
   @log
   add(a, b) {
       return a + b
   }
}

const math = new Math()
const result = math.add(2, 4)
// 执行add时,装饰器会自动打印日志。
console.log(‘打印‘, result)

代理模式

使用者无权访问目标对象,中间加代理,通过代理做授权和控制。

场景:通过代理访问外网,网页事件代理,jQuery $.proxy ,ES6 Proxy。

未完,后续随时更新补充。

Javascript设计模式

标签:desc   授权   享元模式   get   var   设置   使用   模版方法模式   javascrip   

原文地址:https://www.cnblogs.com/liea/p/12571734.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!