zoukankan      html  css  js  c++  java
  • JavaScript代码编写尝试使用Vanilla JS 或者Jquery插件

    From Here: http://vanilla-js.com/

    Vanilla JS is a fast, lightweight, cross-platform frameworkfor building incredible, powerful JavaScript applications.

    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:

    • Facebook
    • Google
    • YouTube
    • Yahoo
    • Wikipedia
    • Windows Live
    • Twitter
    • Amazon
    • LinkedIn
    • MSN
    • eBay
    • Microsoft
    • Tumblr
    • Apple
    • Pinterest
    • PayPal
    • Reddit
    • 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

    Final size: 0 bytes uncompressed, 25 bytes gzipped. 

    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:

    1. <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:

    1.  

    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

      Codeops / 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

      Codeops / 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(); 
    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>

    Further Reading

    For more information about Vanilla JS:

  • 相关阅读:
    「B/S端开发」如何将DevExtreme组件添加到React应用程序?
    完整UI组件库Kendo UI for Vue R3 2021
    DevExpress WPF界面控件
    DevExpress WinForm MVVM数据和属性绑定指南(Part 1)
    界面控件Telerik UI for WinForm初级教程
    ua-parser-js 实现获取浏览器信息和操作系统信息
    vue--axios 拦截器的简单介绍及使用场景
    css 插件
    去除List集合中的重复值(四种好用的方法)
    常州大学/企业微信/电费查询脚本
  • 原文地址:https://www.cnblogs.com/boonya/p/3670548.html
Copyright © 2011-2022 走看看