Vanilla JS——最轻快的JavaScript框架

简介

Vanilla JS团队维护每个字节的代码框架,每天努力工作,以确保它是小的和直观的。使用Vanilla JS是谁?很高兴你发问!他被应用于:

Facebook; Google; YouTube; Yahoo; Wikipedia; Windows Live; Twitter; Amazon; LinkedIn; MSN; eBay; Microsoft; Tumblr; Apple; Pinterest; PayPal; Reddit; Netflix; Stack Overflow

In fact, Vanilla JS is already used on more websites than jQuery, Prototype JS, MooTools, YUI, and Google Web Toolkit - combined.

事实上,Vanilla JS的使用量已经远远超过了jQuery, Prototype JS, MooTools, YUI 和 Google Web Toolkit 的总和。

模块化

VanillaJS包括如下模块，下载安装时可以只选择需要的模块，以便提高性能。

核心功能; DOM(遍历/选择器); 基于原型的对象系统; AJAX; 动画; 事件系统; 正则表达式; 函数作为第一类对象; 闭包; 数学库; 数组库; 字符串库

开始使用

Vanilla JS是世界上最轻量的javascript 框架，浏览器向站点发送请求前就已经把Vanilla JS加载在浏览器里了。

使用Vanilla JS只需在应用的HTML里加入这行：

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

当你部署你的应用的时候，使用这个更快的方法：

没错！没有任何代码，Vanilla JS 太流行了，所有的浏览器在十年前就已经内置了它。

性能比较

根据ID获取DOM元素

框架	代码	次数/秒
Vanilla JS	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

根据标签名获取DOM元素

框架	代码	次数/秒
Vanilla JS	document.getElementsByTagName("span");	8,280,893
Prototype JS	Prototype.Selector.select('span', document);	62,872
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

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官网：http://vanilla-js.com/

---

转载于:https://my.oschina.net/tonglei0429/blog/468209