大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 jquery-to-js

Automatically finds jQuery methods from existing projects and generates vanilla js alternatives.

很多时候开发者可能想从日常项目中删除 jQuery 依赖，因为大多数项目只使用 15% ~ 20% 的 jquery 方法，而且在大多数情况下甚至不想支持所有边缘情况或旧版浏览器。

要实现该目的困难之处是在现有项目中找到 jQuery 方法，并编写替代的普通 js 方法，且不需要对代码库进行太多更改。

而 jquery-to-js 库可以让开发者轻松从特定 JavaScript 文件中查找 jquery 方法并生成可读的、可链接的 Vanilla JS 替代方案。 而且如果想生成类似于 jQuery 的工具方法也很有用。

目前 jquery-to-js 在 Github 通过 MIT 协议开源，有超过 2k 的 star，是一个值得关注的前端开源项目。

如何使用 jquery-to-js

首先需要安装相应的转换器依赖：

npm install -g jquery-to-js

然后可以通过相应的 CLI 工具快速完成转换：

jquery-to-js src/sample.js out.js
// 从 example.js 查找 jQuery 方法并在 out.js 中输出 vanillaJs
jquery-to-js "src/*.js" out.js
// 从所有匹配文件中查找 jQuery 方法并在 out.js 中编写 vanillaJs 替代方案
jquery-to-js --methods "addClass, removeClass, attr" -o utils.js
// 为指定的 jQuery 方法构建 vanillaJs 替代方案

需要注意的是，jquery-to-js 生成的工具函数并不完全等同于所有场景中的 jQuery 方法，可以自行验证。

从输出代码层面看，假如有以下 jQuery 代码:

$(".vue").siblings().addClass("highlight");

通过转换器生成的输出如下所示，其支持类似于 jQuery 的可链接方法。可以将 ?????别名重命名为utils别名重命名为 以更类似于 jQuery 语法，并用提供的代码替换 jQuery 库。

// 生成的代码
export class Utils {
  constructor(selector) {
    this.elements = Utils.getSelector(selector);
    this.element = this.get(0);
    return this;
  }

  static getSelector(selector, context = document) {
    if (typeof selector !== 'string') {
      return selector;
    }
    if (isId(selector)) {
      return document.getElementById(selector.substring(1))
    }
    return context.querySelectorAll(selector);
  }
  each(func) {
    if (!this.elements) {
      return this;
    }
    if (this.elements.length !== undefined) {
      [].forEach.call(this.elements, func);
    } else {
      func(this.element, 0);
    }
    return this;
  }
  siblings() {
    if (!this.element) {
      return this;
    }
    const elements = [].filter.call(
      this.element.parentNode.children,
      (child) => child !== this.element
    );
    return new Utils(elements);
  }
  get(index) {
    if (index !== undefined) {
      return this.elements[index];
    }
    return this.elements;
  }
  addClass(classNames = '') {
    this.each((el) => {
      // IE doesn't support multiple arguments
      classNames.split(' ').forEach((className) => {
        el.classList.add(className);
      });
    });
    return this;
  }
}
export default function $utils(selector) {
  return new Utils(selector);
}

更新 jQuery 的代码示例如下：

$utils(".vue").siblings().addClass("highlight");

更多关于 jquery-to-js 的用法和参考资料可以阅读文末资料，本文不再过多展开。

参考资料

https://www.lightgalleryjs.com/jquery-to-js-converter/

https://github.com/sachinchoolur/jquery-to-javascript-converter

https://www.youtube.com/watch?v=shEe4Ml6D9Q