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

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框架(没有之一)!”


SegmentFault_行业快讯
第一时间为开发者提供行业相关的实时热点资讯

思否编辑部官方账号,欢迎私信投稿、提供线索、沟通反馈。

3.9k 声望
116.9k 粉丝
0 条评论
推荐阅读
高效开源的网络扫描框架 —— NINJA-PingU
NINJA-PingU作为一个扫描框架,可不仅仅只有ping这样简单的功能,他是一个专门为大型网络扫描所设计的框架,兼顾效率的同时,支持插件的开发。

思否编辑部阅读 4.2k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木149阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青54阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

思否编辑部官方账号,欢迎私信投稿、提供线索、沟通反馈。

3.9k 声望
116.9k 粉丝
宣传栏