如何将getPageTypeFromDataLayer函数存储为变量并引用？

场景1：页面加载后dataLayer不再变动（静态数据） #

如果你的dataLayer在页面初始化完成后就不会再更新，直接把计算结果存成变量导出即可，这样只会计算一次，性能更优：

// 原文件修改为：
export const pageType = (() => {
    const pageTypeObj = window?.dataLayer?.filter(item => item.pageType)[0];
    return pageTypeObj?.pageType || "unknown";
})();

在其他页面直接导入变量使用：

import { pageType } from './path/to/your/module';

// 直接用pageType，不用再调用函数
console.log(pageType);

注意：要确保这段代码执行时window.dataLayer已经存在，如果dataLayer是异步加载的，可能需要把变量初始化逻辑放到DOMContentLoaded或对应异步回调里。

场景2：需要实时获取最新的pageType（每次访问都重新计算） #

如果dataLayer可能动态更新，且你每次用到pageType都需要最新值，可以用ES6的getter属性，看起来是变量，实则每次访问都会重新执行计算逻辑：

// 原文件修改为：
export const get pageType() {
    const pageTypeObj = window?.dataLayer?.filter(item => item.pageType)[0];
    return pageTypeObj?.pageType || "unknown";
}

使用方式和普通变量一样，每次访问pageType都会重新计算：

import { pageType } from './path/to/your/module';

// 每次用pageType都会重新从dataLayer取最新值
console.log(pageType);

场景3：dataLayer频繁动态更新（自动同步最新值） #

如果dataLayer会通过push方法频繁新增数据，你可以重写push方法，自动同步更新pageType变量，不用每次手动计算：

// 原文件修改为：
let pageType = "unknown";

// 初始化计算一次
const updatePageType = () => {
    const pageTypeObj = window?.dataLayer?.filter(item => item.pageType)[0];
    pageType = pageTypeObj?.pageType || "unknown";
};

updatePageType();

// 重写dataLayer的push方法，每次push新数据后自动更新pageType
if (window.dataLayer) {
    const originalPush = window.dataLayer.push;
    window.dataLayer.push = function(...args) {
        originalPush.call(this, ...args);
        updatePageType();
    };
}

export { pageType };

使用时导入变量即可，它会自动保持最新：

import { pageType } from './path/to/your/module';

// pageType会自动同步dataLayer的最新值
console.log(pageType);

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