JavaScript修饰器-让代码更干净

luqiuwen 发布于2019-08-20 14:51 / 1217人阅读

摘要：修饰器是一个函数，用于修改类行为。结论以上只是一个很简单的修饰器示例，你可以根据需要生产一些有意思的修饰器，让编写的代码更优雅更干净。

一般在JavaScript中为了让部分代码延迟执行，一想起的自然是 setTimeout，比如：

setTimeout(() => {
  // doing
}, 0);

这种代码或许你不知道写过多少遍，但，我们在 setTimeout 中多数情况下会去调用另一个方法：

setTimeout(() => {
  this.fn();
}, 0);

你会发现，我们一直都在重复写着 setTimeout，再套用一个匿名函数，最后才真正去编写我们需要执行的方法。我越来越讨厌这种写法，老是写着一些无关系要多余的代码。

使用Angular的同学对 @Component 不陌生，里面大量的使用这种ES7才会有的“修饰器”。

修饰器是一个函数，用于修改类行为。

那，应该怎么编写一个更干净的 setTimeout，比如，我希望这样来编写我的timeout：

@timeout(1000)
fn() {
  // doing
}

this.fn();

对应的 timeout 修饰器代码：

// timeout.ts
export function timeout(milliseconds: number = 0) {
  return function(target, key, descriptor) {
    // value 值相当于上面示例中 `change` 方法。
    var orgMethod = descriptor.value;
    descriptor.value = function(...args) {
      setTimeout(() => {
        orgMethod.apply(this, args);
      }, milliseconds);
    };
    return descriptor;
  }
}

target：实例对象，即 IndexComponent 实例化对象。
key：方法名称，即 _fn_。
descriptor：对象描述，同Object.getOwnPropertyDescriptor() 。

怎么样，这样子写的代码是不是更酷？

修饰器目前只能在ES7才会有，但一些在Typescript、Babel等转码器已经被支持，特别是Angular2应用中更是给予非常重要的地位。而且应用范围可以非常广，比如类、类方法和属性。

结论

以上只是一个很简单的修饰器示例，你可以根据需要生产一些有意思的修饰器，让编写的代码更优雅、更干净。完整示例。

GPU云服务器云服务器如何让服务器更安全、修饰器 Python修饰器 python类修饰器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81970.html

CSS || 功能分类

摘要：组件的外观可以通用，但是位置却不能。总结出现上述问题的愿意一个承担的样式太多。在使用等简写属性时，注意其中关于位置和布局的样式等布局和位置由单独的布局类或单独容器元素构成。降低现有类名冲突使用规则进行命名。 CSS模块化规则 CSS模块的设计原则：可重用可维护可扩展 1 常见的问题 1.1 基于父组件直接修改样式 .widget { background: yello...

xuhong 2019-08-29 12:13 评论0 收藏0
Vue 基础语法

摘要：在生成的项目中，我们打开文件夹下组件，为便于演示，删减了一部分内容本文中的例子都将改造组件来演示语法一创建组件在中，有好几种方式用来创建组件，后面会单独写一篇文章来介绍。表达式插值中也支持表达式插值用双大括号将表达式括起来。 Vue 的官方文档写的非常棒(另一个我觉得中文文档写的很好地是 Ant-Design)。这篇文章以使用 vue-cli 生成的项目为基础，以完整 demo 的...

saucxs 2019-08-23 14:59 评论0 收藏0
关于BEM的反思

摘要：反思在学习爱中，我要表明我对语法的新感受。缩短修饰符长度在中，修饰符类用两个连接符表示。在中，它可能是这样的在的指南中，有一个关于修饰符的部分。对于很多营销网站来说，甚至是完全多余的。我赞扬对外公开它们的内部规范。反思BEM 在学习爱BEM中，我要表明我对BEM语法的新感受。我很高兴地报告说，经过2年以上，我仍然对我的选择感到满意。当我们在项目中选择代码风格时，我们使用BEM和I...

xbynet 2019-08-29 13:27 评论0 收藏0
Smarty（一）

摘要：还有安全特性，可以令模板源码有强制的约束。并且业务逻辑和显示逻辑分离，是的一个设计理念。是一个模板引擎，在应用程序中，当作层视图层的组件来使用。不一定保证良好的程序设计或者达成显示分离的目的，这还得需要开发者和模板设计师的努力。一、 Smarty的由来 Smarty的主要设计理念是：干净的分离显示逻辑和程序代码，在PHP为后端情况下，Smarty模板应用在前端，增强PHP的前后端交互...

aboutU 2019-08-21 17:38 评论0 收藏0
Smarty（一）

摘要：还有安全特性，可以令模板源码有强制的约束。并且业务逻辑和显示逻辑分离，是的一个设计理念。是一个模板引擎，在应用程序中，当作层视图层的组件来使用。不一定保证良好的程序设计或者达成显示分离的目的，这还得需要开发者和模板设计师的努力。一、 Smarty的由来 Smarty的主要设计理念是：干净的分离显示逻辑和程序代码，在PHP为后端情况下，Smarty模板应用在前端，增强PHP的前后端交互...

chenjiang3 2019-06-28 14:15 评论0 收藏0