zoukankan      html  css  js  c++  java
  • 装饰模式概述

    什么是装饰模式

    • 定义: 动态的给一个对象添加一些额外的职责,就增加功能来说,装饰模式比生成子类更加灵活
    • 本人的定义: 在不改变原函数的情况下,给他添加一些额外的属性函数等等(函数作为参数传递给另外一个函数内部)

    代码样例

    //这是一个普通的函数
    function add() {
    	console.log('add函数开始执行')
    	console.log('欢迎来到残梦博客园')
    	console.log('add函数执行完毕')
    	return '<div>函数</div>'
    }
    //给add函数再添加一些生命周期
    function newAdd(obj) {
    	console.log(obj)
    }
    newAdd(add())
    //经过装饰模式之后,add函数在原先的基础之上增加了额外的方法,但是并不会去破坏add函数原有的方法
    //可以理解为继承的另外一种方式
    

    那么装饰模式有什么作用呢,总不能白白浪费时间去学了一个无用的东西
    举例是react-redux的例子,如果没学过可以不用继续往下看了

    • react中的高阶组件全都可以看成是装饰模式
    • react-redux中的connect就是一个高阶组件
    const mapStateToProps = {xxxx}
    const mapDispatchToProps = {xxxx}
    //这是一个Demo组件
    function Demo(){
        render(xxx)
    }
    //connect(mapStateToProps,mapDispathToProps)(Demo)
    

    如果学习过react-redux的人看这段代码一定不是很陌生,在不改变demo原生状态的情况下,给他添加了state和dispath等等

  • 相关阅读:
    实现毛玻璃效果
    iOS-调用系统的短信和发送邮件功能,实现短信分享和邮件分享
    集成环信
    HTTP 方法:GET 对比 POST
    虚拟DOM
    javascript的回调函数 同步 异步
    jQuery中的Deferred和promise
    web性能
    JSONP
    java
  • 原文地址:https://www.cnblogs.com/sunhang32/p/11856797.html
Copyright © 2011-2022 走看看