Vanilla JS
Vanilla JS 是一个快速, 轻量级, 跨平台的框架,
可以用来构建不可以思议的,强大的JavaScript应用程序.
可以用来构建不可以思议的,强大的JavaScript应用程序.
介绍
Vanilla JS团队负责维护框架代码的每一个字节,努力让它变得小巧与直观.都有谁在使用Vanilla JS呢? 真是个好问题! 下面列举一些:
- YouTube
- Yahoo
- Wikipedia
- Windows Live
- Amazon
- MSN
- eBay
- Microsoft
- Tumblr
- Apple
- PayPal
- Netflix
- Stack Overflow
实际上, 使用 Vanilla JS 的网站比使用jQuery, Prototype JS, MooTools, YUI, 和 Google Web Toolkit的网站的总合还要多.
下载
想尝试一下Vanilla JS吗?请选择你需要的功能模块吧!
总大小: 0 字节(未压缩), 25 字节(gzipped).
使用评价
开始使用
Vanilla JS 团队引以为豪的事实就是,它是世界上最轻量级的框架;使用我们的产品部署策略,用户的浏览器甚至在未发起请求之前就已经将 Vanilla JS 加载到内存中了.
要想使用Vanilla JS,只需要把下面的代码放到你页面的任意地方:
-
<script src="path/to/vanilla.js"></script>
当你准备把你的程序放到线上环境时,使用这个更快的方法:
对! - 不用任何代码. Vanilla JS 太流行了,以至于所有的浏览器在十年前就已经内置了它.
速度比较
下面是一些例子,看看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和其他框架写的常见任务的例子:
将一个元素淡出
| 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> |
发送一个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的信息:
当你使用Vanilla JS写出了强大的应用程序时,请随时免费使用这个按钮! 