JS/TS笔记学习2

已于 2024-04-14 21:38:27 修改
阅读量429 收藏 2
点赞数 10
分类专栏： 个人日志 js 文章标签： javascript 笔记 学习
于 2024-04-14 21:27:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mingketao/article/details/137751996
版权

周末总得学点什么吧~
奥利给!
设计模式: 事件订阅派发模式
简单说就是:事件调度中心,负责接收事件发布者的消息，并将这些消息分发给所有订阅了该事件的订阅者

为什么用它，在构建大型、复杂或交互性强的应用程序时，用该模式非常方便，解耦以及提高灵活性方便管理等，下方举例:js 事件分发的使用和扩充

事件分发管理

  • 事件分发基础管理
    最基本的事件分发管理，下方有扩充
class EventDispatcher {
  static events: { [key: string]: any[] } = {};

  // 绑定事件
  static on(eventName: string, callback: Function) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  // 移除事件
  static off(eventName: string, callback: Function) {
    if (this.events[eventName]) {
      const index = this.events[eventName].indexOf(callback);
      if (index !== -1) {
        this.events[eventName].splice(index, 1);
      }
    }
  }

  // 触发事件
  static emit(eventName: string, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach((callback) => {
        callback(...args);
      });
    }
  }
}

// 绑定事件处理函数
EventDispatcher.on("customEvent", (message) => {
  console.log("Received custom event:", message);
});

// 触发事件
EventDispatcher.emit("customEvent", "Hello, World!");

在这里插入图片描述

如果涉及到target this的指向的话，可以通过apply来操作target指向

  • 加入target指向
class EventDispatcher {
    static readonly events: { [key: string]: any[] } = {};

  /**
   * 绑定事件
   * @param {string} eventName 监听事件 
   * @param {function} callback 监听函数
   * @param {object} target 监听目标
   */
  static on(eventName: string, callback: Function,target: any) {
    const objHandler: {} = {callback: callback, target: target};
    let handlerList: Array<any> = this.events[eventName];
    if (!handlerList) {
        handlerList = [];
        this.events[eventName] = handlerList;
    }
    handlerList.push(objHandler);
  }

  // 移除事件
  static off(eventName: string, callback: Function,target: any) {
    const list = this.events[eventName];
    if (list) {
        for (let i = 0; i < list.length; i++) {
            const oldObj = list[i];
            if (oldObj.callback === callback && (!target || target === oldObj.target)) {
                list.splice(i, 1);
                break;
            }
        }
    }
  }

  // 触发事件
  static emit(eventName: string, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach((objHandler) => {
        if (objHandler.callback) {
            objHandler.callback.apply(objHandler.target, args);
        }
      });
    }
  }

  /**
   * 销毁全部事件分发
   */
  static destroyAll():void{
    //销毁方法1
    for (const eventName in this.events) {  
        if (this.events.hasOwnProperty(eventName)) {  
            this.events[eventName].length = 0;  
            delete this.events[eventName];
        }  
    }
    //销毁方法2 这个比较暴力
    // (this.events as any) = {};
  }
}

// 绑定事件处理函数
EventDispatcher.on("customEvent", (message) => {
  console.log("Received custom event:", message);
},this);

// 触发事件
EventDispatcher.emit("customEvent", "Hello, World!");

有没有发现当使用了off移除时间并没有删除
因为用的是钩子函数判断不匹配也就删除不了，下方解决:
在这里插入图片描述
除了上面target this指向还可以扩展更高级的处理如优先级，一次性事件和阻止事件冒泡等功能

  • 添加优先级处理
    多加入一个sort进行排序
class EventDispatcher {
  static readonly events: { [key: string]: any[] } = {};

  /**
   * 绑定事件
   * @param {string} eventName 监听事件
   * @param {function} callback 监听函数
   * @param {object} target 监听目标
   * @param {number} priority 事件处理优先级
   */
  static on(
    eventName: string,
    callback: Function,
    target: any,
    priority: number = 0
  ) {
    const objHandler: {} = { callback, target, priority };
    let handlerList: Array<any> = this.events[eventName];
    if (!handlerList) {
      handlerList = [];
      this.events[eventName] = handlerList;
    }
    handlerList.push(objHandler);
    handlerList.sort((a, b) => b.priority - a.priority); // 按优先级降序排序
  }

  // 移除事件
  static off(eventName: string, callback: Function, target: any) {
    const list = this.events[eventName];
    if (list) {
      for (let i = 0; i < list.length; i++) {
        const oldObj = list[i];
        if (
          oldObj.callback === callback &&
          (!target || target === oldObj.target)
        ) {
          list.splice(i, 1);
          break;
        }
      }
    }
  }

  // 触发事件
  static emit(eventName: string, ...args) {
    if (this.events[eventName]) {
      this.events[eventName].forEach((objHandler) => {
        if (objHandler.callback) {
          objHandler.callback.apply(objHandler.target, args);
        }
      });
    }
  }

  /**
   * 销毁全部事件分发
   */
  static destroyAll(): void {
    //销毁方法1
    for (const eventName in this.events) {
      if (this.events.hasOwnProperty(eventName)) {
        this.events[eventName].length = 0;
        delete this.events[eventName];
      }
    }
    //销毁方法2 这个比较暴力
    // (this.events as any) = {};
  }
}
function customEventHandle1(message) {
  console.log("这个优先级设置是0，所以优先级靠后:", message);
}
function customEventHandle2(message) {
  console.log("这个优先级设置是1，所以优先级靠前:", message);
}
// 绑定事件处理函数
EventDispatcher.on("customEvent", customEventHandle1, this, 0);
EventDispatcher.on("customEvent", customEventHandle2, this, 1);

// 触发事件
EventDispatcher.emit("customEvent", "Hello, World!");

在这里插入图片描述

  • 添加一次性事件
    处理原理就是在on绑定事件中添加参数once,在emit触发事件并移除一次性事件处理函数
class EventDispatcher {
  static readonly events: { [key: string]: any[] } = {};

  /**
   * 绑定事件
   * @param {string} eventName 监听事件
   * @param {function} callback 监听函数
   * @param {object} target 监听目标
   * @param {number} priority 事件处理优先级
   * @param {boolean} once 一次性事件
   */
  static on(
    eventName: string,
    callback: Function,
    target: any,
    priority: number = 0,
    once: boolean = false
  ) {
    const objHandler: {} = { callback, target, priority, once };
    let handlerList: Array<any> = this.events[eventName];
    if (!handlerList) {
      handlerList = [];
      this.events[eventName] = handlerList;
    }
    handlerList.push(objHandler);
    handlerList.sort((a, b) => b.priority - a.priority); // 按优先级降序排序
  }

  // 移除事件
  static off(eventName: string, callback: Function, target: any) {
    const list = this.events[eventName];
    if (list) {
      for (let i = 0; i < list.length; i++) {
        const oldObj = list[i];
        if (
          oldObj.callback === callback &&
          (!target || target === oldObj.target)
        ) {
          list.splice(i, 1);
          break;
        }
      }
    }
  }

  // 触发事件
  static emit(eventName: string, ...args) {
    if (this.events[eventName]) {
      // 触发事件并移除一次性事件处理函数
      this.events[eventName] = this.events[eventName].filter((item) => {
        item.callback(...args);
        return !item.once;
      });
    }
  }

  /**
   * 销毁全部事件分发
   */
  static destroyAll(): void {
    //销毁方法1
    for (const eventName in this.events) {
      if (this.events.hasOwnProperty(eventName)) {
        this.events[eventName].length = 0;
        delete this.events[eventName];
      }
    }
    //销毁方法2 这个比较暴力
    // (this.events as any) = {};
  }
}
function customEventHandle1(message) {
  console.log("这个优先级设置是0，所以优先级靠后:", message);
}
function customEventHandle2(message) {
  console.log("这个优先级设置是1，所以优先级靠前:", message);
}
// 绑定事件处理函数
EventDispatcher.on("customEvent", customEventHandle1, this, 0, true);
EventDispatcher.on("customEvent", customEventHandle2, this, 1, false);

// 触发事件
EventDispatcher.emit("customEvent", "Hello, World!");
// 再次触发事件，一次性事件处理函数将不会被调用 customEventHandle1
EventDispatcher.emit("customEvent", "Hello again!");

在这里插入图片描述

  • 添加阻止事件冒泡
class EventDispatcher {
  static readonly events: { [key: string]: any[] } = {};

  /**
   * 绑定事件
   * @param {string} eventName 监听事件
   * @param {function} callback 监听函数
   * @param {object} target 监听目标
   * @param {number} priority 事件处理优先级
   * @param {boolean} once 一次性事件
   * @param {boolean} stopped 阻止事件冒泡
   */
  static on(
    eventName: string,
    callback: Function,
    target: any,
    priority: number = 0,
    once: boolean = false,
    stopped: boolean = false
  ) {
    const objHandler: {} = { callback, target, priority, once, stopped };
    let handlerList: Array<any> = this.events[eventName];
    if (!handlerList) {
      handlerList = [];
      this.events[eventName] = handlerList;
    }
    handlerList.push(objHandler);
    handlerList.sort((a, b) => b.priority - a.priority); // 按优先级降序排序
  }

  // 移除事件
  static off(eventName: string, callback: Function, target: any) {
    const list = this.events[eventName];
    if (list) {
      for (let i = 0; i < list.length; i++) {
        const oldObj = list[i];
        if (
          oldObj.callback === callback &&
          (!target || target === oldObj.target)
        ) {
          list.splice(i, 1);
          break;
        }
      }
    }
  }

  // 触发事件
  static emit(eventName: string, ...args) {
    if (this.events[eventName]) {
      let stopFlag: boolean = false;
      // 触发事件并移除一次性事件处理函数
      this.events[eventName] = this.events[eventName].filter((item) => {
        if (stopFlag) {
          return true;
        }
        item.callback(...args);
        if (item.stopped) {
          stopFlag = true;
        }
        return !item.once;
      });
    }
  }

  /**
   * 销毁全部事件分发
   */
  static destroyAll(): void {
    //销毁方法1
    for (const eventName in this.events) {
      if (this.events.hasOwnProperty(eventName)) {
        this.events[eventName].length = 0;
        delete this.events[eventName];
      }
    }
    //销毁方法2 这个比较暴力
    // (this.events as any) = {};
  }
}
function buttonEventHandle1(message) {
  console.log("这个优先级设置是0，所以优先级靠后:", message);
}
function buttonEventHandle2(message) {
  console.log("这个优先级设置是1，所以优先级靠前:", message);
}
// 绑定事件处理函数
EventDispatcher.on("buttonEvent", buttonEventHandle1, this, 0, false, false); // stopped false不阻止
EventDispatcher.on("buttonEvent", buttonEventHandle2, this, 1, false, true); // stopped true阻止事件冒泡  因为这里设置了所以后面的buttonEventHandle1方法将不会调用
const testArgs = { message: "Hello, World!" };
// 触发事件
EventDispatcher.emit("buttonEvent", testArgs);

在这里插入图片描述

dupha
关注
  • 10
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS和TS的总结
m0_62627645的博客
07-09 1301
JavaScript 通过以下方式来输出数据：JS直接写入HTML输出： 注意：HTML 输出时使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。使用关键字 var 来定义变量， 使用等号来为变量赋值。 变量是一个名称。字面量是一个值。JavaScript 有多种数据类型：数字，字符串，数组，对象等等。值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（U
JS&TS 学习笔记
qq_42817985的博客
06-30 317
JS TS学习笔记
JS分发事件
清浅
10-14 389
javaScript事件分发
JS 两种事件处理模型：事件冒泡和事件捕获
qq_45560350的博客
08-27 471
JS 两种事件处理模型：事件冒泡和事件捕获
TS和JS的区别（通俗理解版）
最新发布
Mi_Ni_BoX的博客
05-25 284
TS和JS的区别（通俗理解版）
TS和JS的差异；ts与js的不同；ts对比js的优势
weixin_43286206的博客
07-06 4085
TS（TypeScript）是JavaScript的超集，它提供了静态类型检查、类和接口等面向对象编程特性，并且编译成JavaScript运行在浏览器或者Node.js环境中。兼容性：TS可以编译成ES5、ES6、ES7等不同版本的JavaScript，可以兼容各种浏览器和Node.js。更好的代码维护性：TS支持模块化、命名空间、接口等特性，使得代码更加可读、可维护、可扩展。面向对象编程：TS支持类、继承、抽象类、接口等面向对象编程特性，让代码更加灵活和易于扩展。
ts和js的区别
daxi玫瑰的博客
07-14 4万+
ts和js的区别
TypeScript 学习笔记之基本类型
01-19
2、number 代表 JavaScript 中的数字。在 JavaScript 中，无论是“整数”还是“浮点数”，都是以双精度浮点类型存储的。 代码如下: var height: number = 6; 3、string 代表字符串。跟 JavaScript 一样，可以...
typeScript学习笔记
04-27
TypeScript学习笔记 TypeScript是一个自由和开源的编程语言，由微软开发。它是JavaScript的一个超集，扩展了JavaScript的语法，解决了JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化。TypeScript支持...
Bootstrap教程JS插件滚动监听学习笔记分享
11-26
本文主要来学习一下JavaScript插件–滚动监听。 1、案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。你可以试试滚动这个页面，看看左侧导航的变化。 先把实现的代码上了，你可以通过测试代码先来看...
VUE3+TS笔记与项目
03-18
Vue3 + TypeScript 是一款强大的前端开发组合，Vue3 是 Vue.js 框架的最新版本，带来了许多性能优化和功能增强，而 TypeScript 是一种静态类型的语言，为 JavaScript 提供了更严格的类型检查和更好的开发体验。...
EventDispatcher,js事件派发器,javascript事件派发器
12-28
JavaScript事件派发器，对单页交互应用中组件通信十分有用。个人原创，发现bug可向我github中提issue~
onfirejs是一个很简单的事件分发的Javascript库简洁实用
08-10
onfire.js 是一个很简单的事件分发的Javascript库，简洁实用。
ts入门笔记，助你快速上手
08-31
TypeScript 是一种强大的静态类型编程语言，它是JavaScript的超集，旨在解决JavaScript在大型项目中的类型安全和可维护性问题。本入门笔记将带你逐步了解...本入门笔记将帮助你快速踏上TypeScript的学习之路。
js 实现事件分发系统,要求包含三个最基本功能 on (监听事件), off (移出事件), emit (触发事件)
Gochan_Tao的博客
05-15 1959
封装 EventEmitter class EventEmitter { constructor() { this._events = {}; } on(event,callback) { //监听event事件,触发时调用callback函数 let callbacks = this._events[event] || []...
js事件分发
海涛高软
02-09 554
function EventDispatcher() {} Object.assign( EventDispatcher.prototype, { addEventListener: function ( type, listener ) { if ( this._listeners === undefined ) this._listeners = {}; var listeners = this._listeners; if ( listeners[ type ] =.
JavaScript第二个分水岭——对象，2024年最新前端事件分发机制及设计思路
m0_60607895的博客
04-10 443
对字符串进行操作时，处理结果是通过方法的返回值直接返回的，并不会改变String对象本身保存的字符串内容。在这些方法的参数中，位置是一个索引值，从0开始计算，第一个字符的索引值是0，最后一个字符的索引值是字符串的长度减1。Math对象用于对数值进行数学运算，与其他对象不同的是，该对象不是一个构造函数，不需要实例化就能使用。是Number的静态成员，直接通过构造函数Number进行访问，而非Number的实例。这是因为这些对象实际上是构造函数String的实例，即String对象。构造当月1号的日期型对象。
TS和JS的一些区别
热门推荐
qq_44193048的博客
06-21 5万+
typescript 特点 ts是js的超集，即你可以在ts中使用原生js语法。 ts需要静态编译，它提供了强类型与更多面向对象的内容。 ts最终仍要编译为弱类型的js文件，基于对象的原生的js，再运行。故ts相较java/C#这样天生面向对象语言是有区别和局限的 ts是由微软牵头主导的，主要来自C# TypeScript和JavaScript的对比： TypeScript是一个应用程序级的JavaScript开发语言。（这也表示TypeScript比较牛逼，可以开发大型应用，或者说更适合开发大型应用）
JS和TS的区别
chengxuyuan3629的博客
10-16 1万+
Ts与Js基础区别
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值