美文网首页需要近期研究的项目
Vanilla JS——世界上最轻量的JavaScript框架(

Vanilla JS——世界上最轻量的JavaScript框架(

作者: 兔子丶哥 | 来源:发表于2019-10-14 17:13 被阅读0次

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里加入这行:

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

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

性能比较

看看Vanilla JS到底有多快:

根据ID获取DOM元素

框架代码次数/秒

Vanilla JS

document.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,562jQuery$jq('#test-table');350,557

YUIYAHOO.util.Dom.get('test-table');326,534

MooToolsdocument.id('test-table');78,802

根据标签名获取DOM元素

框架代码次数/秒

Vanilla JS

document.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,915jQuery$jq('span');19,449

Dojodojo.query('span');10,335

MooToolsSlick.search(document, 'span', new Elements);5,457

代码示例

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

淡出元素

Vanilla JS

vars =document.getElementById('thing').style;s.opacity =1;

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

jQuery

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

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

$.ajax({type:'POST',url:"path/to/api",data:"banana=yellow",success:function(data){

 alert("Success: "+ data);

 },});

致不敢相信的读者:请把“Vanilla JS 是世界上最轻量的JavaScript框架(没有之一)”这句话读三遍。如果还是不信的话,再把下面这句话读三遍:“无论过去、现在还是未来,Vanilla JS 都是世界上最轻量的JavaScript框架(没有之一)!”

相关文章

网友评论

    本文标题:Vanilla JS——世界上最轻量的JavaScript框架(

    本文链接:https://www.haomeiwen.com/subject/rtarmctx.html