JavaScript回调初始化及跨调用数据存储最优实现方案咨询

现有实现的潜在缺陷 #

• 全局状态冲突风险：所有累计数据都挂载在onFetchCallback这个全局函数对象上，项目中如果有多个地方需要同时使用这套逻辑，不同请求的状态会互相覆盖，完全无法支持多实例复用。
• 初始化流程易出错：必须手动依次调用onFetchCallback()、onFetchCallback.init()两个步骤才能正常使用，只要漏写一步就会触发异常，不符合最小操作的设计原则。
• 可维护性一般：把内部方法挂载到函数对象上的写法比较小众，协作开发时其他开发者需要额外理解你的设计思路，提升了代码的理解成本。

更符合JavaScript风格的实现方案 #

推荐使用工厂函数的写法，轻量且符合JS的函数式设计习惯，同时天然通过闭包实现状态封装：

// 工厂函数，每次调用生成完全独立的回调处理实例
function createFetchHandler() {
    // 所有状态都存在闭包内部，外部无法直接访问，不会污染全局
    const accumData = [];
    const timeLine = [];
    const tempValues1 = [];
    const tempValues2 = [];
    let char;

    function store(data) {
        const hasNulls = data.includes(null);
        if (!hasNulls) {
            // 直接操作闭包里的数组即可，不需要挂载到外部对象
            // accumData.push(xxx)
        } else {
            // 剩余非空值处理逻辑
        }
    }

    // 只暴露需要对外提供的方法，内部状态默认私有
    return {
        store,
        // 如果需要外部读取累计数据，返回副本避免内部状态被意外修改
        getAccumData: () => [...accumData]
    }
}

使用方式非常简洁：

// 初始化一步完成，自动生成所有需要的数组
const fetchHandler = createFetchHandler();
// 直接传入store方法作为回调即可
myWhateverFunc(fetchHandler.store);

如果需要同时处理多组请求，直接创建新的实例即可，不同实例的状态完全隔离：

const anotherHandler = createFetchHandler();
myOtherAjaxFunc(anotherHandler.store);

如果你更习惯面向对象的写法，也可以用Class版本实现：

class FetchHandler {
    constructor() {
        // 初始化逻辑直接放在构造函数中，不需要额外调用init
        this.accumData = [];
        this.timeLine = [];
        this.tempValues1 = [];
        this.tempValues2 = [];
        this.char = undefined;
    }

    // 写成箭头函数可以避免后续传参时绑定this
    store = (data) => {
        const hasNulls = data.includes(null);
        if (!hasNulls) {
            // this.accumData.push(xxx)
        } else {
            // 处理逻辑
        }
    }

    getAccumData() {
        return [...this.accumData];
    }
}

Class版本的使用方式：

const handler = new FetchHandler();
myWhateverFunc(handler.store);

方案优势 #

1. 状态完全封装，没有全局污染，天然支持多实例并行使用
2. 初始化逻辑内置，不需要手动调用多次方法，大幅降低出错概率
3. 都是JS社区通用的标准写法，其他开发者可以快速理解，可维护性更高
4. 内部状态默认私有，只有暴露的方法可以修改，避免外部意外篡改数据

内容的提问来源于stack exchange，提问作者rustyBucketBay