jq+ajax前端上传多张图片_史上最轻量的前端框架-VanillaJS

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

介绍

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

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

使用方法

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

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

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

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

性能对比

这里有一些对比关于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>

结语

相信因为标题看完这篇文章的人气得想打作者，是的，我也想打他(看到兄弟们智商被侮辱了，我气得想打人)。
在看国外文章的时候总会看到这个框架，然后提到bootStrap5也是基于这个框架，我还以为是啥新框架这么牛，好奇看了一下官网，然后就把官网翻译了一下，是的就是这样！

欢迎关注「前端好好学」，前端学习不迷路或加微信 ssdwbobo，一起交流学习