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裡加入這行：

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

當你部署你的應用的時候，使用這個更快的方法：

你沒看錯！沒有任何代碼，Vanilla JS 太流行了，所有的浏覽器在十年前就已經内置了它。

性能比較

看看Vanilla JS到底有多快：

根據ID擷取DOM元素

架構	代碼	次數/秒
	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元素

	document.getElementsByTagName("span");	8,280,893
	Prototype.Selector.select('span', document);	62,872
	YAHOO.util.Dom.getElementsBy(function(){return true;},'span');	48,545
	Ext.query('span');	46,915
	$jq('span');	19,449
	dojo.query('span');	10,335
	Slick.search(document, 'span', new Elements);	5,457

代碼示例

下面是一些常見任務的例子，可以看下Vanilla JS和jQuery的差別：

淡出元素

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

s.opacity = 1;

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

​

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

$('#thing').fadeOut();

</script>

AJAX請求

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");

$.ajax({

  type: 'POST',

  url: "path/to/api",

  data: "banana=yellow",

  success: function (data) {

    alert("Success: " + data);

  },

});

緻不敢相信的讀者： 請把“Vanilla JS 是世界上最輕量的JavaScript架構（沒有之一）”這句話讀三遍。如果還是不信的話，再把下面這句話讀三遍：“無論過去、現在還是未來，Vanilla JS 都是世界上最輕量的JavaScript架構（沒有之一）！”