时间戳

首页 > 解决方案 > 删除重复代码 - 基于 if else 构造事件

javascript - 删除重复代码 - 基于 if else 构造事件

问题描述

我有下面的代码按预期工作有什么办法可以减少行数或功能，使其更加模块化。

担心的是我两次调用 exponea 跟踪事件我想知道有什么方法可以构造它一次并根据 if else 条件将参数传递给它。我正在学习 javascript 所以寻找任何代码优化

 window.onload = function () {
        var categorycollection = JSON.parse(document.querySelector('.pipa').getAttribute('data-globaltargeting'));

        var isprofessional = (categorycollection['Type'] == 'PatientPlusArticle') ? 'Yes' : 'No';


        if (categorycollection['Type'] == 'PatientPlusArticle' ||
            categorycollection['Type'] == 'MedicineLeaflet' ||
            categorycollection['Type'] == 'PatientInformationLeaflet') {

            exponea.track('page_visit', {
                "referrer": document.referrer,
                "path": window.location.pathname,
                "category name": document.querySelectorAll('.breadcrumb-item')[1].querySelector('span').innerText,
                "Isprofessional": isprofessional

            });

        }
        else {
            
                exponea.track('page_visit', {
                    "referrer": document.referrer
                    , "path": window.location.pathname
                });
        }
    }

标签： javascript

解决方案

条件运算符可以在需要时分配其他属性 - 否则，使用空对象。将结果合并到对 的调用中.track。您也可以.includes多次使用而不是提取类型。

const { Type } = JSON.parse(document.querySelector('.pipa').getAttribute('data-globaltargeting'));
const additionalObj = ['PatientPlusArticle', 'MedicineLeaflet', 'PatientInformationLeaflet'].includes(Type)
    ? {
        "category name": document.querySelectorAll('.breadcrumb-item')[1].querySelector('span').innerText,
        Isprofessional: Type == 'PatientPlusArticle' ? 'Yes' : 'No'
    } : {};
exponea.track('page_visit', {
    referrer: document.referrer,
    path: window.location.pathname,
    ...additionalObj
});

不过，选择器和子索引有点代码味道——我不知道更广泛的上下文，但那部分可能也值得重构。否则，对 HTML 的简单更改很容易破坏一切。

推荐阅读