什么是室内设计师

Decorator是ES7的一个提案，可以解决两个问题：

在不同类之间共享方法在编译过程中更改类和方法的行为也非常简单，就是在类或方法的顶部添加@符号，这在typescript中的vue中经常使用

以上两个用法可能不太清楚，没关系，我们先来看第一个例子

示例1:修改类

@ setProp类User {}函数SetRop(target){ target。年龄=30}控制台.日志(用户。age)这个例子表示user类用setprop修饰，增加了User类中age的属性。setprop方法将接收三个参数，现在我们正在接触第一个参数。Target代表用户类本身。

示例2:修改器类(自定义参数值)

@ setrop(20)类用户{}函数setrop(value){返回函数(target) {target。age=value}} console.log(用户。age)这个例子与上面的函数基本相同，唯一的区别是值是通过引用修饰符函数传递的。

示例2:修改方法

class user { @ readonlygetname(){ return ' hello world ' } }//readonly修饰符，它对方法执行只读操作。函数只读(目标，名称，描述符){描述符。可写=false returndescriptor}让u=new User()//尝试修改函数，控制台将报告错误u. getName=()={return' i将重写' }在上面的示例中，我们用readonly修饰符修改了user类中的getName方法，因此无法修改该方法。我们已经知道第一个参数。参数名是方法名，即只读。什么是参数描述符？当我们看到这一行descriptor.writable=false时，我们都会猜测它。这三个参数对应的是Object.defineProperty的三个参数，我们来看看：

我们将descriptor.writable设置为false，这样，如果我们编写

描述符。value=' function () {console。日志(' Hello decorator')} '然后，输出是Hello World，但是Hello decorator。你意识到装修工的好处了吗？现在让我们看看实际的工作，我们使用装饰器的例子

实际应用1:日志管理

用webpack打包时，我们经常需要很多步骤，比如读取package.json文件，处理文件，加载webpack.base.js文件，打包文件.为了直观起见，我们经常在每一步打印一些日志文件，比如这一步做了什么。显然，打印日志的操作与业务代码完全无关，我们不应该将日志与业务混为一谈。

class Pack { @ log(' read package . JSON file ')步骤1() {//做点什么.//在没有修饰符之前，我们通常在函数中这里写console.log，这样会有两个缺点//1.console与业务无关。它会破坏功能统一的原则。//2.如果我们想删除所有控制台，我们只能深入到每个方法} @ log(‘合并webpack配置文件’)步骤2(){//做点什么.}}函数日志(值){返回函数(目标、名称、描述符){//在这里，我们还可以获取函数的参数并打印更详细的信息console.log(值)} } let pack=new pack()pack . step 1()pack . step 2()实际应用2:检查登录

这个例子在实际开发中经常用到。在一些操作之前，我们必须判断用户是否登录、比较好评、结算和发送弹幕.按照前面的写法，我们必须在每种方法中判断用户的登录状态，然后进行业务操作。显然，前提条件和业务再次混合在一起，使用修饰语就可以完美解决这个问题。代码如下：

Class User {//在获取登录用户@checkLogin getUserInfo() {/** *)的用户信息之前，我们都是这样写的：* if(checkLogin()) {* //业务代码*} *这个代码会在每个需要登录的方法中执行*或者上面的问题。执行前提和业务再次混合*/console.log('获取登录用户的用户信息')}//send message @ checkloginsendmsg(){ console . log(' send message ')}//检查用户是否登录，如果没有，则转到登录页面函数checkLogin(target，name，Descriptor){ let method=descriptor.value//simulation判断条件let islogin=true Descriptor . value=function(.Args){ if(islogin){ method . apply(this，Args)} else {console.log('未登录，将跳转到登录页面.')}}}让u=new user()u . getuser info()u . send msg()结论

以上只是修饰语的基本应用。只要掌握了原理，就要在实际工作中思考自己的应用场景，只要涉及到执行前需要做一些处理的应用，无论是修改函数的参数值、添加属性，还是执行的前提条件，都可以使用修饰符。这种编程方法是面向平面的编程。

关于源代码和如何使用，请访问GitHub(本地下载)

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。