jQuery 到 Vanilla JS 转换器

简介

对于使用 jQuery 的程序员来说，转换到 Vanilla JS 有一定的挑战性。本文将介绍一个简单的工具，帮助程序员将 jQuery 代码转换为原生的 JavaScript 代码，从而提高代码的性能和可读性。

如何使用

该工具是一个 JavaScript 函数，可以直接拷贝到你的项目中使用。使用时，只需将 jQuery 语句作为参数，调用该函数即可。函数会返回转换后的 JavaScript 语句。例如：

var result = convertJqueryToVanillaJs('$("p").hide();');

将返回：

Array.from(document.querySelectorAll('p')).forEach(function(p) {
  p.style.display = 'none';
});

也可以在浏览器控制台中执行该函数，例如：

console.log(convertJqueryToVanillaJs('$("p").hide();'));

支持的 jQuery 方法

目前该转换器支持转换以下 jQuery 方法：

• hide
• show
• slideUp
• slideDown
• fadeIn
• fadeOut
• addClass
• removeClass
• toggleClass
• attr
• removeAttr
• text
• html
• val
• css

其他方法将在未来的版本中加入。

实现方法

该转换器的实现方法非常简单：使用正则表达式将 jQuery 语句中的选择器和方法提取出来，然后根据选择器生成原生的 JavaScript 语句。

例如，对于 $('[data-name="foo"]').hide();，可以使用以下正则表达式进行提取：

/\$\(("[^"]+"|'[^']+'|[^)]+)\)\.(\w+)\((.*)\);/

然后根据选择器生成原生的 JavaScript 语句：

Array.from(document.querySelectorAll('[data-name="foo"]')).forEach(function(element) {
  element.style.display = 'none';
});

总结

使用本工具可以简单快速地将 jQuery 代码转换为原生的 JavaScript 代码，从而提高代码的性能和可读性。该工具可以根据需要进行自定义扩展，例如支持更多的 jQuery 方法或自定义的方法。