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

2019年8月26日 179次阅读 来源: weakish

Vanilla JS 是一个疾速、轻量级、跨平台的JavaScript框架。我们能够用它构建壮大的JavaScript运用程序。

《Vanilla JS——世界上最轻量的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里到场这行：

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

当你布置你的运用的时刻，运用这个更快的要领：


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

机能比较

看看Vanilla JS到底有多快：

依据ID猎取DOM元素

框架代码次数/秒
Vanilla JSdocument.getElementById('test-table');12,137,211
Dojodojo.byId('test-table');5,443,343
Prototype JS$('test-table')2,940,734
Ext JSdelete Ext.elCache['test-table']; Ext.get('test-table');997,562
jQuery$jq('#test-table');350,557
YUIYAHOO.util.Dom.get('test-table');326,534
MooToolsdocument.id('test-table');78,802

依据标署名猎取DOM元素

框架代码次数/秒
Vanilla JSdocument.getElementsByTagName("span");8,280,893
Prototype JSPrototype.Selector.select('span', document);62,872
YUIYAHOO.util.Dom.getElementsBy(function(){return true;},'span');48,545
Ext JSExt.query('span');46,915
jQuery$jq('span');19,449
Dojodojo.query('span');10,335
MooToolsSlick.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框架（没有之一）！”

    原文作者：weakish
    原文地址: https://segmentfault.com/a/1190000000355277
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞