javascript自定义事件的观察者模式写法和用法以及继承
<html><head><meta http-equiv="Context-Type:text/html;charset=utf-8"/><title>自定义事件之观察者模式</title><script type="text/javascript" src="common.js"></script></head><body><input type="button" name="btn" value="点击" id="mybtn"/><script type="text/javascript">//继承关系函数function inherit(sub,sup){var prototype=Object(sup.prototype);prototype.constructor=sub;sub.prototype=prototype;}//父类函数function EventTarget(){this.handlers={};}//父类函数的原型方法EventTarget.prototype={//使用字面量对象的原型方法必须加上构造函数原自父类，不然字面量原型方法就继承于object对象constructor:EventTarget,//注册自定义事件，也就是自定义事件的处理的函数addHandler:function(type,handler){if(typeof this.handlers[type] =="undefined"){this.handlers[type]=[];}this.handlers[type].push(handler);},//执行自定义事件的函数，也就是触发自定义事件的函数fire:function(event){if(!event.target){event.target=this;console.log(event);}if(this.handlers[event.type] instanceof Array){var handlers=this.handlers[event.type];//console.info(handlers);for(var i=0;i<handlers.length;i++){handlers[i](event);}}},//删除自定义事件函数removeHandler:function(type,handler){if(this.handlers[type] instanceof Array){var handlers=this.handlers[type];for(var i=0;i<handlers.length;i++){if(handlers[i]===handler){break;}}handlers.splice(i,1);}}};//子类function Person(name,age){EventTarget.call(this);this.name=name;this.age=age;}//子类继承父类inherit(Person,EventTarget);//执行自定义事件函数Person.prototype.say=function(message){//type表示你自定义事件的种类，message表示触发后的信息this.fire({type:"message",message:message});}//执行自定义的事件的函数Person.prototype.data=function(event,str){//这里type同样表示自定义事件的种类，event表示传递过来的事件，data:str表示传递的数据this.fire({//event这里表示从re()函数的btn事件中传递过来的点击事件type:'data',x:event.clientX,y:event.clientY,data:str});};//getna事件，获取person的name\agePerson.prototype.getna=function(arr){this.fire({type:'getna',getna:arr});}//一般事件信息处理函数function hm(event){alert("message received: "+event.message);}//这里re(event)中的event表示从data事件中传递过来的event//处理点击事件带数据的函数function re(event){var ss=event;btn.onclick=function(event){var event=EventUtil.getEvent(event);var target=EventUtil.getTarget(event);alert(event.x+":"+event.y);console.info(ss.data);}}//处理getna事件的函数function getnameage(event){alert(event.getna);}//创建实例var person=new Person('Nicholas',23);//注册一般事件信息person.addHandler("message",hm);//注册点击事件，获取点击的坐标person.addHandler('data',re);//触发一般事件的信息person.say("Hi i am here");var btn=document.getElementById('mybtn');//触发带数据的点击事件person.data('','dfd');//先注册getna事件person.addHandler('getna',getnameage);//然后触发getna事件的函数person.getna([person.name,person.age]);</script></body>
</html>
相关文章：
javascript自定义事件的观察者模式写法和用法以及继承
<html><head><meta http-equiv"Context-Type:text/html;charsetutf-8"/><title>自定义事件之观察者模式</title><script type"text/javascript" src"common.js"></script></head><body>&…...
蓝桥杯官网练习题（正则问题）
题目描述 考虑一种简单的正则表达式： 只由 x ( ) | 组成的正则表达式。 小明想求出这个正则表达式能接受的最长字符串的长度。 例如 ((xx|xxx)x|(x|xx))xx 能接受的最长字符串是： xxxxxx，长度是 6。 输入描述 一个由 x()| 组成的正则表…...
iOS使用NSURLSession实现后台上传
NSURLSession后台上传的基本逻辑是：首先创建一个后台模式的NSURLSessionConfiguration，然后通过这个configuration创建一个NSURLSession，接着是创建相关的NSURLSessionTask，最后就是处理相关的代理事件。 1、创建NSURLSession -…...
linux之信号
Linux之信号 什么是信号信号的产生方式signalsignactionkill信号集信号屏蔽 什么是信号 信号机制是一种使用信号来进行进程之间传递消息的方法，信号的全称为软中断信号，简称软中断。 信号的本质是软件层次上对中断的一种模拟（软中断ÿ…...
golang工程中间件——redis常用结构及应用（string, hash, list）
Redis 命令中心 【golang工程中间件——redisxxxxx】这些篇文章专门以应用为主，原理性的后续博主复习到的时候再详细阐述 string结构以及应用 字符数组，redis字符串是二进制安全字符串，可以存储图片等二进制数据，同时也可以存…...
Java中数据结构（基本数据类型+引用数据类型）介绍+整理+例子+对比
一、Java数据类型分类 在Java中，数据类型可以分为两大类：内置数据类型（Primitive Data Types）和引用数据类型（Reference Data Types）。 **内置数据类型（Primitive Data Types）**是…...
SpringSecurity原理
Spring Security是Spring框架中的一个安全性框架，用于保护Web应用程序。以下是Spring Security的工作原理： 1.认证 认证是指验证用户身份。Spring Security使用过滤器链来拦截用户的请求。在对请求进行处理之前，它需要对用户进行认证。Spri…...
云表平台突破传统，企业级低代码让软件开发速度提升
随着数字化进程的加速推进，软件开发效率和成本的要求也在日益提高。在这个背景下，低代码技术的出现为企业软件开发提供了新的解决方案。低代码开发平台以其简单易用、高效灵活的特点，已经成为各行各业企业进行应用开发的首选工具。 企业中低代…...
三数之和（双指针）
15. 三数之和 - 力扣（LeetCode） 题目描述 给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ，同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三…...
Linux-bluetooth蓝牙
蓝牙配对和蓝牙连接 蓝牙配对是指在两个蓝牙设备之间建立一种安全的关系，以确保只有已经通过授权的设备才能进行通信。在蓝牙配对过程中，设备之间将共享一个加密密钥，用于保护数据传输的安全性。通常需要在设备上输入一个PIN码或者进行手动确…...
mediasoup webrtc音视频会议搭建
环境ubuntu22.10 nvm --version 0.33.11 node -v v16.20.2 npm -v 8.19.4 node-gyp -v v10.0.1 python3 --version Python 3.10.7 python with pip: sudo apt install python3-pip gcc&g version 12.2.0 (Ubuntu 12.2.0-3ubuntu1) Make 4.2.1 npm install mediasoup3 sudo …...
【操作系统】操作系统的大端模式和小端模式
什么是大端模式、小端模式？ 所谓的大端模式，是指数据的低位保存在内存的高地址中，而数据的高位保存在内存的低地址中； 所谓的小端模式，是指数据的低位保存在内存的低地址中，而数据的高位保存在内存的高地…...
Oracle（13）Maintaining Data Integrity
目录 一、基础知识 1、Data Integrity 数据库的完整性 2、Types of Constraints 约束类型 3、Constraint States 约束状态 4、Guidelines for Constraints 约束准则 二、基础操作 1、Enabling Constraints 启用约束 2、命令方式创建约束 3、修改表创建的约束 4、删除约…...
工程（十二）Ubuntu20.04LSD_SLAM运行
博主创建了一个科研互助群Q：772356582，欢迎大家加入讨论。这是一个科研互助群，主要围绕机器人，无人驾驶，无人机方面的感知定位，决策规划，以及论文发表经验，以方便大家很好很快的科研…...
跨境电商，用指纹浏览器还是VPS？有何区别？
目前做跨境电商的小伙伴基本都是选择vps或者指纹浏览器来防关联。不过随着指纹浏览器的普及，越来越多人选择使用指纹浏览器，还没了解过指纹浏览器的小伙伴可能还在犹豫，vps和指纹浏览器到底哪个更好呢？ Vps就是一个虚拟服务器&…...
R语言piecewiseSEM结构方程模型在生态环境领域实践技术应用
结构方程模型（Sructural Equation Modeling，SEM）可分析系统内变量间的相互关系，并通过图形化方式清晰展示系统中多变量因果关系网，具有强大的数据分析功能和广泛的适用性，是近年来生态、进化、环境、地学、…...
一站式解决方案：体验亚马逊轻量服务器/VPS的顶级服务与灵活性
文章目录 一、什么是轻量级服务器/VPS 二、服务器创建步骤 三、服务器连接客户端(私钥登录) 四、使用服务器搭建博客网站 五、个人浅解及总结 一、什么是轻量级服务器/VPS 亚马逊推出的轻量级服务器/VPS：是一种基于云计算技术的虚拟服务器解决方案。它允许用户…...
pda条码二维码扫描数据采集安卓手持终端扫码热敏标签打印一体机
HT800新一代移动物联终端是深圳联强优创信息科技有限公司自主研发的基于Android11操作系统的高性能、高可靠的工业级手持数据终端，能与其它设备进行无线通讯，提供良好的操作界面，支持条码扫描、RFID读写（NFC）、GPS定位…...
白上这么多年班，才知道数据可视化这么简单
写编程整理数据、做数据可视化分析，不仅难度大、易僵化，还效率低，不能及时响应业务的数据分析需求。那怎么办？换个BI数据可视化工具，套用BI方案，数据分析模型、BI数据可视化分析报表都一应俱全，…...
伊朗黑客对以色列科技和教育领域发起破坏性网络攻击
导语 近期，以色列的高等教育和科技领域遭受了一系列破坏性的网络攻击。这些攻击始于2023年1月，旨在部署以前未记录的数据清除恶意软件。在最近的攻击中，攻击者试图窃取个人身份信息和知识产权等敏感数据。本文将介绍这些攻击的具体细节&#…...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言：多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术，说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号（调制） 把信息从信号中抽取出来&am…...
Neo4j 集群管理：原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...
CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...