全国咨询热线:18720358503

湖南长沙小程序_详解在Javascript中进行面向切面编

类别:企业动态 发布时间:2021-01-07 浏览人次:

详解在Javascript中进行面向切面编程       这篇文章主要介绍了Javascript面向切面编程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

场景

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

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

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

关注点分离

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

Node.js 日志log 埋点、数据上报 性能分析、统计函数执行时间 给ajax请求动态添加参数、动态改变函数参数 分离表单请求和验证 防抖与节流

 装饰器(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(pro凡科抠图) {
 super(pro凡科抠图);
 @send
 showDialog(content) {
 // do things
 render() {
 return (
 button () = this.showDialog('show dialog')} showDialog /button 
export default Dialog;

Class 上的原型方法,

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;

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

@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;

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

小结

面向切面编程的重点就是将核心关注面分离出横切关注面,前端可以用 AOP 优雅的来组织数据上报、性能分析、统计函数的执行时间、动态改变函数参数、插件式的表单验证等代码。

以上所述是小编给大家介绍的Javascript面向切面编程详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


推荐阅读

湖南长沙小程序_详解在Javascript中进行面向切面编

详细说明在Javascript中开展朝向切面程序编写 本文关键详细介绍了Javascript朝向切面程序编写,原文中根据实例编码详细介绍的十分详尽,对大伙儿的学习培训或是工作中具备一定的...

2021-01-07
手机网页转成小程序_记载vue项目中遇到的一点小

纪录vue新项目中碰到的一点小难题 文中是凡科网编给大伙儿个人收藏梳理的有关vue新项目中碰到的一点小难题,十分非常好,具备一定的参照效仿使用价值,必须的朋友能够参照下...

2021-01-07
做seo什么才是最重要的

SEO提升如何挑选网站域名和室内空间来提高提升效假如大家要想大家的网站有一个好的排行得话,那麼大伙儿一定要留意网站的网站域名和室内空间。当...网站制作企业怎样挑选公司网...

2021-01-07
SEO的变化趋势分析

自打百度搜索十月23日公布严厉打击连接舞弊的公示刚开始, 外部链接为帝 的核心理念早已到期,什么叫连接舞弊?百度搜索得出的表述是:掏钱选购或售卖能够提高说白了百度权重的...

2021-01-07
海淀副食商场综合楼外立面装修工程监理招标资

【工程项目序号:108F0JL】 海淀副食大型商场综合性楼外立面室内装修工程项目工程监理招标会资质预审公示 1.招标会标准本招标会新项目 海淀副食大型商场综合性楼外立面室内装...

2021-01-07
前端网站制作需要学习哪些基础知识

前端开发网站建设必须学习培训什么基本专业知识创作者:/html5+css/css要想详细的制做出一个公司网站,其实不是紙上谈兵就可以进行的事儿,在开展企业网站建设以前务必要学习培训一...

2021-01-07
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信