原生 JavaScript 代替 jQuery【转】

目录

• 用原生javascript代替jquery
• license

用原生javascript代替jquery

前端发展很快，现代浏览器原生 api 已经足够好用。我们并不需要为了操作 dom、event 等再学习一下 jquery 的 api。同时由于 react、angular、vue 等框架的流行，直接操作 dom 不再是好的模式，jquery 使用场景大大减少。本项目总结了大部分 jquery api 替代的方法，暂时只支持 ie10 以上浏览器。

query selector

常用的 class、id、属性 选择器都可以使用 document.queryselector 或 document.queryselectorall 替代。区别是

• document.queryselector 返回第一个匹配的 element
• document.queryselectorall 返回所有匹配的 element 组成的 nodelist。它可以通过 [].slice.call() 把它转成 array
• 如果匹配不到任何 element，jquery 返回空数组 []，但 document.queryselector 返回 null，注意空指针异常。当找不到时，也可以使用 || 设置默认的值，如 document.queryselectorall(selector) || []

注意：document.queryselector 和 document.queryselectorall 性能很差。如果想提高性能，尽量使用 document.getelementbyid、document.getelementsbyclassname 或 document.getelementsbytagname。

• 选择器查询

  // jquery
  $('selector');
  
  // native
  document.queryselectorall('selector');

• class 查询

  // jquery
  $('.class');
  
  // native
  document.queryselectorall('.class');
  
  // or
  document.getelementsbyclassname('class');

• id 查询

  // jquery
  $('#id');
  
  // native
  document.queryselector('#id');
  
  // or
  document.getelementbyid('id');

• 属性查询

  // jquery
  $('a[target=_blank]');
  
  // native
  document.queryselectorall('a[target=_blank]');

• 后代查询

  // jquery
  $el.find('li');
  
  // native
  el.queryselectorall('li');

• 兄弟及上下元素

  • 兄弟元素

    // jquery
    $el.siblings();
    
    // native - latest, edge13+
    [...el.parentnode.children].filter((child) =>
      child !== el
    );
    // native (alternative) - latest, edge13+
    array.from(el.parentnode.children).filter((child) =>
      child !== el
    );
    // native - ie10+
    array.prototype.filter.call(el.parentnode.children, (child) =>
      child !== el
    );

  • 上一个元素

    // jquery
    $el.prev();
    
    // native
    el.previouselementsibling;
    

  • 下一个元素

    // next
    $el.next();
    
    // native
    el.nextelementsibling;

• closest

  closest 获得匹配选择器的第一个祖先元素，从当前元素开始沿 dom 树向上。

  // jquery
  $el.closest(querystring);
  
  // native - only latest, no ie
  el.closest(selector);
  
  // native - ie10+
  function closest(el, selector) {
    const matchesselector = el.matches || el.webkitmatchesselector || el.mozmatchesselector || el.msmatchesselector;
  
    while (el) {
      if (matchesselector.call(el, selector)) {
        return el;
      } else {
        el = el.parentelement;
      }
    }
    return null;
  }

• parents until

  获取当前每一个匹配元素集的祖先，不包括匹配元素的本身。

  // jquery
  $el.parentsuntil(selector, filter);
  
  // native
  function parentsuntil(el, selector, filter) {
    const result = [];
    const matchesselector = el.matches || el.webkitmatchesselector || el.mozmatchesselector || el.msmatchesselector;
  
    // match start from parent
    el = el.parentelement;
    while (el && !matchesselector.call(el, selector)) {
      if (!filter) {
        result.push(el);
      } else {
        if (matchesselector.call(el, filter)) {
          result.push(el);
        }
      }
      el = el.parentelement;
    }
    return result;
  }

• form

  • input/textarea

    // jquery
    $('#my-input').val();
    
    // native
    document.queryselector('#my-input').value;

  • 获取 e.currenttarget 在 .radio 中的数组索引

    // jquery
    $('.radio').index(e.currenttarget);
    
    // native
    array.prototype.indexof.call(document.queryselectorall('.radio'), e.currenttarget);

• iframe contents

  jquery 对象的 iframe contents() 返回的是 iframe 内的 document

  • iframe contents

    // jquery
    $iframe.contents();
    
    // native
    iframe.contentdocument;

  • iframe query

    // jquery
    $iframe.contents().find('.css');
    
    // native
    iframe.contentdocument.queryselectorall('.css');

• 获取 body

  // jquery
  $('body');
  
  // native
  document.body;

• 获取或设置属性

  • 获取属性

    // jquery
    $el.attr('foo');
    
    // native
    el.getattribute('foo');

  • 设置属性

    // jquery, note that this works in memory without change the dom
    $el.attr('foo', 'bar');
    
    // native
    el.setattribute('foo', 'bar');

  • 获取 data- 属性

    // jquery
    $el.data('foo');
    
    // native (use `getattribute`)
    el.getattribute('data-foo');
    
    // native (use `dataset` if only need to support ie 11+)
    el.dataset['foo'];

css & style

• css

  • get style

    // jquery
    $el.css("color");
    
    // native
    // 注意：此处为了解决当 style 值为 auto 时，返回 auto 的问题
    const win = el.ownerdocument.defaultview;
    
    // null 的意思是不返回伪类元素
    win.getcomputedstyle(el, null).color;

  • set style

    // jquery
    $el.css({ color: "#ff0011" });
    
    // native
    el.style.color = '#ff0011';

  • get/set styles

    注意，如果想一次设置多个 style，可以参考 oui-dom-utils 中 setstyles 方法

  • add class

    // jquery
    $el.addclass(classname);
    
    // native
    el.classlist.add(classname);

  • remove class

    // jquery
    $el.removeclass(classname);
    
    // native
    el.classlist.remove(classname);

  • has class

    // jquery
    $el.hasclass(classname);
    
    // native
    el.classlist.contains(classname);

  • toggle class

    // jquery
    $el.toggleclass(classname);
    
    // native
    el.classlist.toggle(classname);

• width & height

  width 与 height 获取方法相同，下面以 height 为例：

  • window height

    // window height
    $(window).height();
    
    // 含 scrollbar
    window.document.documentelement.clientheight;
    
    // 不含 scrollbar，与 jquery 行为一致
    window.innerheight;

  • document height

    // jquery
    $(document).height();
    
    // native
    const body = document.body;
    const html = document.documentelement;
    const height = math.max(
      body.offsetheight,
      body.scrollheight,
      html.clientheight,
      html.offsetheight,
      html.scrollheight
    );

  • element height

    // jquery
    $el.height();
    
    // native
    function getheight(el) {
      const styles = this.getcomputedstyle(el);
      const height = el.offsetheight;
      const bordertopwidth = parsefloat(styles.bordertopwidth);
      const borderbottomwidth = parsefloat(styles.borderbottomwidth);
      const paddingtop = parsefloat(styles.paddingtop);
      const paddingbottom = parsefloat(styles.paddingbottom);
      return height - borderbottomwidth - bordertopwidth - paddingtop - paddingbottom;
    }
    
    // 精确到整数（border-box 时为 height - border 值，content-box 时为 height + padding 值）
    el.clientheight;
    
    // 精确到小数（border-box 时为 height 值，content-box 时为 height + padding + border 值）
    el.getboundingclientrect().height;

• position & offset

  • position

    获得匹配元素相对父元素的偏移

    // jquery
    $el.position();
    
    // native
    { left: el.offsetleft, top: el.offsettop }

  • offset

    获得匹配元素相对文档的偏移

    // jquery
    $el.offset();
    
    // native
    function getoffset (el) {
      const box = el.getboundingclientrect();
    
      return {
        top: box.top + window.pageyoffset - document.documentelement.clienttop,
        left: box.left + window.pagexoffset - document.documentelement.clientleft
      }
    }

• scroll top

  获取元素滚动条垂直位置。

  // jquery
  $(window).scrolltop();
  
  // native
  (document.documentelement && document.documentelement.scrolltop) || document.body.scrolltop;

dom manipulation

• remove

  从 dom 中移除元素。

  // jquery
  $el.remove();
  
  // native
  el.parentnode.removechild(el);
  
  // native - only latest, no ie
  el.remove();

• text

  • get text

    返回指定元素及其后代的文本内容。

    // jquery
    $el.text();
    
    // native
    el.textcontent;

  • set text

    设置元素的文本内容。

    // jquery
    $el.text(string);
    
    // native
    el.textcontent = string;

• html

  • get html

    // jquery
    $el.html();
    
    // native
    el.innerhtml;

  • set html

    // jquery
    $el.html(htmlstring);
    
    // native
    el.innerhtml = htmlstring;

• append

  append 插入到子节点的末尾

  // jquery
  $el.append("<div id='container'>hello</div>");
  
  // native (html string)
  el.insertadjacenthtml('beforeend', '<div id="container">hello world</div>');
  
  // native (element)
  el.appendchild(newel);

• prepend

  // jquery
  $el.prepend("<div id='container'>hello</div>");
  
  // native (html string)
  el.insertadjacenthtml('afterbegin', '<div id="container">hello world</div>');
  
  // native (element)
  el.insertbefore(newel, el.firstchild);

• insertbefore

  在选中元素前插入新节点

  // jquery
  $newel.insertbefore(querystring);
  
  // native (html string)
  el.insertadjacenthtml('beforebegin ', '<div id="container">hello world</div>');
  
  // native (element)
  const el = document.queryselector(selector);
  if (el.parentnode) {
    el.parentnode.insertbefore(newel, el);
  }

• insertafter

  在选中元素后插入新节点

  // jquery
  $newel.insertafter(querystring);
  
  // native (html string)
  el.insertadjacenthtml('afterend', '<div id="container">hello world</div>');
  
  // native (element)
  const el = document.queryselector(selector);
  if (el.parentnode) {
    el.parentnode.insertbefore(newel, el.nextsibling);
  }

• is

  如果匹配给定的选择器，返回true

  // jquery
  $el.is(selector);
  
  // native
  el.matches(selector);

• clone

  深拷贝被选元素。（生成被选元素的副本，包含子节点、文本和属性。）

  //jquery
  $el.clone();
  
  //native
  //深拷贝添加参数'true'
  el.clonenode();

• empty

  移除所有子节点

  //jquery
  $el.empty();
  
  //native
  el.innerhtml = '';

• wrap

  把每个被选元素放置在指定的html结构中。

  //jquery
  $(".inner").wrap('<div class="wrapper"></div>');
  
  //native
  array.prototype.foreach.call(document.queryselector('.inner'), (el) => {
    const wrapper = document.createelement('div');
    wrapper.classname = 'wrapper';
    el.parentnode.insertbefore(wrapper, el);
    el.parentnode.removechild(el);
    wrapper.appendchild(el);
  });

• unwrap

  移除被选元素的父元素的dom结构

  // jquery
  $('.inner').unwrap();
  
  // native
  array.prototype.foreach.call(document.queryselectorall('.inner'), (el) => {
        let elparentnode = el.parentnode
  
        if(elparentnode !== document.body) {
            elparentnode.parentnode.insertbefore(el, elparentnode)
            elparentnode.parentnode.removechild(elparentnode)
        }
  });

• replacewith

  用指定的元素替换被选的元素

  //jquery
  $('.inner').replacewith('<div class="outer"></div>');
  
  //native
  array.prototype.foreach.call(document.queryselectorall('.inner'),(el) => {
    const outer = document.createelement("div");
    outer.classname = "outer";
    el.parentnode.insertbefore(outer, el);
    el.parentnode.removechild(el);
  });

• simple parse

  解析 html/svg/xml 字符串

  // jquery
  $(`<ol>
    <li>a</li>
    <li>b</li>
  </ol>
  <ol>
    <li>c</li>
    <li>d</li>
  </ol>`);
  
  // native
  range = document.createrange();
  parse = range.createcontextualfragment.bind(range);
  
  parse(`<ol>
    <li>a</li>
    <li>b</li>
  </ol>
  <ol>
    <li>c</li>
    <li>d</li>
  </ol>`);

ajax

fetch api 是用于替换 xmlhttprequest 处理 ajax 的新标准，chrome 和 firefox 均支持，旧浏览器可以使用 polyfills 提供支持。

ie9+ 请使用 ，ie8+ 请使用 ，jsonp 请使用 。

• 从服务器读取数据并替换匹配元素的内容。

  // jquery
  $(selector).load(url, completecallback)
  
  // native
  fetch(url).then(data => data.text()).then(data => {
    document.queryselector(selector).innerhtml = data
  }).then(completecallback)

events

完整地替代命名空间和事件代理，链接到

• document ready by domcontentloaded

  // jquery
  $(document).ready(eventhandler);
  
  // native
  // 检测 domcontentloaded 是否已完成
  if (document.readystate !== 'loading') {
    eventhandler();
  } else {
    document.addeventlistener('domcontentloaded', eventhandler);
  }

• 使用 on 绑定事件

  // jquery
  $el.on(eventname, eventhandler);
  
  // native
  el.addeventlistener(eventname, eventhandler);

• 使用 off 解绑事件

  // jquery
  $el.off(eventname, eventhandler);
  
  // native
  el.removeeventlistener(eventname, eventhandler);

• trigger

  // jquery
  $(el).trigger('custom-event', {key1: 'data'});
  
  // native
  if (window.customevent) {
    const event = new customevent('custom-event', {detail: {key1: 'data'}});
  } else {
    const event = document.createevent('customevent');
    event.initcustomevent('custom-event', true, true, {key1: 'data'});
  }
  
  el.dispatchevent(event);

utilities

大部分实用工具都能在 native api 中找到. 其他高级功能可以选用专注于该领域的稳定性和性能都更好的库来代替，推荐 。

• 基本工具

  • isarray

  检测参数是不是数组。

  // jquery
  $.isarray(range);
  
  // native
  array.isarray(range);

  • iswindow

  检测参数是不是 window。

  // jquery
  $.iswindow(obj);
  
  // native
  function iswindow(obj) {
    return obj !== null && obj !== undefined && obj === obj.window;
  }

  • inarray

  在数组中搜索指定值并返回索引 (找不到则返回 -1)。

  // jquery
  $.inarray(item, array);
  
  // native
  array.indexof(item) > -1;
  
  // es6-way
  array.includes(item);

  • isnumeric

  检测传入的参数是不是数字。
  use typeof to decide the type or the type example for better accuracy.

  // jquery
  $.isnumeric(item);
  
  // native
  function isnumeric(n) {
    return !isnan(parsefloat(n)) && isfinite(n);
  }

  • isfunction

  检测传入的参数是不是 javascript 函数对象。

  // jquery
  $.isfunction(item);
  
  // native
  function isfunction(item) {
    if (typeof item === 'function') {
      return true;
    }
    var type = object.prototype.tostring(item);
    return type === '[object function]' || type === '[object generatorfunction]';
  }

  • isemptyobject

  检测对象是否为空 (包括不可枚举属性).

  // jquery
  $.isemptyobject(obj);
  
  // native
  function isemptyobject(obj) {
    return object.keys(obj).length === 0;
  }

  • isplainobject

  检测是不是扁平对象 (使用 “{}” 或 “new object” 创建).

  // jquery
  $.isplainobject(obj);
  
  // native
  function isplainobject(obj) {
    if (typeof (obj) !== 'object' || obj.nodetype || obj !== null && obj !== undefined && obj === obj.window) {
      return false;
    }
  
    if (obj.constructor &&
        !object.prototype.hasownproperty.call(obj.constructor.prototype, 'isprototypeof')) {
      return false;
    }
  
    return true;
  }

  • extend

  合并多个对象的内容到第一个对象。
  object.assign 是 es6 api，也可以使用 。

  // jquery
  $.extend({}, defaultopts, opts);
  
  // native
  object.assign({}, defaultopts, opts);

  • trim

  移除字符串头尾空白。

  // jquery
  $.trim(string);
  
  // native
  string.trim();

  • map

  将数组或对象转化为包含新内容的数组。

  // jquery
  $.map(array, (value, index) => {
  });
  
  // native
  array.map((value, index) => {
  });

  • each

  轮询函数，可用于平滑的轮询对象和数组。

  // jquery
  $.each(array, (index, value) => {
  });
  
  // native
  array.foreach((value, index) => {
  });

  • grep

  找到数组中符合过滤函数的元素。

  // jquery
  $.grep(array, (value, index) => {
  });
  
  // native
  array.filter((value, index) => {
  });

  • type

  检测对象的 javascript [class] 内部类型。

  // jquery
  $.type(obj);
  
  // native
  function type(item) {
    const retypeof = /(?:^\[object\s(.*?)\]$)/;
    return object.prototype.tostring.call(item)
      .replace(retypeof, '$1')
      .tolowercase();
  }

  • merge

  合并第二个数组内容到第一个数组。

  // jquery
  $.merge(array1, array2);
  
  // native
  // 使用 concat，不能去除重复值
  function merge(...args) {
    return [].concat(...args)
  }
  
  // es6，同样不能去除重复值
  array1 = [...array1, ...array2]
  
  // 使用 set，可以去除重复值
  function merge(...args) {
    return array.from(new set([].concat(...args)))
  }

  • now

  返回当前时间的数字呈现。

  // jquery
  $.now();
  
  // native
  date.now();

  • proxy

  传入函数并返回一个新函数，该函数绑定指定上下文。

  // jquery
  $.proxy(fn, context);
  
  // native
  fn.bind(context);

  • makearray

  类数组对象转化为真正的 javascript 数组。

  // jquery
  $.makearray(arraylike);
  
  // native
  array.prototype.slice.call(arraylike);
  
  // es6-way
  array.from(arraylike);

• 包含

  检测 dom 元素是不是其他 dom 元素的后代.

  // jquery
  $.contains(el, child);
  
  // native
  el !== child && el.contains(child);

• globaleval

  全局执行 javascript 代码。

  // jquery
  $.globaleval(code);
  
  // native
  function globaleval(code) {
    const script = document.createelement('script');
    script.text = code;
  
    document.head.appendchild(script).parentnode.removechild(script);
  }
  
  // use eval, but context of eval is current, context of $.globaleval is global.
  eval(code);

• 解析

  • parsehtml

  解析字符串为 dom 节点数组.

  // jquery
  $.parsehtml(htmlstring);
  
  // native
  function parsehtml(string) {
    const context = document.implementation.createhtmldocument();
  
    // set the base href for the created document so any parsed elements with urls
    // are based on the document's url
    const base = context.createelement('base');
    base.href = document.location.href;
    context.head.appendchild(base);
  
    context.body.innerhtml = string;
    return context.body.children;
  }

  • parsejson

  传入格式正确的 json 字符串并返回 javascript 值.

  // jquery
  $.parsejson(str);
  
  // native
  json.parse(str);

promises

promise 代表异步操作的最终结果。jquery 用它自己的方式处理 promises，原生 javascript 遵循 promises/a+ 标准实现了最小 api 来处理 promises。

• done, fail, always

  done 会在 promise 解决时调用，fail 会在 promise 拒绝时调用，always 总会调用。

  // jquery
  $promise.done(donecallback).fail(failcallback).always(alwayscallback)
  
  // native
  promise.then(donecallback, failcallback).then(alwayscallback, alwayscallback)

• when

  when 用于处理多个 promises。当全部 promises 被解决时返回，当任一 promise 被拒绝时拒绝。

  // jquery
  $.when($promise1, $promise2).done((promise1result, promise2result) => {
  });
  
  // native
  promise.all([$promise1, $promise2]).then([promise1result, promise2result] => {});

• deferred

  deferred 是创建 promises 的一种方式。

  // jquery
  function asyncfunc() {
    const defer = new $.deferred();
    settimeout(() => {
      if(true) {
        defer.resolve('some_value_computed_asynchronously');
      } else {
        defer.reject('failed');
      }
    }, 1000);
  
    return defer.promise();
  }
  
  // native
  function asyncfunc() {
    return new promise((resolve, reject) => {
      settimeout(() => {
        if (true) {
          resolve('some_value_computed_asynchronously');
        } else {
          reject('failed');
        }
      }, 1000);
    });
  }
  
  // deferred way
  function defer() {
    const deferred = {};
    const promise = new promise((resolve, reject) => {
      deferred.resolve = resolve;
      deferred.reject = reject;
    });
  
    deferred.promise = () => {
      return promise;
    };
  
    return deferred;
  }
  
  function asyncfunc() {
    const defer = defer();
    settimeout(() => {
      if(true) {
        defer.resolve('some_value_computed_asynchronously');
      } else {
        defer.reject('failed');
      }
    }, 1000);
  
    return defer.promise();
  }

animation

• show & hide

  // jquery
  $el.show();
  $el.hide();
  
  // native
  // 更多 show 方法的细节详见 https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#l363
  el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
  el.style.display = 'none';

• toggle

  显示或隐藏元素。

  // jquery
  $el.toggle();
  
  // native
  if (el.ownerdocument.defaultview.getcomputedstyle(el, null).display === 'none') {
    el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
  } else {
    el.style.display = 'none';
  }

• fadein & fadeout

  // jquery
  $el.fadein(3000);
  $el.fadeout(3000);
  
  // native
  el.style.transition = 'opacity 3s';
  // fadein
  el.style.opacity = '1';
  // fadeout
  el.style.opacity = '0';

• fadeto

  调整元素透明度。

  // jquery
  $el.fadeto('slow',0.15);
  // native
  el.style.transition = 'opacity 3s'; // 假设 'slow' 等于 3 秒
  el.style.opacity = '0.15';

• fadetoggle

  动画调整透明度用来显示或隐藏。

  // jquery
  $el.fadetoggle();
  
  // native
  el.style.transition = 'opacity 3s';
  const { opacity } = el.ownerdocument.defaultview.getcomputedstyle(el, null);
  if (opacity === '1') {
    el.style.opacity = '0';
  } else {
    el.style.opacity = '1';
  }

• slideup & slidedown

  // jquery
  $el.slideup();
  $el.slidedown();
  
  // native
  const originheight = '100px';
  el.style.transition = 'height 3s';
  // slideup
  el.style.height = '0px';
  // slidedown
  el.style.height = originheight;

• slidetoggle

  滑动切换显示或隐藏。

  // jquery
  $el.slidetoggle();
  
  // native
  const originheight = '100px';
  el.style.transition = 'height 3s';
  const { height } = el.ownerdocument.defaultview.getcomputedstyle(el, null);
  if (parseint(height, 10) === 0) {
    el.style.height = originheight;
  }
  else {
   el.style.height = '0px';
  }

• animate

  执行一系列 css 属性动画。

  // jquery
  $el.animate({ params }, speed);
  
  // native
  el.style.transition = 'all ' + speed;
  object.keys(params).foreach((key) =>
    el.style[key] = params[key];
  )

alternatives

• 你可能不需要 jquery (you might not need jquery) - 如何使用原生 javascript 实现通用事件，元素，ajax 等用法。
• 以及 - 在 npm 上提供独立 dom 模块的组织

browser support

latest ✔	latest ✔	10+ ✔	latest ✔	6.1+ ✔

license

mit

原文链接：https://github.com/nefe/you-dont-need-jquery