Js修饰器模式使用帮助_模式指南攻略

不会改变原有的对象,而是在其基础上进行拓展。实现原理创建一个 A 类A 类中的属性和方法使用 ES7 中的修饰器语法对类和类的属性增加功能实现代码ts 修饰器语法如下是 ts 官方文档的例子:https://zhongsp.gitbooks.io/typescript-handbook/doc/handbook/Decorators.htmlfunction

Js修饰器模式使用帮助

不会改变原有的对象,而是在其基础上进行拓展。

Js修饰器模式使用帮助_模式指南攻略

实现原理

  • 创建一个 A 类
  • A 类中的属性和方法使用 ES7 中的修饰器语法对类和类的属性增加功能

实现代码

ts 修饰器语法

如下是 ts 官方文档的例子:https://zhongsp.gitbooks.io/typescript-handbook/doc/handbook/Decorators.html

function f() {
    console.log("f(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");
    }
}

function g() {
    console.log("g(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("g(): called");
    }
}

class C {
    @f()
    @g()
    method() {}
}

函数式

let obj = {
  lname: "young",
  fname: "oliver",
  gender: "male",
  getInfo() {
    return "get user infomation";
  }
};

// 这时需要添加一些方法,可以使用修饰器模式
// 这是需要添加的方法
function getGender() {
  console.log(this.gender);
}
function getFullName() {
  console.log(`${this.fname} ${this.lname}`);
}

obj.getInfo = function() {
  let getInfo = obj.getInfo;
  return function() {
    getInfo();
    getGender.call(obj); // 需要手动绑定 this
    getFullName.call(obj); // 需要手动绑定 this
  };
};

obj.getInfo()();

AOP 装饰函数

// 前置代码
Function.prototype.before = function(fn) {
  const self = this
  return function() {
    fn.apply(new(self), arguments)
    return self.apply(new(self), arguments)
  }
}

// 后置代码
Function.prototype.after = function(fn) {
  const self = this
  return function() {
    self.apply(new(self), arguments)
    return fn.apply(new(self), arguments)
  }
}
const wear1 = function() {
  console.log('穿上第一件衣服')
}

const wear2 = function() {
  console.log('穿上第二件衣服')
}

const wear3 = function() {
  console.log('穿上第三件衣服')
}

const wear = wear1.after(wear2).after(wear3)
wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

缺点是在 Function 的原型链上增加了 before、after 导致原生函数被污染

改成以下:

const after = function(fn, afterFn) {
  return function() {
    fn.apply(this, arguments)
    afterFn.apply(this, arguments)
  }
}

const wear = after(after(wear1, wear2), wear3)
wear()
海计划公众号
(0)
上一篇 2020/03/29 01:45
下一篇 2020/03/29 01:45

您可能感兴趣的内容

  • 对技术人想做自由职业的一些想法基础入门_职业小白入门

    最近几个朋友都跟我聊到想要辞职自己做事情,有程序员,也有设计师,还有广告行业的朋友。 我之前在V2EX上也回答过类似的帖子,最近和他们交流后,我还是想谈一谈我的一些想法,一些我对自由职业的理解。这些朋友都有一个共同点,他们都是靠自身技术吃饭的,在办公室里完成自己的工作,然后每个月拿一份还不错的薪水。重复性的工作、无聊的业务、没有挑战的工作等等因素,让他们不想

    2020/03/24
  • 在React中实现条件渲染的7种方法菜鸟知识_渲染基础知识

    借助React,我们可以构建动态且高度交互的单页应用程序,充分利用这种交互性的一种方法是通过条件渲染。条件渲染一词描述了根据某些条件渲染不同UI标签的能力。在React文档中,这是一种根据条件渲染不同元素或组件的方法。此概念通常被应用到如下情况中:从API渲染外部数据显示/隐藏元素切换应用程序功能实现权限级别认证与授权在本文中,我们将研究在React应用程序

    2020/03/23
  • a11y-dialog入门教程_一个非常轻便和灵活的可访问模态对话框

    a11y-dialog入门教程 官方网址:# GitHub:https://github.com/edenspiekermann/a11y-dialog 简介描述:一个非常轻便和灵…

    2020/03/11
  • Js队列的实现与应用入门教程_算法小白帮助

    队列与栈不同,它遵从先进先出(FIFO——First In First Out)原则,新添加的元素排在队列的尾部,元素只能从队列头部移除。function Queue() {let items = [];// 向队列添加元素(一个或多个)this.enqueue = function (element) {if (element instanceof Arr

    2020/03/29
  • h5落地页中的设计和优化基础知识_落地页入门教程

    广告投放的目标就是转化用户。投放效果的好坏关键在于目标用户的分析,产品或者服务的包装,导入图(导入标题)和落地页的设计和优化。1、导入图、落地页广告的素材一般包括导入图(导入标题)和落地页。流程是用户看到广告导入图,产生好奇点击广告导入图跳转到的落地页,产生好感采取了行动,那么这就是一个转化了。不同的媒体,由于广告位不同,导入图可以是广告小图、广告组图,或者

    2020/03/30
  • Js详细判断浏览器运行环境攻略教程_浏览器使用指南

    前言看到标题,大家就能想起这个需求在很多项目上都能用到。我们部署在Web服务器上的前端应用,既可以用PC浏览器访问,也可以用手机浏览器访问,再加上现在智能设备的推广,我们甚至能在车载系统、穿戴设备和电视平台上访问。设备的多样化让用户无处不在,有时候我们需要根据不同的浏览器运行环境做出对应的处理。浏览器是JavaScript的承载体,我们可以从浏览器上获取相关

    2020/03/24
  • 程序猿跳槽季,为什么你的薪水总升不上去?【转载】小白入门_程序员使用教程

    作者简介:马云飞,一名 Android 程序猿,扯扯技术,聊聊人生。有个人公众号「我就是马云飞」,如若喜欢本文,不妨关注看看。现在身处跳槽高峰季,作为即将跳槽的我,在这里分享几点建议给大家。简历怎么投?众所周知,找工作的前提是面试,面试的前提是过了简历,过了简历的前提是你怎么投。这边我不分析简历怎么写,来说说怎么投。在座的各位,有在校生,有毕业生,还有工作几

    2020/04/05
  • multiscroll.js零基础入门一款jQuery左右垂直反向滚动插件

    multiscroll.js小白常识 官方网址:http://alvarotrigo.com/multiScroll/ GitHub:https://github.com/alva…

    2020/03/06
  • jmpress.js基础指南打造华丽的3D幻灯片切换效果

    jmpress.js基础入门 官方网址:https://github.com/jmpressjs/jmpress.js GitHub:https://github.com/jmpr…

    2020/03/05
  • Qatrix小白基础_一款超轻量级JS框架

    Qatrix基础入门 官方网址:http://qatrix.com GitHub:https://github.com/catfan/Qatrix 简介描述:一款超轻量级JS框架 …

    2020/03/06
  • 4个开发 React 应用的实用技巧基础知识_技巧菜鸟指南

    背景Hooks 自推出以来就很火, 它改变了我们编写React 代码的方式, 有助于我们写更简洁的代码。今天这边文章不是说Hooks的,Hooks之外, 还有很多实用的技巧可以帮助我们编写简洁清晰的代码。今天我就整理了几个使用的技巧,其中有些也是我在公司项目中实践的,现在整理出来分享给大家, 希望对大家有所启发。1. 使用字符串来定义一个React元素举个简

    2020/03/23
  • 移动跨平台框架Flutter介绍和学习线路使用说明_Flutter基础入门

    Flutter简介Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。Flutt

    2020/03/30
  • 空虚寂寞的时候,该如何守住底线?基础知识_福利菜鸟攻略

    空虚的人常感到人生没有追求,做事缺乏动力;由于没有了寄托和精神支柱,做什么事都好像不顺心;又因为对自己没有正确的认识,感觉自己不中用,导致整天忧郁,思想空虚,这样的人就好象迷失了方向的船舶一样。 出轨,好像是当代社会出现的普片现象。我们应该怎么守住自己的底线呢首先:要明白自己是一个有家室的男人,外面的诱惑虽然大。但是自己也应该把持住,看过何以笙箫默的。应该

    2020/03/23
  • css3的transform:tanslateZ没有效果基础指南_效果使用帮助

    关于css动画tansform:translateZ(100PX)没有效果的记录之前学习cs3动画就学的迷迷糊糊的,这次项目中刚好用到了cs3动画,遇到了一个问题,记录下来,方便后期查阅在使用 tansform属性时,值设为tansform:translateX或tansform:translateY都是可以的,但是设置成tansform:translate

    2020/03/30
  • Jotti入门基础_在线恶意文件扫描工具

    Jotti入门基础 官方网址:https://virusscan.jotti.org/ 简介描述:在线恶意文件扫描工具 「Jotti」是一个专题提供恶意软件扫描的免费服务,让您同时…

    2020/03/11
  • js构造函数基础教程_函数入门基础教程

    使用构造函数构造可以复用的对象JS中的函数即可以是构造函数又可以当作普通函数来调用,当使用new来创建对象时,对应的函数就是构造函数,通过对象来调用时就是普通函数。在我们平时工作中,经常会需要我们创建一个对象,而我们更多的是使用对像直接量,直接创建,举个栗子,代码如下var person = {name:’postbird’,address:’earth’,

    2020/04/03