javaScript设计模式——装饰器模式（四）

最新推荐文章于 2024-07-22 14:00:00 发布

茉莉蜜茶~~~

最新推荐文章于 2024-07-22 14:00:00 发布

阅读量190

点赞数

分类专栏： javaScript 设计模式

本文链接：https://blog.csdn.net/weixin_42038290/article/details/111771256

版权

javaScript 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

设计模式

12 篇文章 0 订阅

订阅专栏

设计模式：有助于提高代码的复用性和可维护性

装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。

意图

动态地给一个对象添加一些额外的职责。就增加功能来说，装饰器模式相比生成子类更为灵活。

主要解决

一般的，我们为了扩展一个类经常使用继承方式实现，由于继承为类引入静态特征，并且随着扩展功能的增多，子类会很膨胀。

优点

装饰类和被装饰类可以独立发展，不会相互耦合，装饰模式是继承的一个替代模式，装饰模式可以动态扩展一个实现类的功能。

缺点

多层装饰比较复杂。

使用场景：

1、扩展一个类的功能。
2、动态增加功能，动态撤销。

应用实例

一种普通的咖啡只有水和咖啡豆，但是咖啡里面可以加糖或者牛奶

代码实现

//装饰器模式会优先与继承
//例子 咖啡  +牛奶  + 糖

class Coffee{
    //制作方法
    make(water){
        return `${water}+咖啡豆`
    }
}

//加奶咖啡 ----  装饰咖啡，需要加奶
class MilkCoffer{
    constructor(){
        this.parent = new Coffee()
    }
    make(water){
        return `${water}+咖啡豆+牛奶`
    }
}

//加糖咖啡  ----装饰咖啡，需要加糖
class SugarCoffer{
    constructor(){
        this.parent = new Coffee()
    }
    make(water){
        return `${water}+咖啡豆+糖`
    }
}

console.log(new MilkCoffer().make('水'))
console.log(new SugarCoffer().make('水'))

AOP 函数执行之前或之后添加一些新都逻辑，且不需要修改源方法

应用场景 : 表单校验

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="text" placeholder="请输入用户名" id="username">
        <input type="text" placeholder="请输入密码" id="password">
        <button id="loginBtn">登陆</button>
    </form>
    <script>
        //登陆之前先验证
        Function.prototype.before = function(beforeFn){
            let that = this
            return function(){
                let pass = beforeFn.apply(this,arguments)
                if(pass){
                    that.apply(this,arguments)
                }
            }
        }
        function loginFn(event){
            event.preventDefault() //阻止默认事件
            console.log('登陆成功')
        }
        
        loginFn = loginFn.before(function(){
            let username = document.getElementById('username').value
            if(!username){
                alert('请输入用户名')
                return false
            }
            return true
        })
        
        let btn = document.getElementById('loginBtn')
        btn.addEventListener('click',loginFn)
    </script>
</body>
</html>

常用的12种设计模式

茉莉蜜茶~~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript设计模式——装饰器模式（四）

设计模式：有助于提高代码的复用性和可维护性常用的12种设计模式工厂模式单例模式适配器模式装饰器模式代理模式观察者模式策略模式原型模式桥接模式组合模式命令模式享元模式装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。意图动态地给一个对象添加一些额外的职责。就增加功能来说，装饰器模式相比生成子类更为灵活。主要解决一般的，我们为了扩展一个类经常使用继承方式实
复制链接

扫一扫

专栏目录