mraid页面事件监听避免这样写
2023-02-25 18:17:07 时间
在工作中,用到了 mraid.js 库,其中封装了事件监听逻辑,代码如下:
var EventListeners = function (event) {
this.event = event;
this.count = 0;
var listeners = {};
this.add = function (func) {
var id = String(func);
if (!listeners[id]) {
listeners[id] = func;
this.count++
}
};
this.remove = function (func) {
var id = String(func);
if (listeners[id]) {
listeners[id] = null;
delete listeners[id];
this.count--;
return true
} else {
return false
}
};
this.removeAll = function () {
for (var id in listeners) {
if (listeners.hasOwnProperty(id)) {
this.remove(listeners[id])
}
}
};
this.broadcast = function (args) {
for (var id in listeners) {
if (listeners.hasOwnProperty(id)) {
listeners[id].apply(mraid, args)
}
}
};
this.toString = function () {
var out = [event, ":"];
for (var id in listeners) {
if (listeners.hasOwnProperty(id)) {
out.push("|", id, "|")
}
}
return out.join("")
}
};
其中事件监听回调增加逻辑,是根据回调函数转为 String 之后来存储和判断的,当我们这样写
// mraid 监听页面是否展示
function onSdkReady(fn) {
if (mraid.isViewable()) {
fn && fn();
} else {
mraid.addEventListener('viewableChange', function videoViewableChange(viewable) {
if (viewable) {
mraid.removeEventListener('viewableChange', videoViewableChange);
fn && fn();
}
});
}
}
// mraid show 判断,执行对应方法
function mraidShow(fn) {
"use strict";
if (typeof mraid !== 'undefined') {
if (mraid.getState() === 'loading') {
mraid.addEventListener('ready', function(){
fn && onSdkReady(fn);
});
} else {
fn && onSdkReady(fn);
}
} else {
fn && fn();
}
}
原本我们想要封装下 mraid viewableChange 事件监听的逻辑,执行不同的回调函数,但是实际我们使用了同一个回调函数,通过在同一份回调函数中传参不同的方法来实现,结果只能第一次事件监听生效,后续监听的方法无法生效。
开发中类似逻辑要格外注意,修改后如下:
function onSdkReady(fn) {
if (mraid.isViewable()) {
fn && fn();
} else {
typeof fn === 'function' && mraid.addEventListener('viewableChange', fn);
}
}
这样需要在实际传入回调函数的时候 接受 viewable 参数,来做判断。
相关文章
- 时隔半年,Linux 性能超越 Windows 11 !
- Linux 下的 Docker 入门教程
- 如何在 Ubuntu/Linux 和 Windows 之间共享文件夹
- 初级:如何在 Arch Linux 中安装 Yay AUR 助手
- 如何使用 FreeDOS Edit
- OpenHarmony - ArkUI(TS)开发翻页时钟
- ThreadLocal的使用及实现原理
- 上千万行,十多G源码,浏览器为什么这么“变态”?
- 如何优雅的给 cp 和 mv 命令添加一个高颜值的进度条
- 如何使用 Tcpdump 在 Linux 中捕获网络流量
- Linux不重启识别新挂载磁盘
- 使用Systemd,把服务装进 Linux 心脏里
- 面试突击:什么是守护线程?它和用户线程有什么区别?
- 基于OpenHarmony的阿里云IoT服务实现
- OAuth2.0密码模式废了,停止使用吧!
- 让我们一起聊聊单元测试的恩怨
- 基于鸿蒙的恶性皮肤肿瘤检测系统
- OpenHarmony 源码解析之NAPI框架内部实现分析
- 万字长文,带你搞懂 Kubernetes 网络模型
- 如何默认启动到 Linux 系统的旧内核