VanillaJS：简介及应用

一、Vanilla

VanillaJS是一个极轻量级的JavaScript库，用来简化JavaScript开发，它只有大约6KB（压缩后），不需要任何依赖和插件。Vanilla的核心思想是希望让开发者可以使用JavaScript最原始和基本的方法来进行开发，而不是依赖于某个特定的框架或库。

所谓Vanilla，”vanilla” 这个词是指原味，没有添加其他成分的香草。VanillaJS的目标是实现有用的、轻量级的JavaScript工具，不需要添加任何额外的开销或复杂性。这意味着它是非常小、非常快、非常易于使用的。

VanillaJS可以被视为jQuery的替代品。VanillaJS和jQuery都是用来帮助开发人员在Web上快速创建互动性的JavaScript库。但是，VanillaJS提供了一些jQuery不支持的功能，并且VanillaJS并不提供对老版浏览器的支持。如果您需要在老版浏览器上操作Dom对象，您还需要自己编写兼容性代码。

二、Vanilla是什么牌子

VanillaJS可以被看作是一种工具而不是框架，它并不提供类似AngularJS、Vue.js和React.js等一样的数据绑定和组件化特性，只是一款非常原生的JavaScript库，可以让您直接使用原生的JavaScript进行开发。注重轻量级，精简化开发，让开发者更容易理解代码。

VanillaJS的一个最重要的特性就是快速轻便。由于它的目标是保持轻量，因此，它可以在任何要求性能或文件大小的项目中使用。这使得VanillaJS成为开发多设备支持网站的开发者的首选，因为它兼容性较好并且易于使用。

三、Vanilla框架的选取

1. 与jQuery相比较

VanillaJS的第一个优点就是它的精简轻量。原声JavaScript比jQuery快得多，这是因为jQuery的庞大文件包括了大量代码，在文件加载和解释时会带来更多的负担。而VanillaJS只包含了一些常见的DOM操作函数，处理上的速度明显比起jQuery快很多。

其次，VanillaJS没有学习曲线。因为它“仅仅是JavaScript”，所以不需要花费时间来学习一个全新的库，只需要一些对于Javascript开发的基础知识即可。

2. 与React相比较

VanillaJS对比React最大的优点是，它不需要构建过程。当你使用React开发项目时，你通常需要进行一些编译和构建工作，然后才能开始编写代码。而VanillaJS则不需要这样，因为VanillaJS充分利用了原始的JavaScript，所以完全可以直接在浏览器中运行。

另外，VanillaJS比起React在性能上要快速很多。虽然在处理DOM操作时React可以使代码更整洁和更易于理解，但在处理复杂的DOM操作时，两者的性能相差无几，而在简单的DOM方面，VanillaJS的性能显然更优秀。

3. 与Angular相比较

Angular是一个功能非常强大的框架，吸引了大量的开发者关注，但是与VanillaJS相比，Angular规范化和封装化的严重导致了性能的问题。所以，在一些需要刻意追求高性能的项目中不适合选用Angular框架，但是在一些大型、复杂的项目中，仍然可以优先考虑Python语言。

四、示例代码

// 获取id为demo的元素，并给它添加click事件监听器，并输出点击事件套餐的元素
document.getElementById('demo').addEventListener('click', function (e) {alert('You clicked me!')});

// 获取class为tab的单元格或元素，并给它们添加click事件监听器，并将点击事件输出到控制台
var tabs = Array.from(document.getElementsByClassName('tab'));
tabs.forEach(function (tab) {tab.addEventListener('click', function (e) {console.log(e.target.id);});});

属于初学者的练手教程：建立一个简单的画图应用。这个应用使用HTML5 canvas元素和VanillaJS。下面是一些关键代码部分，用于生成画布：

// 从DOM中获取canvas元素
var canvas = document.getElementById('canvas');
// 创建2d上下文
var ctx = canvas.getContext('2d');
// 设置线宽和颜色
ctx.lineWidth = 5;
ctx.strokeStyle = "#000000";
// 定义变量以跟踪用户时候点击鼠标
var isMouseDown = false;
// 添加mousedown事件监听器
canvas.addEventListener('mousedown', function(e) {
    isMouseDown = true;
    // 为下一笔做准备
    ctx.beginPath();
    // 在鼠标点击位置移动画笔
    ctx.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
    // 开始绘制
    ctx.stroke();
});

// 添加mousemove事件监听器
canvas.addEventListener('mousemove', function(e) {
    // 如果鼠标按钮被按下，则继续绘制
    if (isMouseDown) {
        ctx.lineTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
        ctx.stroke();
    }
});

// 添加mouseup事件监听器
canvas.addEventListener('mouseup', function(e) {
    isMouseDown = false;
});

总结

VanillaJS是JavaScript开发人员的一种强大工具。它可以提供给开发人员一个简单的、快速的、原始的JavaScript开发经验。它非常小，可以通过学习JavaScript最基础的知识快速上手，并且由于其高效，性能比其他框架，如jQuery、React和Angular更快。

对于那些想要快速编写JavaScript代码的开发人员来说，VanillaJS是必须掌握的技能之一，它是一种直接面对底层技术的方式。学会了使用VanillaJS，你可以更好地理解JavaScript以及web应用的实现机制，从而提高工作效率并且可以更加自由地定制开发环境和实现机制。

原创文章，作者：ZJFUI，如若转载，请注明出处：https://www.506064.com/n/329290.html