登录  /  注册

Decorator 简介及相关教程

小云云
发布: 2017-12-05 10:11:14
原创
1265人浏览过

Decorator 简介

decorator 是一种通过注解表达式就可以扩展类或者方法的函数。decorator 可以应用到任何一个 class 或者property 上。列如:

@myDecorator class A {} // 作用class

@myDecorator
doSomething() {}  // 作用表达式
登录后复制

 

Javascript Decorator 目前任然是ES7提案状态,更多该特性的进度可以访问 proposal-decorators 查看。

Decorator原理

说到更改对象的属性或者方法,大家肯定会想到 Object.defineProperty(obj, prop, descriptor) 方法,通过该方法,我们可以轻易的修改或者重写对象的行为或者属性,之前 Vue 中提到的双向绑定,即是通过重写 set 和 get 方法来实现的。所以在我们还未正式用上 Decorator 前,都是通过 Object.defineProperty 方法来实现。先来简单的认识下这个方法:

/**

  • obj : 需要修改属性的对象

  • prop : 需要修改对象的属性名称

  • descriptor: 用来定义属性具体行为的描述对象
    **/
    Object.defineProperty(obj, prop, descriptor)

descriptor 属性说明

  • configurable : 定义属性对象是否可以被配置,即如果为 false ,定义修改的描述操作(writeable, get 等等)都无效

  • enumerable : 是否可以通过 for-in 来遍历,或者 Object.keys 列举

  • value : 定义对象 value 属性的值,value 可以是 number, object, function 等等

  • writable: 定义 value 值是否可以被重写

  • get: 一个访问 value 属性时会触发的 function 对象

  • set: 一个设置 value 属性时会触发的 function 对象

修改一个属性为只读(readonly)

了解 Object.defineProperty 的基本语法后,我通过它先简单实现一个 readonly 实例。具体代码如下:

Decorator 的基本语法与使用

``javascript
# 定义
function myDecoration(target, name, descriptor) {}

# 对property使用
 class A {
 @myDecorator
 test() {}
 }

 # 对class使用
 @myDecorator
 class A {}

 # 带参数
 function myDescorator(a) {
 return function (target, name, descriptor) {
 console.llog('params:', a)
 }
 }
 @myDescorator(a) 
 class A {}

 # 时使用多个装饰器(Decorator)
 @myDecorator1
 @myDecorator2
 class A {}
登录后复制

 

利用 Decorator 语法糖修改一个属性为只读(readonly)

利用 Decorator 给 React 组件封装 PureRender

我们都知道,在 React 生命周期里有一个 shouldComponentUpdate 方法,该方法通过返回 ture 或者 false 来确定组件是否重新 render 组件。也就是说,通过该方法我们可以过滤掉些无效的数据渲染事件,从而提升性能。例如我们针对 props 传递过来的数据对象进行对比,如果 props 对象的属性以及值并未变更的情况下,则无需执行render方法。

显然通过对比 props 下数据对象的属性与值是否变更,这种逻辑是可以复用的,而不是在单独的在每个组件中去在重复的写 shouldComponentUpdate 方法。说到改变组件对象的方法行为,这里我们显然就可以使用

Decorator 来这个特性来做了,即我们对应用 Decorator 对象的 shouldComponentUpdate 进行重写。通过遍历 props 对象的属性和值,并与老 props 的属性与值进行对比,从而确定是否需要重新渲染。具体代码如下:

function isEqual(a, b) {
  for (const key in a) {
    if ({}.hasOwnProperty.call(a, key) &&
      (!{}.hasOwnProperty.call(b, key) || a[key] !== b[key])) {
      return false;
    }
  }
  for (const key in b) {
    if ({}.hasOwnProperty.call(b, key) && !{}.hasOwnProperty.call(a, key)) {
      return false;
    }
  }
  return true;
}

export default function pureRender(targetComponent) {
  targetComponent.prototype.shouldComponentUpdate = function (props, state) {
    return !isEqual(this.state, state) || !isEqual(this.props, props)
  }
}

// 使用
@pureRender
class ComponentA extends React.Component {}
登录后复制

 

通过 Babel 使用 Decorator

由于 Decorator 是ES7中的草案,所以现在需要通过 Bable 才能使用。使用方法如下:

安装

npm install --save-dev babel-plugin-transform-decorators

使用

方法一、 通过配置.babelrc

{
  "plugins": ["transform-decorators"]
}
登录后复制

 

方法二、通过CLI

babel --plugins transform-decorators script.js

方法三、通过Node API

require("babel-core").transform("code", {
  plugins: ["transform-decorators"]
});
登录后复制

 

总结

通过 Decorator 这种不需要直接在对象或者方法中编写额外逻辑的方式,就可以轻易的扩展对象或者方法的能力,既满足了功能需求,也精简了代码,保证了代码的可维护性,例如我们已经常见的@log, @test, @mixin等等工具类。所以,以后的工作中可以多多尝试。

 

参考

  • 细说ES7 JavaScript Decorators

  • Decorator specification

  • Exploring EcmaScript Decorators

  • Object.defineProperty

  • Babel Legacy Decorator plugin

  • core-decorators

 以上内容就是Decorator 简介及相关教程,希望能帮助到大家。

先关推荐:

JavaScript中函数Decorator实例详解

装饰器decorator详解及实例

php设计模式 Decorator(装饰模式)

以上就是Decorator 简介及相关教程的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号