JavaScript代码编写尝试使用Vanilla JS 或者Jquery插件
From Here: http://vanilla-js.com/
Introduction
The Vanilla JS team maintains every byte of code in the framework and works hard each day to make sure it is small and intuitive. Who's using Vanilla JS? Glad you asked! Here are a few:
- YouTube
- Yahoo
- Wikipedia
- Windows Live
- Amazon
- MSN
- eBay
- Microsoft
- Tumblr
- Apple
- PayPal
- Netflix
- Stack Overflow
In fact, Vanilla JS is already used on more websites than jQuery, Prototype JS, MooTools, YUI, and Google Web Toolkit - combined.
Download
Ready to try Vanilla JS? Choose exactly what you need!
Options
Minify Source CodeProduce UTF8 OutputUse "CRLF" line breaks (Windows)
Testimonials
Vanilla JS makes everything an object, which is very convenient for OO JS applications.
Getting Started
The Vanilla JS team takes pride in the fact that it is the most lightweight framework available anywhere; using our production-quality deployment strategy, your users' browsers will have Vanilla JS loaded into memory before it even requests your site.
To use Vanilla JS, just put the following code anywhere in your application's HTML:
- <script src="path/to/vanilla.js"></script>
When you're ready to move your application to a production deployment, switch to the much faster method:
That's right - no code at all. Vanilla JS is so popular that browsers have been automatically loading it for over a decade.
Speed Comparison
Here are a few examples of just how fast Vanilla JS really is:
Retrieve DOM element by ID
Code | ops / sec | |
---|---|---|
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
|
Retrieve DOM elements by tag name
Code | ops / sec | |
---|---|---|
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
|
Code Examples
Here are some examples of common tasks in Vanilla JS and other frameworks:
Fade an element out and then remove it
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> |
Make an AJAX call
Vanilla JS |
var r = new XMLHttpRequest(); |
---|---|
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> |
Further Reading
For more information about Vanilla JS:
- check out the Vanilla JS documentation
- read some books on Vanilla JS
- or try out one of the many Vanilla JS plugins.
JavaScript代码编写尝试使用Vanilla JS 或者Jquery插件的更多相关文章
- 纯javascript代码编写计算器程序
今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...
- 如何为javascript代码编写注释以支持智能感知
在使用Visual Studio做开发的时候,智能感知是非常方便的.从VS2008开始,提供了对javascript的智能感知支持.例如 上述代码中,我们先用document对象的getElement ...
- 编写可维护的javascript代码---开篇(介绍自动报错的插件)
文章开篇主要推荐了2款检测编程风格的工具: JSLint和JSHint: jsLint是由Douglas Crockford创建的.这是一个通用的javascript代码质量检测工具,最开始JSLin ...
- 最简单的原生js和jquery插件封装
最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件. 如果是制作jquery插件的话.就将下面的extend方法换成 $.extend 方法,其他都一样. 总结一下实现原理: 将 ...
- JS:jquery插件表格单元格合并.
公司需要用到单元格合并,于是动手封装了一个简单的jquery插件,封装的函数是直接写好转的,请多多提意见看代码是否有优化的地方..... 截图: 代码: /* * mergeTable 0.1 * C ...
- 区分PC端与移动端代码,涵盖C#、JS、JQuery、webconfig
1)C#区分PC端或移动端 using System.Text.RegularExpressions string u = Request.ServerVariables["HTTP_USE ...
- jsTree 是一个基于Javascript,支持多浏览器的Tree view jQuery插件。
https://www.jstree.com/ 之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合,得 http://www.daqianduan.com/3606.html
- 编写可维护的js代码
在工作中,制定一套统一的编码风格,可以提高开发效率,维护起来的也要容易很多,也能避免一些不必要的错误出现. 项目中常用的检查编码风格的工具JSLint.JSHint.JSCS.ESLint,,在这呢, ...
- Javascript模块化编程之路——(require.js)
转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...
随机推荐
- 你与优秀源码之间只差一个 Star
fir.im Weekly - 你与优秀源码之间只差一个 Star 说起开源社区,Github 是一个不可缺少的存在.作为全球最大的同性交友网站,上面有太多优秀的开源代码库和编程大神,让无数开发者 ...
- 【stm32】用TIM1产生6路ADC,用CCR4触发ADC1的注入通道采样
这几天一直在使用STM32来写sensorless BLDC的驱动框架,那么必须会用到TIM1的CCR1/CCR2/CCR3产生的六路互补PWM,以及用CCR4来产生一个中断,用来在PWM-ON的时候 ...
- Firebug Command Line
http://michaelsync.net/2007/09/15/firebug-tutorial-commandline-api
- linux内核--进程地址空间(一)
引言:现代操作系统提供了一种对内存的抽象概念,叫做虚拟存储器,它为每个进程提供了一个大的,一致的,和私有的地址空间.通过一个很清晰的机制,虚拟存储器提供了3个重要的能力: 1)它将主存看成是一个存储在 ...
- nyoj 1238 最少换乘(dijkstra)
描述 欧洲某城是一个著名的旅游胜地,每年都有成千上万的人前来观光旅行.Dr. Kong决定利用暑假好好游览一番.. 年轻人旅游不怕辛苦,不怕劳累,只要费用低就行.但Dr. Kong年过半百,他希望乘坐 ...
- OC基础1:一些基本概念
"OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 1.关于类方法和实例方法: (1).类方法 ...
- Android的Bitmap和BitmapDrawable类解析-android学习之旅(六十)
使用简单图片 使用Drawable对象 bitmap和BitmapDrawable对象 package peng.liu.test; import android.app.Activity; impo ...
- iOS 自我检測
1.id 和 NSObject的差别? 2.UITableViewCell的复用原理? 3.UIView生命周期和UILayer的差别? 4.多线程NSOperation和Queue.GDC.Thre ...
- Android UI目录
Android UI目录 序:最近一直想进阶android应用开发,虽然对一些相关的android知识都大体熟悉,但是自己的android知识体系,经不起推敲.经不起高手的垂问.经过几个月的努力学习, ...
- Android Service组件(1)
android service 和其他服务一样,并没有实际运行的界面,它运行在android 后台.一般通过service为应用程序提供服务(比如,从Internet下载文件,控制音乐播放器等).Se ...