理解动态脚本加载的挑战
在web开发中，我们有时需要根据特定条件（例如当前年份、用户权限或a/b测试组）来执行不同的javascript代码。一种直观但往往无效的方法是尝试动态修改已存在html文档中的<script>标签的src属性。尽管修改dom属性会反映在页面检查器中，但浏览器通常不会重新解析并执行一个已经加载过的<script>标签，即使其src属性被改变。这是因为浏览器在页面初始化加载时已经完成了脚本的解析和执行，后续的src修改并不会触发新的加载和执行周期。
考虑以下初始尝试的代码结构：
HTML 结构:
<script id="element1" src="#"></script> <script src="js/element-by-year.js"></script>
JavaScript (初始尝试):
var yearly = document.getElementById("element1");
var refreshStatus = () => {
const today = new Date();
let year = today.getFullYear();
if (year == 2022) {
yearly.src ="js/change1.js"; // 尝试修改src
}
if (year == 2023) {
yearly.src ="js/change2.js"; // 尝试修改src
}
}
// 首次运行
refreshStatus();
// 每天更新一次
setInterval(refreshStatus, 86400000); // 86400000 毫秒 = 1 天上述代码的意图是，当年份为2022时，id="element1"的脚本应加载js/change1.js；当年份为2023时，加载js/change2.js。然而，正如前面所解释的，这种方法不会按预期工作。尽管您可能在浏览器开发者工具中看到src属性确实发生了变化，但相关的JavaScript文件并不会被重新加载或执行。
立即学习“Java免费学习笔记（深入）”；
解决方案：基于条件判断的函数调用
要实现根据年份动态执行不同代码逻辑的需求，最可靠和推荐的方法是预先加载所有可能的代码逻辑（或将其定义在同一个文件中），然后根据条件判断来调用相应的函数。这种方法确保了所有代码都在页面加载时被解析，而我们只是在运行时控制哪个代码块被执行。
以下是实现此功能的优化方案：
HTML 结构: HTML部分保持简洁，不再需要一个空的src的脚本标签来占位，所有逻辑将通过主JavaScript文件来管理。
<!-- 如果需要，可以在页面中包含一个主脚本文件 --> <script src="js/main-logic.js"></script>
JavaScript (推荐方案): 将所有年份相关的逻辑封装成独立的函数，并在主逻辑中根据当前年份调用它们。
// 定义不同年份对应的功能函数
function element1 () {
// 2022年的特定逻辑
console.log("执行2022年的逻辑！");
alert("It's 2022!");
}
function element2 () {
// 2023年的特定逻辑
console.log("执行2023年的逻辑！");
alert("It's 2023!");
}
/**
* 根据当前年份刷新状态并执行相应逻辑
*/
var refreshStatus = () => {
const today = new Date();
let year = today.getFullYear();
if (year === 2022) {
element1(); // 调用2022年的函数
} else if (year === 2023) {
element2(); // 调用2023年的函数
} else {
// 可选：处理其他年份或默认情况
console.log(`当前年份是 ${year}，没有特定逻辑需要执行。`);
}
}
// 页面加载时立即运行一次，以设置初始状态
refreshStatus();
// 设置定时器，每天更新一次（86400000毫秒 = 24小时）
// 注意：在实际应用中，如果逻辑不依赖于秒级或分钟级变化，
// 每天运行一次通常足够，避免不必要的资源消耗。
setInterval(refreshStatus, 86400000);方案详解与注意事项
- 函数封装： 将不同年份的代码逻辑封装到各自的函数（如element1()和element2()）中。这样做提高了代码的可读性、模块化和可维护性。
- 条件判断： refreshStatus函数负责获取当前年份，并使用if...else if结构来判断应该调用哪个功能函数。使用===进行严格相等比较是良好的实践。
-
即时执行与定时更新：
- refreshStatus();：在脚本加载后立即执行一次，确保页面在加载时就应用了正确的逻辑。
- setInterval(refreshStatus, 86400000);：设置一个定时器，每天（86400000毫秒）再次调用refreshStatus函数。这对于跨年等需要更新逻辑的场景非常有用。
- 代码可维护性： 随着年份的增加，只需在refreshStatus函数中添加新的else if分支和对应的功能函数即可。
- 性能考量： 这种方法避免了动态加载文件带来的网络请求开销和潜在的异步加载问题。所有必要的代码都在初始加载时就可用，只是执行路径不同。
-
替代方案（高级）：
- 动态创建脚本元素： 如果确实需要动态加载全新的JS文件，可以通过document.createElement('script')创建新的<script>元素，设置其src，然后将其添加到DOM中（例如document.head.appendChild(scriptElement)）。这种方法会触发新的网络请求和脚本执行。但需要注意管理脚本的加载状态和避免重复加载。
- 模块化加载器： 对于更复杂的应用，可以使用RequireJS、Webpack等模块化加载器来按需加载JS模块。
总结
当需要在JavaScript中根据运行时条件（如年份）动态执行不同的代码逻辑时，直接修改现有<script>标签的src属性通常是无效的。最佳实践是将所有可能的逻辑封装成独立的函数，并在主控制逻辑中通过条件判断来调用这些函数。这种方法既保证了代码的正确执行，又提升了可维护性和性能，是实现此类动态行为的推荐方式。
