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元素

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

根據標籤名獲取DOM元素

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