將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 程式碼

$(<font>".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) => {
      <font>// IE doesn't support multiple arguments<i>
      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

將jQuery轉換到JavaScript開源工具

相關文章