装饰器语法的一个思考

《西游记》竟然还有一个英文版的电视剧，这个找时间得看看了。

今天有个同事问了我一个问题，我们平时用的状态管理一般都是基于vuex或者react-redux，这两个有一些相似的地方，比方说声明全局的状态，然后组件上需要commit或者dispatch一个action才能触发请求。这种必须经过dispatch才能触发状态更新的过程有些繁琐。

有没有什么方法，可以不用调用这个dispatch,而是将声明在module中的action作为组件的方法直接调用呢？

这个问题我能想到的能够解决这个问题的方法有一个，就是装饰器语法。

装饰器语法

最早知道这个语法是ng框架中，这几年没写过ng基本上都忘得差不多了。

装饰器语法的写法比较简单：@跟上函数名称,它可以放在类和类方法的定义前面。

function getName(o) {
  o.name = 'terrence'
}
@getName
class Person {

}

// Person.name = 'terrence'

上面的代码给Person类添加了一个name属性。如果你把这个代码放到控制台执行，它会报错Uncaught SyntaxError: Invalid or unexpected token。

一部分原因是因为:装饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，装饰器能在编译阶段运行代码。也就是说，装饰器本质就是编译时执行的函数。

装饰器的实现

装饰器的实现理论上和装饰器模式是一致。主要目的是不改写原对象或原函数的情况下，动态的给原对象添加一些属性或方法。

实现起来非常简单，在对象的外层再包一个方法即可，同时保存原引用。

let a = function(){
  alert(1)
}

let _a = a;

a = function(){
  _a();
  alert(2)
}

理论上装饰器的语法是封装了这种功能。

回到问题中

理论上基于装饰器语法，我们可以实现将状态管理中的全局状态state数据，action操作等，直接映射到对应的组件上。在组件内直接通过this.调用对应的更新方法。

比如我们写一个getSore方法，通过这个方法将对应模块的状态等，直接映射到组件UserProfile中。

// 装饰器语法直接将 store，getUserInfo方法映射为 组件的属性及方法

@getStore
class UserProfile extends Component {


  componentDidMound(){
    this.getUserInfo()
  }
  render(){
  const {userName} = this.store
    return (
      <div>{userName}</div>
    )
  }
}

今天也找了个项目试了一下，好像还是少点什么，但是思路应该没啥问题。

总结

之前的项目里好像用过这个@getStore方法，但是记不清楚当时具体是怎么用的，用了哪个框架，总之思路应该没啥问题

具体实现嘛，看时间吧。

javascript基础知识总结