如何合并两个同类型JavaScript脚本避免运行冲突

冲突原因 #

你在全局作用域用const重复声明了同名函数modifyElHTML，JS语法中同一作用域下const定义的变量/函数不允许重复赋值/声明，因此后加载的函数定义会直接报错，只有先加载的函数可以正常运行。

解决方案（按推荐度排序） #

方案1：重构复用公共逻辑（最优）

两个函数90%逻辑完全一致，仅最后输出的HTML格式有差异，把差异化部分抽为参数即可，全局仅需保留一个函数定义：

// 公共函数只定义一次
const modifyElHTML = (elID, phrases, template = (phrase) => phrase) => {
  const el = document.getElementById(elID);
  let phrase;
  if (italian) {phrase = phrases.italian; }
  else if (french) {phrase = phrases.french; }
  else if (german) {phrase = phrases.german; }
  else {phrase = phrases.english; }
  // 调用传入的模板生成最终内容
  el.innerHTML = template(phrase);  
};

// 第一个场景调用：默认直接输出纯文本
modifyElHTML('comentario', {
  italian: 'Scrivi un commento...', 
  french: 'Ajouter un commentaire...', 
  german: 'Kommentieren ...', 
  english: 'Write an answer...',
});

// 第二个场景调用：传入自定义按钮模板
modifyElHTML('showmorecomments', {
  italian: 'Carica altri 10 commenti', 
  french: 'Chargez 10 autres avis', 
  german: '10 weitere Kommentare laden', 
  english: 'Load 10 more comments',
}, (phrase) => `<button class="_1gl3 _4jy0 _4jy3 _517h _51sy _42ft" type="submit" value="1"><span>${phrase}</span></button><a href="#" onclick="exit_alert()"></a>`);

优势：没有冗余代码，后续要修改多语言判断逻辑只需要改一处即可。

方案2：重命名函数（快速修复）

如果不想调整原有逻辑，直接给两个函数起不同的名字避免命名冲突即可：

// 第一个脚本函数改名
const modifyElPlainText = (elID, phrases) => {
  const el = document.getElementById(elID);
  let phrase;
  if (italian) {phrase = phrases.italian; }
  else if (french) {phrase = phrases.french; }
  else if (german) {phrase = phrases.german; }
  else {phrase = phrases.english; }
  el.innerHTML = `${phrase}`;  
};
modifyElPlainText('comentario', {italian: 'Scrivi un commento...', french: 'Ajouter un commentaire...', german: 'Kommentieren ...', english: 'Write an answer...',});

// 第二个脚本函数改名
const modifyElWithButton = (elID, phrases) => {
  const el = document.getElementById(elID);
  let phrase;
  if (italian) {phrase = phrases.italian; }
  else if (french) {phrase = phrases.french; }
  else if (german) {phrase = phrases.german; }
  else {phrase = phrases.english; }
  el.innerHTML = `<button class="_1gl3 _4jy0 _4jy3 _517h _51sy _42ft" type="submit" value="1"><span>${phrase}</span></button><a href="#" onclick="exit_alert()"></a>`;  
};
modifyElWithButton('showmorecomments', {
italian: 'Carica altri 10 commenti', french: 'Chargez 10 autres avis', german: '10 weitere Kommentare laden', english: 'Load 10 more comments',});

方案3：块级作用域隔离

如果两个脚本无法合并加载，可以给每个脚本套一层立即执行函数，把函数限定在局部作用域，不会污染全局命名空间：

// 第一个脚本
<script>
(() => {
  const modifyElHTML = (elID, phrases) => {
    const el = document.getElementById(elID);
    let phrase;
    if (italian) {phrase = phrases.italian; }
    else if (french) {phrase = phrases.french; }
    else if (german) {phrase = phrases.german; }
    else {phrase = phrases.english; }
    el.innerHTML = `${phrase}`;  
  };
  modifyElHTML('comentario', {italian: 'Scrivi un commento...', french: 'Ajouter un commentaire...', german: 'Kommentieren ...', english: 'Write an answer...',});
})();
</script>

// 第二个脚本
<script>
(() => {
  const modifyElHTML = (elID, phrases) => {
    const el = document.getElementById(elID);
    let phrase;
    if (italian) {phrase = phrases.italian; }
    else if (french) {phrase = phrases.french; }
    else if (german) {phrase = phrases.german; }
    else {phrase = phrases.english; }
    el.innerHTML = `<button class="_1gl3 _4jy0 _4jy3 _517h _51sy _42ft" type="submit" value="1"><span>${phrase}</span></button><a href="#" onclick="exit_alert()"></a>`;  
  };
  modifyElHTML('showmorecomments', {
  italian: 'Carica altri 10 commenti', french: 'Chargez 10 autres avis', german: '10 weitere Kommentare laden', english: 'Load 10 more comments',});
})();
</script>

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