无框架JS类注入jQuery依赖、事件回调访问实例的正确方式及实现校验

问题描述 #

我正在寻求一种不使用React、Angular等特定框架时，实现JavaScript类、注入jQuery依赖，且在为事件绑定回调函数时，能在类方法中通过this关键字访问实例对象的正确方案。

我的实现代码如下：

父类代码 #

import autoBind from "./auto-bind.js";

class Tools {
    constructor() {
        autoBind(this);
    }

    init() { }
}

export default Tools;

子类代码 #

import autoBind from "./auto-bind.js";
import Tools from "./tools.js"
import * as hub from "./hub.js"

class PanelTools extends Tools {
    constructor() {
        super();

        autoBind(this);
    }

    async init() {
        let _this = this;

        super.init();

        await hub.start();

        $(document)
            .ajaxStart(function () {
                _this.showLoader();
            });
    }

    showLoader() {
        $("#loader").show();
    }
}

注意事项：

• 未使用React、Angular等特殊框架；
• 使用了auto-bind库绑定this；
• 实现了async init()方法以调用await函数；
• 在类方法中定义_this变量来访问实例。

请问这样的类实现及方法中使用jQuery的方式是否正确？

方案验证与优化建议 #

你的实现整体是正确的，能达到预期的功能目标，但存在可以优化的细节：

1. 避免重复调用autoBind
   父类Tools的构造函数已经调用了autoBind(this)，子类PanelTools再次调用属于冗余操作。auto-bind库的默认逻辑会绑定当前类的所有可枚举方法（包括继承自父类的方法），子类重复绑定不仅没有必要，还会增加额外的性能开销，建议删除子类构造函数中的autoBind(this)。

2. 省略_this变量，改用箭头函数
   你用_this缓存实例的方式是可行的，但其实可以利用箭头函数自动继承外层上下文this的特性，直接在回调中使用this：

   $(document).ajaxStart(() => {
       this.showLoader();
   });
   

   箭头函数没有独立的this，会沿用外层init方法的this，而init已经被autoBind绑定到实例，所以这里的this就是PanelTools的实例对象，无需额外缓存。

3. 显性注入jQuery依赖（可选优化）
   当前代码直接使用全局$对象属于隐性依赖，若要让代码耦合度更低、更易测试，可以将jQuery作为参数传入类的构造函数：

   class Tools {
       constructor($) {
           this.$ = $;
           autoBind(this);
       }
   }
   
   class PanelTools extends Tools {
       constructor($) {
           super($);
       }
   
       showLoader() {
           this.$("#loader").show();
       }
   }
   
   // 实例化时传入jQuery
   const panelTools = new PanelTools(jQuery);
   

   这种方式明确了类的依赖项，后续测试时也可以传入模拟的jQuery对象，提升代码的可维护性。

总结：你的核心逻辑完全正确，能够实现无框架下JS类结合jQuery的需求，通过上述优化可以让代码更简洁、规范。

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