在Moments项目中正确添加自定义JavaScript脚本的方法

问题背景

在使用Moments项目v0.2.6版本时，用户尝试添加统计网站访问量的JavaScript脚本时遇到了问题。具体表现为：在自定义JS区域添加代码后没有生效，而隐藏GitHub star的CSS样式却能正常工作。

问题分析

经过技术分析，这个问题源于Moments项目中JavaScript脚本加载的特殊机制。Moments项目通过HTTP API从服务端获取自定义脚本内容，这意味着当自定义脚本开始执行时，DOMContentLoaded事件已经触发完毕。

解决方案

1. 避免使用DOMContentLoaded事件

许多开发者习惯将代码包裹在DOMContentLoaded事件监听器中，例如：

document.addEventListener('DOMContentLoaded', function() {
    // 你的代码
});

但在Moments项目中，这种方式会导致代码无法执行，因为事件已经触发过了。正确的做法是直接编写代码，无需事件监听。

2. 统计访问量的实现代码

以下是经过验证可用的统计访问量实现代码：

document.querySelector(".footer").insertAdjacentHTML("afterend", '<div class="flex text-sm justify-center"><div id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</div></div>');

var script = document.createElement("script");
script.src = "//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js";
script.async = true;
document.head.appendChild(script);

这段代码做了以下几件事：

1. 在页脚后插入访问量统计的HTML结构
2. 动态创建并加载统计脚本
3. 使用async属性确保脚本异步加载不影响页面性能

3. 动态元素操作的最佳实践

在Moments项目中操作DOM元素时，建议：

• 直接操作DOM，无需等待事件
• 使用insertAdjacentHTML等现代API操作元素
• 动态加载外部脚本时确保使用async或defer属性
• 考虑脚本加载失败时的容错处理

技术原理深入

Moments项目的这种设计有其合理性：

1. 服务端渲染优先：先完成页面渲染，再处理动态内容
2. 性能优化：避免阻塞主线程的脚本加载
3. 安全性：通过API管理自定义脚本更可控

理解这一机制后，开发者可以更高效地在Moments项目中实现各种动态功能。

总结

在Moments项目中添加自定义JavaScript时，关键在于理解其脚本加载机制。避免使用DOMContentLoaded等页面加载事件，直接编写操作DOM的代码即可。这种设计模式在现代前端框架中也很常见，体现了性能优先的设计理念。