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

Vanilla JS 是一个快速、轻量级、跨平台的JavaScript框架。我们可以用它构建强大的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

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

模块化

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

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

开始使用

Vanilla JS是世界上最轻量的javascript 框架（沒有之一），使用我们的产品部署策略，你的用户的浏览器向你的站点发送请求前就已经把Vanilla JS加载在浏览器里了。

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

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

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

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

性能比较

看看Vanilla JS到底有多快：

根据ID获取DOM元素

根据标签名获取DOM元素

代码示例

下面是一些常见任务的例子，可以看下Vanilla JS和jQuery的区别：

淡出元素

Vanilla JS

var s = document.getElementById('thing').style;

s.opacity = 1;

(functionfade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

jQuery

<scriptsrc="//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

<scriptsrc="//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框架（没有之一）！”