zoukankan      html  css  js  c++  java

  • 你可能不需要 jQuery！使用原生 JavaScript 进行开发

    http://youmightnotneedjquery.com/

    摘自：http://www.cnblogs.com/lhb25/p/you-might-not-need-jquery.html

    很多的 JavaScript 开发人员，包括我在内，都很喜欢 jQuery。因为它的简单，因为它有很多丰富的插件可供使用，和其它优秀的工具一样，jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用。

    　　然而，另一方面，作为前端开发的基础框架，jQuery 包含大量的兼容性代码和扩展功能，其中有很多在你的整个项目中可能都不会用到。其实如果你只是针对现代浏览器，很多功能使用原生的 JavaScript 就可以实现，即使是拖后腿的低版本 IE 浏览器，兼容性也是很容易处理的。

    您可能感兴趣的相关文章

    　　下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能。如果你打算自己开发一个小的基础框架，可以好好参考一下这些代码的实现。 

    Ajax Post

    jQuery：

    1
    2
    3
    4
    5
    $.ajax({
      type: 'POST',
      url: '/my/url',
      data: data
    });

    IE8+：

    1
    2
    3
    var request = new XMLHttpRequest();
    request.open('POST', '/my/url', true);
    request.send(data);

    Ajax Get

    jQuery：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $.ajax({
      type: 'GET',
      url: '/my/url',
      success: function(resp) {
     
      },
      error: function() {
     
      }
    });　

    IE8+：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    request = new XMLHttpRequest();
    request.open('GET', '/my/url', true);
     
    request.onreadystatechange = function() {
      if (this.readyState === 4){
        if (this.status >= 200 && this.status < 400){
          // Success!
          resp = this.responseText;
        } else {
          // Error :(
        }
      }
    }
     
    request.send();
    request = null;

    加载 JSON

    jQuery：

    1
    2
    3
    $.getJSON('/my/url', function(data) {
     
    });

    IE8+：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    request = new XMLHttpRequest();
    request.open('GET', '/my/url', true);
     
    request.onreadystatechange = function() {
      if (this.readyState === 4){
        if (this.status >= 200 && this.status < 400){
          // Success!
          data = JSON.parse(this.responseText);
        } else {
          // Error :(
        }
      }
    }
     
    request.send();
    request = null;

    淡入效果

    jQuery：

    1
    $(el).fadeIn();　　

    IE8+：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    function fadeIn(el) {
      var opacity = 0;
     
      el.style.opacity = 0;
      el.style.filter = '';
     
      var last = +new Date();
      var tick = function() {
        opacity += (new Date() - last) / 400;
        el.style.opacity = opacity;
        el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')';
     
        last = +new Date();
     
        if (opacity < 1) {
          (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
        }
      };
     
      tick();
    }
     
    fadeIn(el);

    显示和隐藏

    jQuery：

    1
    2
    $(el).show();
    $(el).hide();

    IE8+：

    1
    2
    el.style.display = '';
    el.style.display = 'none';

    添加 Class

    jQuery：

    1
    $(el).addClass(className);

    IE8+：

    1
    2
    3
    4
    if (el.classList)
      el.classList.add(className);
    else
      el.className += ' ' + className;

    插入 HTML

    jQuery：

    1
    2
    3
    $(el).before(htmlString);
    $(parent).append(el);
    $(el).after(htmlString);

    IE8+：

    1
    2
    3
    el.insertAdjacentHTML('beforebegin', htmlString);
    parent.appendChild(el);
    el.insertAdjacentHTML('afterend', htmlString);

    获取子节点

    jQuery：

    1
    $(el).children();

    IE8+：

    1
    2
    3
    4
    5
    6
    var children = [];
    for (var i=el.children.length; i--;){
      // Skip comment nodes on IE8
      if (el.children[i].nodeType != 8)
        children.unshift(el.children[i]);
    }

    循环节点

    jQuery：

    1
    2
    3
    $(selector).each(function(i, el){
     
    });

    IE8+：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function forEachElement(selector, fn) {
      var elements = document.querySelectorAll(selector);
      for (var i = 0; i < elements.length; i++)
        fn(elements[i], i);
    }
     
    forEachElement(selector, function(el, i){
     
    });

    清空节点

    jQuery：

    1
    $(el).empty();

    IE8+：

    1
    2
    while(el.firstChild)
      el.removeChild(el.firstChild)

    过滤节点

    jQuery：

    1
    $(selector).filter(filterFn);

    IE8+：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function filter(selector, filterFn) {
      var elements = document.querySelectorAll(selector);
      var out = [];
      for (var i = elements.length; i--;) {
        if (filterFn(elements[i]))
          out.unshift(elements[i]);
      }
      return out;
    }
     
    filter(selector, filterFn);

    查找元素

    jQuery：

    1
    2
    $(el).find(selector);
    $('.my #awesome selector');

    IE8+：

    1
    2
    el.querySelectorAll(selector);
    document.querySelectorAll('.my #awesome selector');

    获取属性、HTML或者文本

    jQuery：

    1
    2
    3
    4
    $(el).attr('tabindex');
    $(el).html();
    $('<div>').append($(el).clone()).html();
    $(el).text();

    IE8+：

    1
    2
    3
    4
    el.getAttribute('tabindex');
    el.innerHTML
    el.outerHTML
    el.textContent || el.innerText

    判断是否包含某个 css class

    jQuery：

    1
    $(el).hasClass(className);

    IE8+：

    1
    2
    3
    4
    if (el.classList)
      el.classList.contains(className);
    else
      new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);　

    选择器匹配

    jQuery：

    1
    $(el).is('.my-class');

    IE8+：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var matches = function(el, selector) {
      var _matches = (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector);
     
      if (_matches) {
        return _matches.call(el, selector);
      } else {
        var nodes = el.parentNode.querySelectorAll(selector);
        for (var i = nodes.length; i--;)
          if (nodes[i] === el) {
            return true;
        }
        return false;
    }
     
    matches(el, '.my-class');

    前一个节点

    jQuery：

    1
    $(el).prev();

    IE8+：

    1
    2
    3
    4
    5
    6
    7
    // prevSibling can include text nodes
    function previousElementSibling(el) {
      do { el = el.previousSibling; } while ( el && el.nodeType !== 1 );
      return el;
    }
     
    el.previousElementSibling || previousElementSibling(el);

    后一个节点

    jQuery：

    1
    $(el).next();

    IE8+：

    1
    2
    3
    4
    5
    6
    7
    // nextSibling can include text nodes
    function nextElementSibling(el) {
      do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );
      return el;
    }
     
    el.nextElementSibling || nextElementSibling(el);

    外部高度

    jQuery：

    1
    $(el).outerHeight()

    IE8+：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function outerHeight(el, includeMargin){
      var height = el.offsetHeight;
     
      if(includeMargin){
        var style = el.currentStyle || getComputedStyle(el);
        height += parseInt(style.marginTop) + parseInt(style.marginBottom);
      }
      return height;
    }
     
    outerHeight(el, true);

    外部宽度

    jQuery：

    1
    $(el).outerWidth()

    IE8+：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function outerWidth(el, includeMargin){
      var height = el.offsetWidth;
     
      if(includeMargin){
        var style = el.currentStyle || getComputedStyle(el);
        height += parseInt(style.marginLeft) + parseInt(style.marginRight);
      }
      return height;
    }
     
    outerWidth(el, true);

    判断是否数组

    jQuery：

    1
    $.isArray(arr);

    IE8+：

    1
    2
    3
    4
    5
    isArray = Array.isArray || function(arr) {
      return Object.prototype.toString.call(arr) == '[object Array]';
    }
     
    isArray(arr);

    数组转换

    jQuery：

    1
    2
    3
    $.map(array, function(value, index){
     
    })

    IE8+：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function map(arr, fn) {
      var results = []
      for (var i = 0; i < arr.length; i++)
        results.push(fn(arr[i], i))
      return results
    }
     
    map(array, function(value, index){
     
    })

    　　类似的还有很多很多，可以参考这里：http://youmightnotneedjquery.com/。

    本文链接：你可能不需要 jQuery！编写原生的JavaScript代码

    编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
  • 相关阅读:
    js获取网页屏幕可视区域高度
    vue 一键复制文本内容 clipboard
    uniapp 微信小程序分包优化
    通过vuecli命令行安装uniapp
    微信小程序跳转
    .net session丢失
    验证码识别技术研究（2）
    window环境下安装和卸载服务【转】
    formValidator onshowhtml is not define
    Ajax 跨域请求
  • 原文地址：https://www.cnblogs.com/rik28/p/5985951.html
Copyright © 2011-2022 走看看