[译]Vanilla JS

Vanilla JS

Vanilla JS 是一个快速, 轻量级, 跨平台的框架,
可以用来构建不可以思议的,强大的JavaScript应用程序.

Vanilla JS团队负责维护框架代码的每一个字节,努力让它变得小巧与直观.都有谁在使用Vanilla JS呢? 真是个好问题! 下面列举一些:

实际上, 使用 Vanilla JS 的网站比使用jQuery, Prototype JS, MooTools, YUI, 和 Google Web Toolkit的网站的总合还要多.

想尝试一下Vanilla JS吗?请选择你需要的功能模块吧!

核心功能

总大小: 0 字节(未压缩), 25 字节(gzipped). 使用可读性更好的单位

Vanilla JS 团队引以为豪的事实就是,它是世界上最轻量级的框架;使用我们的产品部署策略,用户的浏览器甚至在未发起请求之前就已经将 Vanilla JS 加载到内存中了.

要想使用Vanilla JS,只需要把下面的代码放到你页面的任意地方:

当你准备把你的程序放到线上环境时,使用这个更快的方法:

对! - 不用任何代码. Vanilla JS 太流行了,以至于所有的浏览器在十年前就已经内置了它.

下面是一些例子,看看Vanilla JS到底有多快:

	测试代码	次数/秒
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

	测试代码	次数/秒
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和其他框架写的常见任务的例子:

Vanilla JS	var s = document.getElementById('thing').style; s.opacity = 1; (function(){(s.opacity-=.1)<0?s.display="none":setTimeout(arguments.callee,40)})();
jQuery	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('#thing').fadeOut(); </script>

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>