前端小技巧: 面向切面编程在前端代码中的应用

面向切面编程

  • 面向切面编程在java中提出这类概念
  • 但是在js没有束缚和约定,只需要按编程思想来实现原理
  • 在js中使用function或class实现面向切面编程

面向切面概念

  • AOP (Aspect Oriented Programming) 面向切面编程
  • 主要实现目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程中的某个步骤或者阶段,以获得逻辑过程中各部分之间低耦合性的隔离效果
  • 类比
    • 用刀切西瓜,西瓜红壤面就是切面,可以两驱切面的圆周和面积
    • 无侵入式的干扰
    • 只需要两篇,比如开头和结尾截取, 而非随意切,横切,竖切
    • 处理业务某个中间的部分,提取和隔离,不对具体业务干扰
    • 比如在业务中穿插了一些代码,比如网页性能检测,用js埋点
    • 不在里面埋点,在整体业务上加东西,在函数之前或之后执行,如果哪天有热插拔的需求,把函数抽走,也不影响原来的业务
    • 埋点函数和原来业务不会影响和混淆

代码实现

  • 比如, 统计当前所有函数谁耗时最长,最性能优化

  • 1 )侵入式演示: 每个函数前后加代码

    function test() {console.time()alert(2)console.timeEnd()
    }
    
  • 2 ) 在原型链上添加函数优化,先忽略这个 console.time/timeEnd 统计函数

    • 2.1 只添加before函数到原型链上

      function test() {alert(2)
      }Function.prototype.before = function (fn) {fn() // 执行前置任务this.apply(this, arguments) // 执行自身
      }
      // 演示
      test.before(function() {alert(1)
      })
      
    • 2.2 只添加after函数到原型链上

      function test() {alert(2)
      }Function.prototype.after = function (fn) {// 先执行 this本身,再执行回调this.apply(this, arguments) // 执行自身fn() // 执行前置任务
      }// 演示
      test.after(function() {alert(3)
      })
      
    • 2.3 将before和after函数添加到原型链上

      function test() {alert(2)
      }Function.prototype.before = function (fn) {fn() // 执行前置任务// return this.apply(this, arguments) // 执行自身 // 这里可以return 用于其他this.apply(this, arguments) // 执行自身
      }Function.prototype.after = function (fn) {// 先执行 this本身,再执行回调this.apply(this, arguments)fn() // 执行后置任务
      }// 演示
      test.before(function() {alert(1)
      })
      test.after(function() {alert(3)
      })
      
      • 这时候默认函数被执行了2遍,需要优化
  • 5 ) 继续优化重复执行的默认函数,将this只在before中执行

    function test() {alert(2)
    }Function.prototype.before = function (fn) {fn() // 执行前置任务// return this.apply(this, arguments) // 执行自身 // 这里可以return 用于其他this.apply(this, arguments) // 执行自身
    }Function.prototype.after = function (fn) {// 先执行 this本身,再执行回调// this.apply(this, arguments) // 执行自身fn() // 执行后置任务
    }// 演示
    test.before(function() {alert(1)
    })
    test.after(function() {alert(3)
    })
    
    • 以上是原型链中添加, 这完全没问题,但是写了两次
  • 6 ) 支持链式调用版本优化

    function test() {alert(2)
    }Function.prototype.before = function (fn) {var _self = thisreturn function () {fn.apply(this, arguments)_self.apply(this, arguments)}
    }Function.prototype.after = function (fn) {var _self = thisreturn function () {_self.apply(this, arguments)fn.apply(this, arguments)}
    }
    
    • 基于以上代码,如果这样测试, 测试1:
      // 演示
      test.before(function() {alert(1)
      }).after(function() {alert(3)
      })()
      
      • 它的输出顺序是
        after
        before
        1
        2
        before over
        3
        after over
        
    • 如果这样测试, 测试2
       test.after(() => {alert(3)}).before(() => {alert(1)})()
      
      • 它的输出顺序是
        before
        1
        after
        2
        3
        after over
        before over
        
  • 注意的是 this 指针的引用,使用function而非箭头函数
  • 以上示例,不管先调用before还是after
    • 都会先执行before中的fn
    • 之后是默认函数
    • 最后才是after的fn
    • 输出顺序都是: 1 2 3

7 ) 链式调用,并支持异常断开

function test() {alert(2)// return false // 注意这里可以打开,尝试return 'test'
}Function.prototype.before = function (fn) {var _self = thisreturn function () {if (fn.apply(this, arguments) === false) {return false}return _self.apply(this, arguments)}
}Function.prototype.after = function (fn) {var _self = thisreturn function () {var result = _self.apply(this, arguments)if (result === false) return falsefn.apply(this, arguments)return result // 这里注意}
}// 演示
test.before(function() {alert(1)
}).after(function() {alert(3)
})()
  • 注意以上 === 判断中,关于 false 和 undefined区别
  • undefined 意味着成功,只有主动 false 时,才可以
  • 还可以换一种写法,比如 return true时,继续,其他都拒绝执行
  • 每一层都可以 return , 可return成任意值,只有false才会阻断

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/207636.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第18章:随堂复习与企业真题(JDK8-17新特性)

第18章:随堂复习与企业真题(JDK8-17新特性) 一、随堂复习 1. JDK新特性的概述 几个重要的版本 jdk 5.0 / jdk 8.0 :里程碑式的版本jdk9.0 开始每6个月发布一个新的版本LTS : jdk8 、 jdk 11 、 jdk 17 如何学习新特性 > 角…

Android安全学习路标

1. Android操作系统基础知识 首先,你需要建立坚实的Android操作系统基础知识,包括Android架构、进程和内存管理、应用组件和权限模型等基本概念。 2. 安全防范理论 学习关于安全防范理论的基础知识,包括常见的威胁模型、攻击类型和安全风险…

Python-猜数字游戏

🎈 博主:一只程序猿子 🎈 博客主页:一只程序猿子 博客主页 🎈 个人介绍:爱好(bushi)编程! 🎈 创作不易:喜欢的话麻烦您点个👍和⭐! 🎈…

免费的AI改写文案软件,热门AI改写文案软件【2024】

在数字化时代,文案创作变得更为便捷,其中AI改写文案软件的兴起为写作者们带来了全新的创作体验。这些工具通过智能算法和自然语言处理技术,能够快速改写文本,提高创作效率。本文将深入探讨AI改写文案软件的现状,介绍一…

LeetCode题:174. 地下城游戏

目录 一、题目要求 二、解题思路 (1)状态表示 (2)状态转移方程 (3)初始化dp表 (4)填表顺序 (5)返回值 三、代码 一、题目要求 174. 地下城游戏 恶魔们…

swagger入门

swagger入门 pom依赖 不用专门导入swagger 因为springboot已经将它集成了 org.springframework.boot spring-boot-starter com.github.xiaoymin knife4j-spring-boot-starter Swagger配置类 Configuration public class SwaggerConfig { // 创建并配置Docket Bean&#xf…

snakeyaml编辑yaml文件并覆盖注释

文章目录 前言技术积累实战演示1、引入maven依赖2、覆盖注释工具类3、snakeyaml工具类4、测试用例5、测试效果展示 写在最后 前言 最近在做一个动态整合框架的项目,需要根据需求动态组装各个功能模块。其中就涉及到了在application.yaml中加入其他模块的配置&#…

TCP传输层详解(计算机网络复习)

介绍:TCP/IP包含了一系列的协议,也叫TCP/IP协议族,简称TCP/IP。该协议族提供了点对点的连接机制,并将传输数据帧的封装、寻址、传输、路由以及接收方式都予以标准化 TCP/IP的分层模型 在讲TCP/IP协议之前,首先介绍一…

力扣贪心题解 跳跃游戏

55. 跳跃游戏 - 力扣(LeetCode) 给你一个非负整数数组 nums ,你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标,如果可以,返回 true &#xff1b…

信息系统开发方法

企业信息系统对于企业信息化的重要意义是不言而喻的。从实际运行的效果来看,有些信息系统运行得很成功,取得了巨大的经济效益和社会效益;但也有些信息系统效果并不显著,甚至还有个别信息系统开始时还能正常运行,可时间…

广州数字孪生赋能工业制造,加速推进制造业数字化转型

广州数字孪生赋能工业制造,加速推进制造业数字化转型。数字孪生系统基于历史数据、实时数据,采用人工智能、大数据分析等新一代信息技术对物理实体的组成、特征、功能和性能进行数字化定义和建模。通过构建在信息世界对物理实体的等价映射,对…

Axure官方软件安装、汉化保姆级教程(带官方资源下载)

1.下载汉化包 百度云链接:https://pan.baidu.com/s/1lluobjjBZvitASMt8e0A_w?pwdjqxn 提取码: jqxn 2.解压压缩包 3.安装Axure 进行安装 点击next 打勾,然后next, 默认是c盘,修改成自己的文件夹(不要什么都放c盘里…

RestTemplate硬编码的使用

RestTemplate是由Spring框架提供的一个可用于应用中调用rest服务的类它简化了与http服务的通信方式,统一了RESTFul的标准,封装了http连接,我们只需要传入url及其返回值类型即可。相较于之前常用的HttpClient,RestTemplate是一种更…

API测试基础之http协议

http简介: http(超文本传输协议)是一个简单的请求-响应协议,它通常运行在TCP(传输控制协议)之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出…

远程控制如何赋能智能制造?贝锐向日葵制造业场景案例解析

随着数字化转型在制造业的不断深入,企业在产线端也逐渐投入更多智能化设备,数字化、智能化设备其中一个比较显著的优势就是可以依托互联网实现远程运维和调试,大大提升产线设备的稳定性和工作效率;而远程调试运维一个重要的实现方…

人工智能原理复习--搜索策略(一)

文章目录 上一篇搜索概述一般图搜索盲目搜索下一篇 上一篇 人工智能原理复习–确定性推理 搜索概述 问题求解分为两大类:知识贫乏系统(依靠搜索技术解决)、知识丰富系统(依靠推理技术) 两大类搜索技术: …

海思3516DV500下的目标识别算法运行评估,包含yolov7,yolov8

目前在3516DV500下,自己训练的模型的评估实测结果。根据实际模型会有些许差异。 涉及到技术细节的部分因为商业用途,有部分省略。如需相关技术服务项目合作可私信联系。 我司推出的目标识别跟踪模块,支持热红外、可见光主流多光谱视频输入与目…

WeiPHP 微信开发平台 SQL注入漏洞复现

0x01 产品简介 weiphp 是一个开源,高效,简洁的微信开发平台,基于 oneThink 内容管理框架实现。 0x02 漏洞概述 weiphp 微信开发平台 _send_by_group、 wp_where、 get_package_template等接口处存在 SQL 注入漏洞,攻击者利用此漏洞可获取数据库中的信息(例如,管理员后台…

三数组最小距离:2020年408算法题

算法思想 算法实现 #define INT_MAX 0x7fffffff //c语言int类型最大值 //计算绝对值 int abs(int a){if(a<0) return -a;else return a; } //判断a是否为3个数中最小值 bool isMin(int a,int b,int c){if(a<b&&a<c) return true;return false; }//主函数 in…

RepidJson中Writer类、FilewriteStream类、 PrettyWriter类的区别

rapidjson是一个C的JSON解析库&#xff0c;可以用于解析和序列化JSON数据。 Writer是rapidjson中一种基本的输出流&#xff0c;用于将JSON数据输出到字符串或文件中。 FileWriteStream是一个Writer的子类&#xff0c;它专门用于将JSON数据输出到文件中。相比于普通的Writer&a…