使用装饰者模式做有趣的事情 (2)

缓存函数返回值

// 缓存函数结果，对于一些计算量比较大的函数效果比较明显。 function memorize(func) { const cache = {}; return function (...args) { const key = JSON.stringify(args); if (cache[key]) { console.log('缓存了'); return cache[key]; } const result = func.call(this, ...args); cache[key] = result; return result; }; } function fib(num) { return num < 2 ? num : fib(num - 1) + fib(num - 2); } const enhanceFib = memorize(fib); console.log(enhanceFib(40)); console.log(enhanceFib(40)); console.log(enhanceFib(40)); console.log(enhanceFib(40));

构造React高阶组件,为组件增加额外的功能，比如为组件提供shallowCompare功能：

import React from 'react'; const { Component } = react; const ShadowCompareDecorator = (Instance) => class extends Component { shouldComponentUpdate(nextProps, nextState) { return !shallowCompare(this.props, nextProps) || !shallowCompare(this.state, nextState); } render() { return ( <Instance {...this.props} /> ); } }; export default ShadowCompareDecorator;

当然，你如果用过react-redux的话，你肯定也用过connect。其实connect也是一种高阶组件的方式。它通过装饰者模式，从Provider的context里拿到全局的state，并且将其通过props的方式传给原来的组件。

总结

使用装饰者模式可以让我们为原有的类和函数增添新的功能，并且不会修改原有的代码或者改变其调用方式，因此不会对原有的系统带来副作用。我们也不用担心原来系统会因为它而失灵或者不兼容。就我个人而言，我觉得这是一种特别好用的设计模式。

一个好消息就是，js的装饰器已经加入了es7的草案里啦。它让我们可以更加优雅的使用装饰者模式，如果有兴趣的可以添加下babel的plugins插件提前体验下。阮一峰老师的这个教程。

参考文献：

**Javascript设计模式