原生JS如何实现长函数单次定义、输出校验后多次精简复用

现有实现的冗余核心是：每次DOM操作都重复编写相同的空值校验逻辑，完全可以把校验能力和XPath长调用做合并封装，靠原生语法实现短路中断，彻底删除重复的IIFE代码块。

封装层（长逻辑仅书写一次） #

const $e = p => document.evaluate(p, document, null, 9).singleNodeValue || null;

• 内置假值转null处理：所有非有效返回（包括null、false、未匹配到节点的空值）都会统一转成null，为后续短路校验做准备
• 长调用逻辑仅在这一层写一次，后续复用不需要重复编写document.evaluate的完整参数

调用层（精简单行写法） #

$e('//ul[@class="main-menu"]//li[text()="Home"]')?.style.cssText = 'color:blue;font-weight:900';
$e('//ul[@class="main-menu"]//li[text()="About"]')?.style.cssText = 'color:brown;font-weight:600';

• 长函数复用：不管多少次调用，都只需要传入XPath字符串即可，换其他长调用逻辑只需要替换封装层的实现，完全兼容普通函数场景
• 校验中断逻辑：靠原生可选链完成校验——如果返回值是null，后续的cssText赋值直接短路执行，不会触发报错，和你原有的if(!x) return逻辑完全等价
• 代码长度：去掉重复的IIFE校验块后，单条调用比原有实现短近60%，虽然XPath字符串本身较长，但整体没有冗余代码
• 纯原生实现：仅用到document.evaluate、可选链、cssText三个原生特性，无任何第三方依赖
• 无冗余变量：仅保留1个必要的短函数变量，删掉了原有实现中每次调用都存在的临时参数x，变量数量比现有版本更少

如果需要适配不支持可选链的老旧浏览器，不需要改动封装逻辑，仅需要做极小调整：

// 兼容版封装：未匹配到节点时返回带空setter的兜底对象
const $e = p => {
  const node = document.evaluate(p, document, null,9).singleNodeValue;
  return node || { style: { set cssText(v){} } };
}

调用层代码可以完全保持不变，不需要额外加短路判断，赋值逻辑会自动失效，不会报错。

注：你最初写的基础实现存在语法错误：IIFE入参位置的singleNodeValue;多了一个分号，会直接触发JS解析报错，优化后的版本已经规避了这类问题。

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