将jQuery转换到JavaScript开源工具

直接在浏览器中将 jQuery 脚本转换为高效的 JavaScript。立即接收可靠、可链接的现代 JavaScript 代码，这些代码可以用作最小的实用程序库，同时保持现有代码不变。

原因：
虽然 jQuery 一直是 Web 开发中的主要内容，但它常常变得不必要，许多项目只使用其功能的一小部分。现代浏览器现在原生支持 jQuery 曾经需要的许多功能。然而，由于代码库需要进行大量更改，删除 jQuery 的想法可能令人畏惧。

jQuery 到 JavaScript 转换器可以轻松地从 jQuery 转换到普通 JavaScript，让您可以顺利地进行切换，而无需对现有代码进行大量修改。

转换后是否需要修改我现有的 jQuery 代码？
不，您不需要修改现有代码。该工具旨在为您提供可以直接替换 jQuery 的 JavaScript，确保您现有的代码在没有 jQuery 库的情况下按预期运行。

转换过程如何进行？
该过程首先将源代码转换为抽象语法树 (AST)。然后，我们遍历这个 AST，识别 jQuery 方法，并将它们替换为我们测试库中的等效普通 JavaScript 方法，最终生成输出。

基本概念和用法
jQuery 到 JavaScript 转换器旨在通过生成的普通 JavaScript 复制 jQuery 的功能。转换代码后，生成的输出将充当您自己的实用程序库，反映 jQuery 的行为。生成的 JavaScript 方法是可链接的并且适用于所有匹配元素，就像 jQuery 一样。转换后，只需将项目中的 jQuery 依赖项替换为新创建的输出即可。

假设您的代码库中有以下 jQuey 代码

$(".vue").siblings().addClass("highlight");
<ul>
  <li class="jquery">jQuery</li>
  <li class="react">React</li>
  <li class="vue">Vue.js</li>
  <li class="angular">Angular</li>
  <li class="lit">Lit</li>
</ul>
.highlight {
  background-color: red;
  color: fff;
}

生成的输出如下所示。它支持类似于 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);
}

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

演示 - https://codepen.io/sachinchoolur/pen/oNWNdxE