遗留jQuery代码转纯JS：IIFE实现与pjax:complete事件绑定是否等效？

嘿，这个问题问得很到位，咱们来拆解一下这两段代码的核心区别和极其有限的相似点：

相似点 #

• 最终都会调用executeSomething()函数，执行API调用、数据计算和页面渲染的逻辑。
• 都属于自包含的执行逻辑（不需要手动调用，会自动触发执行）

核心差异（这才是关键） #

1. 触发时机完全不同 #

• jQuery+pjax版本：$(document).on('pjax:complete', ...)是事件驱动执行——只有当pjax请求完成后（也就是页面通过pjax方式完成加载/更新后），才会触发executeSomething()。如果用户是首次加载页面、或者没有触发任何pjax导航操作，这段代码根本不会执行；只有每次pjax导航完成时才会跑一遍。
• IIFE版本：(function() { executeSomething(); })();是立即执行——只要浏览器解析到这段代码，就会马上调用executeSomething()，不管是不是pjax加载场景：普通页面刷新、首次加载、pjax加载后都会执行（取决于这段代码是否被重复加载）。

2. 执行次数逻辑不同 #

• 前者：每完成一次pjax请求就执行一次。比如用户通过pjax切换了5次页面，这个函数就会被调用5次。
• 后者：仅在代码被解析的当下执行一次。如果pjax加载时会重新引入这段代码，那每次pjax加载都会执行，但本质是代码加载即执行，而非等待pjax事件触发。

3. 依赖环境不同 #

• 前者必须依赖jQuery v3.2.0和pjax的事件机制，缺少其中任何一个都会失效。
• 后者是纯原生JavaScript实现，只要executeSomething()函数已定义就能正常运行，不依赖任何第三方库。

额外建议 #

如果你的目标是完全替换原来的jQuery pjax事件监听逻辑，那IIFE版本并不等价——因为原来的逻辑是专门在pjax更新后刷新数据。你应该用原生JS监听pjax的原生pjax:complete事件，代码如下：

document.addEventListener('pjax:complete', () => {
  executeSomething();
});

这才是和原jQuery代码功能完全一致的纯JS替代方案。

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