如何解决Neocities站点中两个导航脚本的冲突问题

问题背景 #

在Neocities托管的网站中，为全站导航和书籍章节导航分别编写了site-access.js和chapter-access.js两个独立脚本，但第二个脚本的同名变量myStringDict和函数testMultipleStrings覆盖了第一个脚本的内容，导致全站导航指令（如"home"）无法触发跳转，仅章节导航指令生效。

问题原因 #

浏览器的全局作用域中，后续加载的同名变量或函数会直接覆盖之前的定义。由于chapter-access.js在site-access.js之后加载，它的myStringDict和testMultipleStrings会完全替换第一个脚本中的同名内容，导致全站导航的规则被丢弃，自然无法响应全站指令。

修复方案 #

方案1：拆分字典+统一检查函数 #

将两个导航的字典分别命名，用一个函数依次检查全站和章节的导航规则，避免覆盖。

修改后的site-access.js（全站导航）

// 全站导航字典，使用独立命名避免冲突
var siteNavDict = {
    "home": "/index.html",
    "exampleone": "example.com",
    "othertext": "othersitehere"
};

修改后的chapter-access.js（章节导航）

// 章节导航字典，使用独立命名避免冲突
var chapterNavDict = {
    "exampletwo": "example.org",
    "othertexttwo": "othersitehere"
};

// 统一处理输入的函数，先检查全站再检查章节
function testMultipleStrings() {
    let textBox = document.getElementById("textBox");
    const inputValue = textBox.value.toLowerCase();

    // 优先匹配全站导航，匹配成功则跳转并终止函数
    if (inputValue in siteNavDict) {
        window.location.replace(siteNavDict[inputValue]);
        return;
    }
    // 全站无匹配时，检查章节导航
    if (inputValue in chapterNavDict) {
        window.location.replace(chapterNavDict[inputValue]);
    }
}

HTML无需修改

保持原有的脚本加载顺序即可：

<script src="site-access.js"></script>
<script src="chapter-access.js"></script>

方案2：命名空间封装（更规范，避免全局污染） #

将每个脚本的内容封装到独立的命名空间对象中，彻底隔离全局作用域的变量冲突。

修改后的site-access.js

// 全站导航命名空间，封装字典和检查方法
const SiteNavigation = {
    dict: {
        "home": "/index.html",
        "exampleone": "example.com",
        "othertext": "othersitehere"
    },
    checkMatch: function(inputValue) {
        if (inputValue in this.dict) {
            window.location.replace(this.dict[inputValue]);
            return true; // 返回匹配状态
        }
        return false;
    }
};

修改后的chapter-access.js

// 章节导航命名空间，封装字典和检查方法
const ChapterNavigation = {
    dict: {
        "exampletwo": "example.org",
        "othertexttwo": "othersitehere"
    },
    checkMatch: function(inputValue) {
        if (inputValue in this.dict) {
            window.location.replace(this.dict[inputValue]);
            return true;
        }
        return false;
    }
};

// 统一的输入处理函数
function testMultipleStrings() {
    let textBox = document.getElementById("textBox");
    const inputValue = textBox.value.toLowerCase();

    // 先检查全站导航，未匹配则检查章节导航
    if (!SiteNavigation.checkMatch(inputValue)) {
        ChapterNavigation.checkMatch(inputValue);
    }
}

注意事项 #

• 如果全站和章节导航存在相同的指令关键词，需明确优先级（示例中均设置为全站优先）；
• 尽量避免在全局作用域定义重复名称的变量或函数，使用命名空间或模块化写法可大幅降低冲突概率。

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