Node8项目HTML转Pug后调用自定义jQuery rotate方法报this.rotate不是函数错误

1. this指向错误（核心原因）：jQuery事件回调中的this指向触发事件的原生DOM元素，而自定义的rotate方法是挂载在jQuery原型$.fn上的，仅jQuery实例对象可以调用，原生DOM对象不存在该方法，因此调用时报错。
   独立HTML运行正常大概率是测试时误将this写为$(this)，或者存在其他全局封装抹平了指向差异。
2. jQuery实例不统一（Node项目特有问题）：基于Node的项目通常使用模块化规范导入依赖，如果挂载rotate插件时用的jQuery实例，和绑定点击事件时用的jQuery实例不是同一个（比如同时使用全局CDN引入的jQuery和npm安装后导入的jQuery），插件只会挂载到其中一个实例上，另一个实例自然找不到该方法。
3. 执行顺序错误：如果Pug模板渲染时，JS代码执行顺序早于jQuery加载完成、或者早于.box元素渲染，也可能出现方法未定义的问题。

• 修正事件回调内的调用方式，将原生DOM对象包装为jQuery实例后再调用rotate方法
• 确保项目内所有位置使用的jQuery是同一个实例，不要混合使用全局$和模块化导入的$
• 保证JS执行顺序：先加载jQuery，再挂载自定义插件，最后绑定DOM事件

修正后的完整代码如下：

var rotation = 0;
// 此处的$需和后续绑定事件用的$为同一实例
$.fn.rotate = function(degrees) {
  $(this).css({
    '-webkit-transform' : `rotate(${degrees}deg)`,
    '-moz-transform' : `rotate(${degrees}deg)`,
    '-ms-transform' : `rotate(${degrees}deg)`,
    'transform' : `rotate(${degrees}deg)`
  });
  return this; // 兼容jQuery链式调用规范
};
$('.box').click(function() {
  rotation += 5;
  // 将原生DOM包装为jQuery实例再调用自定义方法
  $(this).rotate(rotation);
});

注：Pug模板仅负责HTML结构渲染，不会修改JS执行逻辑，按上述修正后即可正常运行。

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