我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Javascript中怎么实现面向切面编程

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Javascript中怎么实现面向切面编程

本篇文章为大家展示了Javascript中怎么实现面向切面编程,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

面向切面编程(Aspect-oriented programming,AOP)是一种编程范式。做后端 Java web 的同学,特别是用过 Spring 的同学肯定对它非常熟悉。AOP 是 Spring 框架里面其中一个重要概念。可是在 Javascript 中,AOP 是一个经常被忽视的技术点。

场景

假设你现在有一个牛逼的日历弹窗,有一天,老板让你统计一下每天这个弹窗里面某个按钮的点击数,于是你在弹窗里做了埋点;

过了一个星期,老板说用户反馈这个弹窗好慢,各种卡顿。你想看一下某个函数的平均执行时间,于是你又在弹窗里加上了性能统计代码。

时间久了,你会发现你的业务逻辑里包含了大量的和业务无关的东西,即使是一些你已经封装过的函数。
那么 AOP 就是为了解决这类问题而存在的。

关注点分离

分离业务代码和数据统计代码(非业务代码),无论在什么语言中,都是AOP的经典应用之一。从核心关注点中分离出横切关注点,是 AOP 的核心概念。
在前端的常见需求中,有以下一些业务可以使用 AOP 将其从核心关注点中分离出来

  1. Node.js 日志log

  2. 埋点、数据上报

  3. 性能分析、统计函数执行时间

  4. 给ajax请求动态添加参数、动态改变函数参数

  5. 分离表单请求和验证

  6. 防抖与节流

 装饰器(Decorator)

提到 AOP 就要说到装饰器模式,AOP 经常会和装饰器模式混为一谈。

在ES6之前,要使用装饰器模式,通常通过Function.prototype.before做前置装饰,和Function.prototype.after做后置装饰(见《Javascript设计模式和开发实践》)。

Javascript 引入的 Decorator ,和 Java 的注解在语法上很类似,不过在语义上没有一丁点关系。Decorator 提案提供了对 Javascript 的类和类里的方法进行装饰的能力。(尽管只是在编译时运行的函数语法糖)

埋点数据上报

因为在使用 React 的实际开发中有大量基于 Class 的 Component,所以我这里用 React 来举例。
比如现在页面中有一个button,点击这个button会弹出一个弹窗,与此同时要进行数据上报,来统计有多少用户点击了这个登录button。

import React, { Component } from 'react';
import send from './send';

class Dialog extends Component {

  constructor(props) {
    super(props);
  }

  @send
  showDialog(content) {
    // do things
  }

  render() {
    return (
      <button onClick={() => this.showDialog('show dialog')}>showDialog</button>
    )
  }
}

export default Dialog;

上面代码引用了@send装饰器,他会修改这个 Class 上的原型方法,下面是@send装饰器的实现

export default function send(target, name, descriptor) {
  let oldValue = descriptor.value;

  descriptor.value = function () {
    console.log(`before calling ${name} with`, arguments);
    return oldValue.apply(this, arguments);
  };

  return descriptor;
}

在按钮点击后执行showDialog前,可以执行我们想要的切面操作,我们可以将埋点,数据上报相关代码封装在这个装饰器里面来实现 AOP。

前置装饰和后置装饰

上面的send这个装饰器其实是一个前置装饰器,我们可以将它再封装一下使它可以前置执行任意函数。

function before(beforeFn = function () { }) {
  return function (target, name, descriptor) {
    let oldValue = descriptor.value;

    descriptor.value = function () {
      beforeFn.apply(this, arguments);
      return oldValue.apply(this, arguments);
    };

    return descriptor;
  }
}

这样我们就可以使用@before装饰器在一个原型方法前切入任意的非业务代码。

function beforeLog() {
  console.log(`before calling ${name} with`, arguments);
}
class Dialog {
  ...
  @before(beforeLog)
  showDialog(content) {
    // do things
  }
  ...
}

和@before装饰器类似,可以实现一个@after后置装饰器,只是函数的执行顺序不一样。

function after(afterFn = function () { }) {
  return function (target, name, descriptor) {
    let oldValue = descriptor.value;

    descriptor.value = function () {
      let ret = oldValue.apply(this, arguments);
      afterFn.apply(this, arguments);
      return ret;
    };

    return descriptor;
  }
}

性能分析

有时候我们想统计一段代码在用户侧的执行时间,但是又不想将打点代码嵌入到业务代码中,同样可以利用装饰器来做 AOP。

function measure(target, name, descriptor) {
  let oldValue = descriptor.value;

  descriptor.value = function () {
    let ret = oldValue.apply(this, arguments);
    performance.mark("startWork");
    afterFn.apply(this, arguments);
    performance.mark("endWork");
    performance.measure("work", "startWork", "endWork");
    performance
     .getEntries()
     .map(entry => JSON.stringify(entry, null, 2))
     .forEach(json => console.log(json));
    return ret;
  };

  return descriptor;
}

在要统计执行时间的类方法前面加上@measure就行了,这样做性能统计的代码就不会侵入到业务代码中。

class Dialog {
  ...
  @measure
  showDialog(content) {
    // do things
  }
  ...
}

上述内容就是Javascript中怎么实现面向切面编程,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Javascript中怎么实现面向切面编程

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Spring中怎么实现面向切面编程

Spring中怎么实现面向切面编程?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。一、AOP——另一种编程思想1.1、什么是 AOPAOP (Aspect Ori
2023-06-15

Java面向切面编程怎么实现

在Java中实现面向切面编程,可以使用以下几种方式:1. 使用代理模式:通过创建代理类,将横切逻辑封装在代理类中,然后在实际业务类中使用代理类进行调用。代理类可以使用Java提供的动态代理(java.lang.reflect.Proxy)或
2023-08-08

Java面向切面编程AOP怎么实现

这篇文章主要介绍“Java面向切面编程AOP怎么实现”,在日常操作中,相信很多人在Java面向切面编程AOP怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Java面向切面编程AOP怎么实现”的疑惑有所
2023-06-04

使用Java AOP实现面向切面编程

面向切面编程(AOP)是一种编程思想,它将程序中的关注点分离,使得开发人员可以专注于核心业务逻辑而不必过多关注横切关注点。

Springboot怎样使用Aspectj实现AOP面向切面编程

Springboot怎样使用Aspectj实现AOP面向切面编程,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。要在 Springboot中声明 AspectJ 切面需在 IOC
2023-06-22

怎么在Android中实现切面编程

这篇“怎么在Android中实现切面编程”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么在Android中实现切面编程”文
2023-06-30

Spring2.5.6中面向切面编程及实现的示例分析

这期内容当中小编将会给大家带来有关Spring2.5.6中面向切面编程及实现的示例分析,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。面向切面编程(AOP)通过提供另外一种思考程序结构的途经来弥补面向对象编
2023-06-17

java中怎么实现面向对象编程

这篇文章给大家介绍java中怎么实现面向对象编程,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1:允许将子类的引用付给父类的对象,但子类中的那些不是从父类继承来的成员将不再可见。例:Bus bus=new Bus();
2023-06-17

Python中怎么实现面向接口编程

本篇文章为大家展示了Python中怎么实现面向接口编程,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。”面向接口编程“写 Java 的朋友耳朵已经可以听出干茧了吧,当然这个思想在 Java 中非常重
2023-06-15

JavaScript面向对象编程实现模拟

面向对象编程(ObjectOrientedProgramming)将现实世界中的复杂关系抽象成一个个对象,通过对象之间的分工合作对现实世界进行模拟
2022-11-13

golang函数利用反射实现面向切面的编程

答案:是的,go 语言中的反射可以实现面向切面的编程。详细描述:反射允许程序在运行时修改和检查自己的类型和值。通过反射,我们可以为代码创建全局切面,在函数执行前、后触发。这使我们能够轻松添加日志记录等功能,而无需修改现有代码。反射提供了代码
golang函数利用反射实现面向切面的编程
2024-04-25

利用Java AOP实现面向切面编程的关键技术

Java AOP 是基于 Java 语言的实现方式,基于动态代理和反射机制,提供了一种在运行时对程序进行拦截和修改的能力,使得程序员能够以更加灵活和方便的方式处理横切逻辑。本文将介绍利用 Java AOP 实现面向切面编程的关键技术。
Java技术2024-11-30

Java aop面向切面编程有什么特点

面向切面编程(AOP)是一种软件开发范式,用于将横切关注点(cross-cutting concerns)与主要业务逻辑分离。AOP 可以在不改变原始代码的情况下,通过引入切面(aspect)对应用程序进行功能增强、横切关注点的处理等操作
Java aop面向切面编程有什么特点
2024-03-01

编程热搜

目录