如何减少语言切换菜单URL拼接jQuery函数中的重复代码

问题描述 #

我正在搭建一个无需服务端支持的多语言下拉切换功能，用于集成了Twig的WordPress站点，因此无法使用WordPress原生提供的获取首页、路径URL等便捷能力，受这些限制，jQuery是目前最可行的实现方案。

目前我已实现的代码可以更新下拉菜单中的href属性，用于在4个站点间切换：英语（默认，博客ID:1）、德语、法语、西班牙语。以下脚本运行正常，但我希望尽可能减少重复代码。之前尝试将.indexOf检测项放入数组时会导致URL中的两位国家代码重复，这也是当前代码冗余度很高的原因。

理想情况下我希望用一条if语句检测/de、/fr、/es这三个逻辑几乎完全一致的分支，提前感谢各位提供的指导建议。

原实现代码

var langDropPathname = window.location.pathname.slice(3); // 非默认站点切掉路径前3位的两位国家代码+斜杠
var langDropPathEN = window.location.pathname; // 默认站点用完整路径
var langDropDE = "/de";
var langDropFR = "/fr";
var langDropES = "/es";

if (window.location.href.indexOf("/de/") > -1) {
  $(".langDropEN").attr('href', langDropPathname);
  $(".langDropDE").attr('href', langDropDE+langDropPathname);
  $(".langDropFR").attr('href', langDropFR+langDropPathname);
  $(".langDropES").attr('href', langDropES+langDropPathname);

  if ($("body").hasClass("error404")) {
    document.location.href=langDropDE;
  }

} else if (window.location.href.indexOf("/fr/") > -1) {
  $(".langDropEN").attr('href', langDropPathname);
  $(".langDropDE").attr('href', langDropDE+langDropPathname);
  $(".langDropFR").attr('href', langDropFR+langDropPathname);
  $(".langDropES").attr('href', langDropES+langDropPathname);

  if ($("body").hasClass("error404")) {
    document.location.href=langDropFR;
  }

} else if (window.location.href.indexOf("/es/") > -1) {
  $(".langDropEN").attr('href', langDropPathname);
  $(".langDropDE").attr('href', langDropDE+langDropPathname);
  $(".langDropFR").attr('href', langDropFR+langDropPathname);
  $(".langDropES").attr('href', langDropES+langDropPathname);

  if ($("body").hasClass("error404")) {
    document.location.href=langDropES;
  }

} else {
  $(".langDropEN").attr('href', langDropPathEN);
  $(".langDropDE").attr('href', langDropDE+langDropPathEN);
  $(".langDropFR").attr('href', langDropFR+langDropPathEN);
  $(".langDropES").attr('href', langDropES+langDropPathEN);
}

优化方案 #

你可以把所有非默认语言放到数组中统一管理，仅用一次判断就能处理所有分支逻辑，同时完全消除重复代码，优化后实现如下：

// 非默认语言列表，后续新增语言只需往此处添加代码即可
const supportedLangs = ['de', 'fr', 'es'];
const currentHref = window.location.href;
const currentPath = window.location.pathname;
// 匹配当前站点对应的语言代码
const currentLang = supportedLangs.find(lang => currentHref.includes(`/${lang}/`));

let basePath;
let errorRedirectPrefix = '';

if (currentLang) {
  // 非默认站点，切掉路径前3位的/xx/前缀得到通用路径
  basePath = currentPath.slice(3);
  errorRedirectPrefix = `/${currentLang}`;
} else {
  // 默认英文站点直接用完整路径
  basePath = currentPath;
}

// 批量设置所有切换按钮的href属性
$(".langDropEN").attr('href', basePath);
supportedLangs.forEach(lang => {
  $(`.langDrop${lang.toUpperCase()}`).attr('href', `/${lang}${basePath}`);
});

// 404页面跳转逻辑统一处理
if ($("body").hasClass("error404") && errorRedirectPrefix) {
  document.location.href = errorRedirectPrefix;
}

说明 #

1. 之前你把检测项放数组出现国家代码重复的问题，核心是没有提前统一处理好通用基础路径，现在的实现先区分当前站点类型（默认/非默认），统一生成基础路径后再批量拼接，不会出现重复拼接前缀的问题。
2. 后续如果要新增其他语言，只需要往supportedLangs数组里加对应的两位语言代码即可，不需要修改任何逻辑代码。

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