前言

• 最近看到几篇文章在说装饰器 用装饰器来优化前端权限控制
• 突然想起来自己刚开始写 React(react + mobx) 用的就是装饰器, 其实主要是低版本的 mobx4
• 写代码一般就是 复制/粘贴, 别人的代码能跑, 我复制过了能跑就万事大吉了. 原理逻辑那些都不重要, 计算机自己知道就行
• 既然又遇到到了, 那就重新学习一下吧, 欠过的债早晚也得还!

装饰器 概述

• 装饰器模式是一种经典的设计模式
• 它可以在不修改被装饰者（如某个函数、某个类等）源码的前提下，为被装饰者增加 / 移除某些功能（收集用户定义的类/函数的信息）。
• 例如用于生成路由表，实现依赖注入等等、也可以对用户定义的类/函数进行增强，增加额外功能
• 一些现代编程语言在语法层面都提供了对装饰器模式的支持，并且各语言中的现代框架都大量应用了装饰器。
• 装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。 装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。

装饰器为什么一直没收录到 ECMAScript 呢?

• 其实早在 9 年前装饰器就已经被提案(提案阶段简介)了, 2014-04 就已经进入了 Stage0
• 这么长时间都没确定规范的主要是因为各种利益权衡的问题，很难让各方达成一致，
• 包括其他功能（例如类成员和私有状态）的交互以及性能等方面。
• 虽然没有进入标准但我们已经在使用了. 因为没有确定规范所以即便在使用, 语法也可能会发生改变
• 目前我们用的比较多的是 Stage1 的方案
  • 通过设置 experimentalDecorators 为 true, 让编辑器支持
  • 通过使用 Babel 的代码转译, 让浏览器可以正常运行
• 到目前为止已经进入到了 Stage3 阶段
  • Stage3 的语法和 Stage1 语法已经发生了很大的变化
  • 如果你会Stage1的语法, 那你依然需要继续学习Stage3

那我们应该学习 Stage1 还是 Stage3 呢?

• 答案是 Stage1
• 官网上的回答: Unfortunately, we're in the classic trap of, "The old thing is deprecated, and the new thing is not ready yet!" For now, best to keep using the old thing.

总结

• 虽然 装饰器 已经存在和发展很长时间了, 但官方还没有给出确定的回答, 如果担心语法会修改的话可以再等等
  • 作者认为: Stage1 被使用了很久, 我们应该掌握最基本的语法
  • Stage3 基本上已经确认, 有时间的话可以去学习了
• 建议还是了解一下 Stage1 的语法, 毕竟已经被好多项目使用到了
• 今天要讲的就这些了, 没有讲装饰器的使用方法, 不过不用担心, 我会在未来的几天继续更新(2天更新一次), 如果着急学习的话, 可以参考下面链接

  • Stage1

    • JS装饰器(Decorators)用法-Stage1(旧)
    • juejin.cn/post/705999…
    • www.tslang.cn/docs/handbo…

  • Stage3

    • JS装饰器(Decorators)用法-Stage3(新)
    • github.com/tc39/propos…
    • www.51cto.com/article/743…

参考文档

知乎: 如何看待装饰器（Decorators）提案进入 stage3
github: tc39/proposal-decorators