js封装系列(一)

js封装系列(一)

适用场景

封装 sdk 场景下,在 sdk 中对公共对象以及方法进行 proxy 操作。

团队 A 有 A-sdk 对一个全局对象进行了改写 proxy 操作。此时,团队 B 开发了 B-sdk 对相同的全局对象的方法也进行了对应的改写。

出现问题

在一个项目中同时使用了 A-sdk 和 B-sdk,该项目研发同学在测试时发现 A 团队提供的 A-sdk 的对应功能失效了。

问题复现

创建原型

创建一个 base 工厂函数并配置对应的原型链方法 x

js 复制代码
// 原型
function base(){};
// 创建原型链方法
base.prototype.x = function(){
    return "base";
}

// 实例化
const baseEg = new base();

第一次劫持

模拟 A-sdk 劫持 x 方法,并添加一些业务逻辑

js 复制代码
const getX = baseEg.x;
baseEg.x = function(){
    return `proxy-${getX()}`;
}
baseEg.x(); // 输出 "proxy-base" 证明劫持成功

第二次劫持

模拟 B-sdk 劫持 x 方法,并添加 B 团队的业务逻辑

方案1
js 复制代码
// func1 实现
const func1GetX = baseEg.x;
baseEg.x = function() {
    return `func1-${func1GetX()}`;
}
baseEg.x();
// 输出 "func1-proxy-base"
方案2:
js 复制代码
// func2 实现
const func2GetX = Object.getPrototypeOf(baseEg).x;
baseEg.x = function() {
    return `func2-${func2GetX()}`;
}
baseEg.x(); // 输出 "func2-base"

综合对比

方案1 方案2
思路 基于当前对象上的某个方法进行封装 基于当前对象原型链上的某个方法进行封装
输出 "func1-proxy-base" "func2-base"
结论 不会破坏其他库对该方法的封装 基于原型链方法进行封装会破坏其他库对

至此问题已浮出水面。

警示

在封装sdk过程中:

  1. 尽量 不修改全局对象(遵循如无必要勿增实体的原则);
  2. 不要覆盖存在于原型链上的方法(上面方案2的做法);
  3. 提醒用户检查其他sdk是不是有类似的操作(上面方案2的做法);
相关推荐
张晓~183399481215 分钟前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
爱喝水的小周8 分钟前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen021110 分钟前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅14 分钟前
介绍electron
前端·javascript·electron
轻语呢喃38 分钟前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人39 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
LRH42 分钟前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
自由逐风43 分钟前
前端小数点精度问题解析
javascript
断竿散人43 分钟前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise
laperter44 分钟前
js中继承关系杂乱?这篇带你理清
javascript