WordPress站点jQuery代码报$已被声明语法错误如何处理？

解决方案 #

方案1（推荐：无冲突，符合WordPress编码规范） #

使用闭包隔离作用域，完全不需要依赖全局$的状态，是WordPress官方推荐的jQuery标准写法：

(function($) {
  // 该作用域内的$固定指向jQuery，不受全局变量影响
  $(function() {
    // 你的业务代码写在这里即可
    console.log('$可用', $);
  });
})(jQuery);

这种写法不会污染全局命名空间，不管其他插件有没有声明全局$，都不会和你的代码产生冲突，从根源上避免了重复声明报错的问题。

方案2（需要全局声明$时使用） #

如果你的场景确实需要在全局上下文绑定$，不要用var/let/const关键字声明，直接操作window对象属性即可，不会触发重复声明的语法错误：

if (typeof window.$ === 'undefined') {
  window.$ = jQuery;
}

直接赋值给window的属性属于对象属性操作，不属于标识符声明，就算全局已经存在$也只会触发判断逻辑跳过赋值，不会抛出语法错误。

原代码失效原因说明 #

你之前的代码报错是因为var关键字存在变量提升特性：JS引擎在编译阶段就会把当前作用域所有var声明的变量提升到作用域顶部，和它实际写在哪个逻辑分支、哪个代码块里完全无关。相当于你的代码在实际运行前，JS引擎已经先执行了var $的声明操作，如果其他插件已经用let/const在全局声明过$，就会直接抛出重复声明的语法错误。这个错误发生在代码运行阶段之前，所以你写的try...catch和typeof判断根本没有执行机会，自然不会生效。

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