Vanilla JS——世界上最轻量的JavaScript框架（没有之一）

admin web前端 暂无评论 463 浏览

Vanilla JS 是一个快速、轻量级、跨平台的JavaScript框架。我们可以用它构建强大的JavaScript应用程序。

vanilla

介绍

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

实际上, 使用 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 太流行了，所有的浏览器在十年前就已经内置了它。


性能比较


看看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和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 JS 都是世界上最轻量的JavaScript框架（没有之一）！”




相关博文


Vanilla JS——世界上最轻量的JavaScript框架（没有之一）
      
 赏 





标签: