将模块导入HTML头部时，两段jQuery代码的差异是什么？

执行时机与DOM可用性的区别 #

你的脚本是在HTML的<head>标签里以模块方式导入的，此时页面DOM还未完全加载完成，#year元素还不存在于DOM树中，这是两段代码行为差异的核心原因：

• 第一段代码：
  直接执行$("#year").text(getCurrentYear())，由于#year元素还没被渲染出来，jQuery选择器会返回空对象。虽然不会报错，但无法给目标元素设置年份文本，功能完全失效。
• 第二段代码：
  把DOM操作逻辑封装到setCopyrightYear函数中，通过$(setCopyrightYear)调用——这是$(document).ready(setCopyrightYear)的简写，会等待整个DOM树加载完成后再执行函数。此时#year元素已存在，能正常设置其文本内容，功能可正常生效。

代码结构与复用性的区别 #

• 第一段是即时执行的零散逻辑，没有封装成函数，无法在其他场景重复调用。
• 第二段把逻辑封装成独立的setCopyrightYear函数，后续如果需要重新设置年份（比如页面动态更新后），可直接调用该函数，复用性更强。

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