史上最轻量的前端框架-VanillaJS

vanilla JS是史上最轻量跨平台前端框架 ，我们能够使用它构建强大的JS应用。从过去到以后他都是最轻量的框架。

介绍

vanilla JS目前在国外备受推崇，Bootstrap5舍弃了Jquery，选择了它作为基础框架，有哪些知名企业使用了它呢:

• 字节跳动
• 百度
• 阿里巴巴
• 美团
• 谷歌
• facebook
• github
• 腾讯
  以上只列出了一些耳熟能详的企业，事实上他的应用范围远超你的想象。

使用方法

vanilla JS是世界上最轻量的框架，没有之一！使用vanilla JS的部署策略，能够让在用户访问访问你的网站之前就就从内存中读取vanilla JS的资源。 引入方式只需要在html中加入这行script：

<script src="path/to/vanilla.js"></script>

当部署在正式环境中，直接把html中的这段引用替换成以下内容：

是的你没看错，没有任何代码。因为vanilla JS的广受欢迎，所有的浏览器都已经内置这个框架了！

性能对比

这里有一些对比关于vanillaJS性能指标：

通过ID获取元素

框架	代码	次数/秒
vanillaJS	document.getElementById('test-table')	12,137,211
Dojo	dojo.byId('test-table')	5,443,343
Prototype JS	$('test-table')	2,940,734
Ext JS	delete Ext.elCache['test-table']; Ext.get('test-table')	997,562
jQuery	$jq('#test-table');	350,557
YUI	YAHOO.util.Dom.get('test-table');	326,534
MooTools	document.id('test-table');	78,802

通过tag获取元素

框架	代码	次数/秒
vanillaJS	document.getElementsByTagName("span");	8,280,893
Prototype JS	Prototype.Selector.select('span', document);	2,940,734
YUI	YAHOO.util.Dom.getElementsBy(function(){return true;},'span');	48,545
Ext JS	Ext.query('span');	46,915
jQuery	$jq('span');	19,449
Dojo	dojo.query('span');	10,335
MooTools	Slick.search(document, 'span', new Elements);	5,457

代码示例

下面是一些常见任务的例子，可以看下Vanilla JS和jQuery的区别：

元素淡出效果

• Vanilla JS

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

• Jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#thing').fadeOut();
</script>

Ajax请求

• Vanilla JS

var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.send("banana=yellow");

• Jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$.ajax({
  type: 'POST',
  url: "path/to/api",
  data: "banana=yellow",
  success: function (data) {
    alert("Success: " + data);
  },
});
</script>

结语

好吧，为了不引起更多的困惑，不开玩笑的说事实——Vanilla JS 就是不使用任何框架的纯粹的原生 Javascript。

在计算机科学里 Vanilla 这个词往往与软件共用时就表示 pure plain（纯粹） 的意思。当然英语里也本身有这个意思。
官网：vanilla-js.com/