查看: 753|回复: 0

[JavaScript/JQuery] jQuery is out of date

发表于 2017-4-20 08:00:01

在我看来,jQuery确实已经过时了。本项目总结了绝大部分 jQuery API 替代的方法,类似项目You-Dont-Need-jQuery,并会再此基础上进行很多的补充。写这个项目主要想让自己和大家增进对javascript原生api的理解,也可以作为一个"原生jquery"的api文档随时查看。兼容ie9及以上浏览器,如不支持ie9会特别说明。

原文地址 https://github.com/fa-ge/jQuery-is-out-of-date

目录

Regulation

DOM Manipulation

Query Selector

Ajax

Events

Utilities

Animation

Regulation
  1. function $(selector) {
  2. return document.querySelector(selector)
  3. }
  4. function $$(selector) {
  5. return Array.prototype.slice.call(document.querySelectorAll(selector))
  6. }
复制代码

如果在jQuery示例下的$是jquery对象,在Native示例下的$是以上的实现。相当于实现了chrome控制台上$,$$方法。

DOM Manipulation

很多人一直认为jQuery还没有过时的其中一个原因是在DOM操作上非常方便。接下来比较一下。

add

添加元素到匹配的元素集合。

  1. // jQuery
  2. $(selector).add($(newEl))
  3. // Native
  4. $$(selector).push(newEl)
复制代码
addClass

为每个匹配的元素添加指定的样式类名

  1. // jQuery
  2. $(el).addClass(className)
  3. // Native (IE 10+ support)
  4. el.classList.add(className)
复制代码
after

在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点。

  1. // jQuery
  2. $(el).after('<p></p>')
  3. // Native (Html string)
  4. el.insertAdjacentHTML('afterend', '<p></p>')
  5. // Native (Element)
  6. el.insertAdjacentElement('afterend', newEl)
  7. // Native (Element)
  8. el.parentNode.insertBefore(newEl, el.nextSibling)
复制代码
append

在每个匹配元素里面的末尾处插入参数内容。

  1. // jQuery
  2. $(el).append('<p></p>')
  3. // Native (Html string)
  4. el.insertAdjacentHTML('beforeend', '<p></p>')
  5. // Native (Element)
  6. el.insertAdjacentElement('beforeend', newEl)
  7. // Native (Element)
  8. el.appendChild(newEl)
复制代码
appendTo

与append相反

attr

获取匹配的元素集合中的第一个元素的属性的值。设置每一个匹配元素的一个或多个属性。

  1. // jQuery
  2. $(el).attr('foo')
  3. // Native
  4. el.getAttribute('foo')
  5. // jQuery
  6. $(el).attr('foo', 'bar')
  7. // Native
  8. el.setAttribute('foo', 'bar')
复制代码
before

根据参数设定,在匹配元素的前面插入内容(外部插入)

  1. // jQuery
  2. $(el).before('<p></p>')
  3. // Native (Html string)
  4. el.insertAdjacentHTML('beforebegin', '<p></p>')
  5. // Native (Element)
  6. el.insertAdjacentElement('beforebegin', newEl)
  7. // Native (Element)
  8. el.parentNode.insertBefore(newEl, el)
复制代码
children

获得匹配元素集合中每个元素的子元素,选择器选择性筛选。

  1. // jQuery
  2. $(el).children()
  3. // Native
  4. el.children
复制代码
clone

创建一个匹配的元素集合的深度拷贝副本。

  1. // jQuery
  2. $(el).clone()
  3. // Native
  4. el.cloneNode()
  5. // For Deep clone , set param as `true`
复制代码
closest

从元素本身开始,在DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素。以数组的形式返回与选择器相匹配的所有元素,从当前元素开始,在 DOM 树中向上遍历。

  1. // jQuery
  2. $el.closest(selector)
  3. // Native - Only latest, NO IE
  4. el.closest(selector)
  5. // Native
  6. function closest(el, selector = false) {
  7. const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector
  8. do {
  9. if (matchesSelector.call(el, selector)) {
  10. return el
  11. }
  12. } while ((el = el.parentElement) !== null)
  13. return null
  14. }
复制代码
contents

获得匹配元素集合中每个元素的子元素,包括文字和注释节点。

  1. // jQuery
  2. $(el).contents()
  3. // Native
  4. el.childNodes
复制代码
css

获取匹配元素集合中的第一个元素的样式属性的值设置每个匹配元素的一个或多个CSS属性。

  1. // jQuery
  2. $(el).css('color')
  3. // Native
  4. // 注意:此处为了解决当 style 值为 auto 时,返回 auto 的问题
  5. const win = el.ownerDocument.defaultView
  6. // null 的意思是不返回伪类元素
  7. win.getComputedStyle(el, null).color
  8. // jQuery
  9. $(el).css({ color: '#f01' })
  10. // Native
  11. el.style.color = '#f01'
  12. // 一次性设置多个样式
  13. // jQuery
  14. $(el).css({ color: '#f01', 'background-color': '#000' })
  15. // Native
  16. const cssObj = {color: '#f01', backgroundColor: '#000'}
  17. for (let key in cssObj) {
  18. el.style[key] = cssObj[key]
  19. }
  20. // Native
  21. const cssText = 'color: #f01; background-color: #000'
  22. el.style.cssText += cssText
复制代码
empty

从DOM中移除集合中匹配元素的所有子节点。

  1. // jQuery
  2. $(el).empty()
  3. // Native
  4. el.innerHTML = ''
复制代码
filter

筛选元素集合中匹配表达式 或 通过传递函数测试的 那些元素集合。

  1. // jQuery
  2. $(selector).filter(filterFn)
  3. // Native
  4. $$(selector).filter(filterFn)
复制代码
find

通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代。

  1. // jQuery
  2. $(el).find(selector)
  3. // Native
  4. el.querySelectorAll(selector)
复制代码
has

筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素。

  1. // jQuery
  2. $(selector).has('p')
  3. // Native
  4. $$(selector).filter(el => el.querySelector('p') !== null)
复制代码
hasClass

确定任何一个匹配元素是否有被分配给定的(样式)类。

  1. // jQuery
  2. $(el).hasClass(className)
  3. // Native (IE 10+ support)
  4. el.classList.contains(className)
复制代码
height

获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。

  1. // jQuery window
  2. $(window).height()
  3. // Native
  4. window.innerHeight
  5. // jQuery document
  6. $(document).height()
  7. // Native
  8. const body = document.body
  9. const html = document.documentElement
  10. const height = Math.max(
  11. body.offsetHeight,
  12. body.scrollHeight,
  13. html.clientHeight,
  14. html.offsetHeight,
  15. html.scrollHeight
  16. )
  17. // jQuery Element (it's `height` always equals to content height)
  18. $(el).height()
  19. // Native
  20. function getHeight(el) {
  21. const styles = window.getComputedStyle(el)
  22. const height = el.clientHeight
  23. const paddingTop = parseFloat(styles.paddingTop)
  24. const paddingBottom = parseFloat(styles.paddingBottom)
  25. return height - paddingTop - paddingBottom
  26. }
  27. // Native
  28. // when `border-box`, it's `height` === (content height) + padding + border; when `content-box`, it's `height` === (content height)
  29. getComputedStyle(el, null).height
复制代码
html

获取集合中第一个匹配元素的HTML内容 设置每一个匹配元素的html内容。

  1. // jQuery
  2. $(el).html()
  3. // Native
  4. el.innerHTML
  5. // jQuery
  6. $(el).html(htmlString)
  7. // Native
  8. el.innerHTML = htmlString
复制代码
innerHeight

为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括border。

  1. // jQuery
  2. $(el).innerHeight()
  3. // Native
  4. el.clientHeight()
复制代码
innerWidth

为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding,但是不包括border。

  1. // jQuery
  2. $(el).innerWidth()
  3. // Native
  4. el.clientWidth()
复制代码
insertAfter

与after相反

insertBefore

与before相反

is

判断当前匹配的元素集合中的元素,是否为一个选择器,DOM元素,或者jQuery对象,如果这些元素至少一个匹配给定的参数,那么返回true。

  1. // jQuery
  2. $(el).is(selector)
  3. // Native
  4. (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector)
复制代码
next

取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素。

  1. // jQuery
  2. $(el).next()
  3. // Native
  4. el.nextElementSibling
复制代码
nextAll

获得每个匹配元素集合中所有下面的同辈元素,选择性筛选的选择器。

  1. // jQuery
  2. $(el).nextAll()
  3. // Native
  4. const nextAll = []
  5. while((el = el.nextElementSibling) !== null) {
  6. nextAll.push(el)
  7. }
复制代码
not

从匹配的元素集合中移除指定的元素。

  1. // jQuery
  2. $(selector).not(matches)
  3. // Native
  4. const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector
  5. $$(selector).filter(el => !matchesSelector.call(el, matches))
复制代码
offset

在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档。 设置匹配的元素集合中每一个元素的坐标, 坐标相对于文档。

  1. // jQuery
  2. $(el).offset()
  3. // Native
  4. const elClientRect = el.getBoundingClientRect()
  5. {
  6. top: elClientRect.top + window.pageYOffset - document.documentElement.clientTop,
  7. left: elClientRect.left + window.pageXOffset - document.documentElement.clientLeft
  8. }
  9. // jQuery
  10. $(el).offset(10, 10)
  11. // Native
  12. const elClientRect = el.getBoundingClientRect()
  13. const elTop = 10 - elClientRect.top - document.documentElement.clientTop
  14. const elLeft = 10 - elClientRect.left - document.documentElement.clientLeft
  15. el.style.cssText += `position: relative;top: ${elTop}px;left: ${elLeft}px;`
复制代码
offsetParent
  1. // jQuery
  2. $(el).offsetParent()
  3. // Native
  4. el.offsetParent || el
复制代码
outerHeight

获取元素集合中第一个元素的当前计算高度值,包括padding,border和选择性的margin。返回一个整数(不包含“px”)表示的值 ,或如果在一个空集合上调用该方法,则会返回 null。

  1. // jQuery
  2. $(el).outerHeight()
  3. // Native
  4. el.offsetHeight
  5. // jQuery
  6. $(el).outerHeight(true)
  7. // Native
  8. const win = el.ownerDocument.defaultView
  9. const {marginTop, margintBottom} = win.getComputedStyle(el, null)
  10. el.offsetHeight + parseFloat(marginTop) + parseFloat(margintBottom) === $(el).outerHeight(true) // true
复制代码
outerWidth

与outerHeight类似。

parent

取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器。

  1. // jQuery
  2. $(el).parent()
  3. // Native
  4. el.parentNode
复制代码
parents

获得集合中每个匹配元素的祖先元素,可以提供一个可选的选择器作为参数。

  1. // jQuery
  2. $(el).parents(selector)
  3. // Native
  4. function parents(el, selector = '*') {
  5. const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector
  6. const parentsMatch = []
  7. while ((el = el.parentElement) !== null) {
  8. if (matchesSelector.call(el, selector)) {
  9. parentsMatch.push(el)
  10. }
  11. }
  12. return parentsMatch
  13. }
复制代码
parentsUntil

查找当前元素的所有的前辈元素,直到遇到选择器, DOM 节点或 jQuery 对象匹配的元素为止,但不包括这些元素。

  1. // jQuery
  2. $(el).parentsUntil(selector)
  3. // Native
  4. function parentsUntil(el, selector = false) {
  5. const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector
  6. const parentsMatch = []
  7. while ((el = el.parentElement) !== null && !matchesSelector.call(el, selector)) {
  8. parentsMatch.push(el)
  9. }
  10. return parentsMatch
  11. }
复制代码
position

获取匹配元素中第一个元素的当前坐标,相对于offset parent的坐标。( offset parent指离该元素最近的而且被定位过的祖先元素 )

  1. // jQuery
  2. $(el).position()
  3. // Native
  4. { left: el.offsetLeft, top: el.offsetTop }
复制代码
prepend

将参数内容插入到每个匹配元素的前面(元素内部)。

  1. // jQuery
  2. $(el).prepend('<p></p>')
  3. // Native (HTML string)
  4. el.insertAdjacentHTML('afterbegin', '<p></p>')
  5. // Native (Element)
  6. el.insertBefore(newEl, el.firstChild)
复制代码
prependTo

与prepend相反

prev

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。选择性筛选的选择器。

与next类似

prevAll

获得集合中每个匹配元素的所有前面的兄弟元素,选择性筛选的选择器。

与nextAll类似

prevUntil

获取每个元素但不包括选择器,DOM节点,或者jQuery对象匹配的元素的所有前面的兄弟元素。

与nextUntil类似

remove

将匹配元素集合从DOM中删除。(注:同时移除元素上的事件及 jQuery 数据。)

  1. // jQuery
  2. $(el).remove()
  3. // Native
  4. el.parentNode.removeChild(el)
  5. // Native
  6. el.outerHTML = ''
复制代码
removeAttr

为匹配的元素集合中的每个元素中移除一个属性(attribute)。

  1. // jQuery
  2. $(el).removeAttr(attr)
  3. // Native
  4. el.removeAttribute(attr)
复制代码
removeClass

移除集合中每个匹配元素上一个,多个或全部样式。

  1. // jQuery
  2. $(el).removeClass(className)
  3. // Native (IE 10+ support)
  4. el.classList.remove(className)
复制代码
replaceAll

与replaceWith相反

replaceWith

用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

  1. // jQuery
  2. $(el).replaceWith('<p></p>')
  3. // Native (HTML string)
  4. el.outerHTML = '<p></p>'
  5. // Native (Element)
  6. el.parentNode.replaceChild(newEl, el)
复制代码
scrollLeft

与scrollTop一样

scrollTop

获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置。设置每个匹配元素的垂直滚动条位置

  1. // jQuery
  2. $(el).scrollTop()
  3. // Native (el is window)
  4. Math.max(document.documentElement.scrollTop, document.body.scrollTop)
  5. or
  6. window.pageYOffset
  7. // Native (el is not window)
  8. el.scrollTop
  9. // jQuery
  10. $(el).scrollTop(10)
  11. // Native (el is window)
  12. document.documentElement.scrollTop = 10
  13. document.body.scrollTop = 10
  14. // Native (el is not window)
  15. el.scrollTop = 10
复制代码
siblings

获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器。。

  1. // jQuery
  2. $(el).siblings()
  3. // Native
复制代码
slice

根据指定的下标范围,过滤匹配的元素集合,并生成一个新的 jQuery 对象。

  1. // jQuery
  2. $(selector).slice(1, 6)
  3. // Native
  4. $$(selector).slice(1, 6)
复制代码
text

得到匹配元素集合中每个元素的合并文本,包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。

  1. // jQuery
  2. $(el).text()
  3. // Native
  4. el.textContent
  5. // jQuery
  6. $(el).text(string)
  7. // Native
  8. el.textContent = string
复制代码
toggleClass

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类。

  1. // jQuery
  2. $(el).toggleClass(className)
  3. // Native
  4. el.classList.toggle(className)
复制代码
unwrap

将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。

  1. // jQuery
  2. $(el).unwrap()
  3. // Native
  4. const parent = el.parentNode
  5. parent.outerHTML = parent.innerHTML
复制代码
val

获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。

  1. // jQuery
  2. $(el).val()
  3. // Native
  4. el.value
  5. // jQuery
  6. $(el).val(value)
  7. // Native
  8. el.value = value
复制代码
width

与height类似

wrap

在每个匹配的元素外层包上一个html元素。

  1. // jQuery
  2. $(el).wrap('<div class="wrapper"></div>')
  3. // Native
  4. const wrapper = document.createElement('div')
  5. wrapper.className = 'wrapper'
  6. el.parentNode.insertBefore(wrapper, el)
  7. el.parentNode.removeChild(el)
  8. wrapper.appendChild(el)
  9. // Native
  10. // 这种性能比较差 https://jsperf.com/outerhtml-appendchild
  11. el.outerHTML = `<div class="wrapper">${el.outerHTML}</div>`
复制代码
Query Selector

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

document.querySelector 返回第一个匹配的 Element

document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 [].slice.call() 把它转成 Array

如果匹配不到任何 Element,jQuery 返回空数组 [],但 document.querySelector 返回 null,注意空指针异常。

注意:document.querySelector 和 document.querySelectorAll 性能很。如果想提高性能,尽量使用 document.getElementById、document.getElementsByClassName 或 document.getElementsByTagName。

以下只实现和jquery有所区别的api

:contains

选择所有包含指定文本的元素。

  1. // jQuery
  2. $('selector:contains("metchString")')
  3. // Native
  4. $$('selector').filter(el => el.textContent.indexOf('metchString') !== -1)
复制代码
:emtpy

选择所有没有子元素的元素(包括文本节点)。

  1. // jQuery
  2. $('selector:empty')
  3. // Native
  4. $$('selector').filter(el => el.innerHTML === '')
复制代码
:even

选择索引值为偶数的元素,从 0 开始计数。

  1. // jQuery
  2. $('selector:even')
  3. // Native
  4. $$('selector').filter((el, index) => (index & 1) === 0)
复制代码
:focus

选择当前获取焦点的元素。

  1. // jQuery
  2. $(':focus')
  3. // Native
  4. document.activeElement
复制代码
:gt

选择匹配集合中所有大于给定index(索引值)的元素。

  1. // jQuery
  2. $('selector:gt(2)')
  3. // Native
  4. $$('selector').filter((el, index) => index > 2)
复制代码
:has

与has类似

:header

选择所有标题元素,像h1, h2, h3 等.

  1. // jQuery
  2. $('selector:header')
  3. // Native
  4. $$('selector').filter(el => /^h\d$/i.test(el.nodeName))
复制代码
:lt

选择匹配集合中所有索引值小于给定index参数的元素。

  1. // jQuery
  2. $('selector:lt(2)')
  3. // Native
  4. $$('selector').filter((el, index) => index < 2)
复制代码
:not

与not类似

:odd

选择索引值为奇数元素,从 0 开始计数。

  1. // jQuery
  2. $('selector:odd')
  3. // Native
  4. $$('selector').filter((el, index) => (index & 1) === 1)
复制代码
only-child

如果某个元素是其父元素的唯一子元素,那么它就会被选中。

  1. // jQuery
  2. $('selector:only-child')
  3. // Native
  4. $$('selector').filter(el => el.previousElementSibling === null && el.nextElementSibling === null)
  5. // Native
  6. $$('selector').filter(el => el.parentNode.children.length === 1)
复制代码
:only-of-type

选择器匹配属于其父元素的特定类型的唯一子元素的每个元素。

  1. // jQuery
  2. $('selector:only-of-type')
  3. // Native
  4. $$('selector').filter(el => {
  5. for(let child of el.parentNode.children) {
  6. if (child !== el && child.nodeName === el.nodeName) {
  7. return true
  8. }
  9. }
  10. return false
  11. })
复制代码
:parent

选择所有含有子元素或者文本的父级元素。

  1. // jQuery
  2. $('selector:parent')
  3. // Native
  4. $$('selector').filter(el => el.innerHTML !== '')
复制代码
:selected

获取 select 元素中所有被选中的元素。

  1. // jQuery
  2. $('select option:selected')
  3. // Native (single)
  4. $('select option')[$('select').selectedIndex]
  5. // Native (multiple)
  6. $$('select option').filter(el => el.selected)
复制代码
Ajax Events Utilities contains

检查一个DOM元素是另一个DOM元素的后代。

  1. // jQuery
  2. $.contains(el, child)
  3. // Native
  4. el !== child && el.contains(child)
复制代码
each

一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。

  1. // jQuery
  2. $.each(array, (index, value) => {})
  3. // Native
  4. array.forEach((value, index) => {})
复制代码
extend

将两个或更多对象的内容合并到第一个对象。

  1. // jQuery
  2. $.extend({}, {a: 1}, {b: 2}) // {a: 1, b: 2}
  3. // ES6-way
  4. Object.assign({}, {a: 1}, {b: 2}) // {a: 1, b: 2}
复制代码
globalEval

在全局上下文下执行一些JavaScript代码。

  1. // jQuery
  2. $.globaleval(code)
  3. // Native
  4. function Globaleval(code) {
  5. const script = document.createElement('script')
  6. script.text = code
  7. document.head.appendChild(script).parentNode.removeChild(script)
  8. }
  9. // Use eval, but context of eval is current, context of $.Globaleval is global.
  10. eval(code)
复制代码
grep

查找满足过滤函数的数组元素。原始数组不受影响。

  1. // jQuery
  2. $.grep([10,11,3,4], n => n > 9)
  3. // Native
  4. [10,11,3,4].filter(n => n > 9)
复制代码
inArray

在数组中查找指定值并返回它的索引(如果没有找到,则返回-1)。

  1. // jQuery
  2. $.inArray(item, array)
  3. // Native
  4. array.indexOf(item) > -1
  5. // ES6-way
  6. array.includes(item)
复制代码
isArray

确定的参数是一个数组。

  1. // jQuery
  2. $.isArray(array)
  3. // Native
  4. Array.isArray(array)
复制代码
isEmptyObject

检查对象是否为空(不包含任何属性)。

  1. // jQuery
  2. $.isEmptyObject(obj)
  3. // Native
  4. function isEmptyObject(obj) {
  5. return Object.keys(obj).length === 0
  6. }
复制代码
isFunction

确定参数是否为一个Javascript 函数。

  1. // jQuery
  2. $.isFunction(item)
  3. // Native
  4. function isFunction(item) {
  5. if (typeof item === 'function') {
  6. return true
  7. }
  8. var type = Object.prototype.toString(item)
  9. return type === '[object Function]' || type === '[object GeneratorFunction]'
  10. }
复制代码
isNumeric

确定它的参数是否是一个数字。

  1. // jQuery
  2. $.isNumeric(item)
  3. // Native
  4. function isNumeric(value) {
  5. var type = typeof value
  6. return (type === 'number' || type === 'string') && !isNaN(value - parseFloat(value))
  7. }
复制代码
isPlainObject

测试对象是否是纯粹的对象(通过 "{}" 或者 "new Object" 创建的)

  1. // jQuery
  2. $.isPlainObject(obj)
  3. // Native
  4. function isPlainObject(obj) {
  5. if (typeof (obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) {
  6. return false
  7. }
  8. if (obj.constructor &&
  9. !Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
  10. return false
  11. }
  12. return true
  13. }
复制代码
isWindow

确定参数是否为一个window对象。

  1. // jQuery
  2. $.isWindow(obj)
  3. // Native
  4. function isWindow(obj) {
  5. return obj !== null && obj !== undefined && obj === obj.window
  6. }
  7. // jquery源码中是这么判断对象是否为window的,我的理解是代码可能会跑到服务器上,因为服务器上是没有window对象的。所以这么判断
复制代码
makeArray

转换一个类似数组的对象成为真正的JavaScript数组。

  1. // jQuery
  2. $.makeArray(arrayLike)
  3. // Native
  4. Array.prototype.slice.call(arrayLike)
  5. // ES6-way
  6. Array.from(arrayLike)
复制代码
map

将一个数组中的所有元素转换到另一个数组中。

  1. // jQuery
  2. $.map(array, (value, index) => {
  3. })
  4. // Native
  5. array.map((value, index) => {
  6. })
复制代码
merge

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

  1. // jQuery
  2. $.merge(array1, array2)
  3. // Native
  4. // But concat function doesn't remove duplicate items.
  5. function merge(...args) {
  6. return [].concat(...args)
  7. }
复制代码
now

返回一个数字,表示当前时间。

  1. // jQuery
  2. $.now()
  3. // Native
  4. Date.now()
  5. // Native
  6. +new Date()
  7. // Native
  8. new Date().getTime()
复制代码
parseHTML

将字符串解析到一个DOM节点的数组中。

  1. // jQuery
  2. $.parseHTML(string)
  3. // Native
  4. function parseHTML(string) {
  5. const context = document.implementation.createHTMLDocument()
  6. // Set the base href for the created document so any parsed elements with URLs
  7. // are based on the document's URL
  8. const base = context.createElement('base')
  9. base.href = document.location.href
  10. context.head.appendChild(base)
  11. context.body.innerHTML = string
  12. return context.body.childNodes
  13. }
  14. // Native (IE 10+ support)
  15. // 两者性能差不多 https://jsperf.com/parsehtml2
  16. function parseHTML(string) {
  17. const context = new DOMParser().parseFromString(string, "text/html")
  18. return context.body.childNodes
  19. }
复制代码
parseJSON

接受一个标准格式的 JSON 字符串,并返回解析后的 JavaScript 对象。

  1. // jQuery
  2. $.parseJSON(str)
  3. // Native
  4. JSON.parse(str)
复制代码
parseXML

解析一个字符串到一个XML文档。

  1. // jQuery
  2. jQuery.parseXML(xmlString)
  3. // Native
  4. new DOMParser().parseFromString(xmlString, 'application/xml')
复制代码
proxy

接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文语境。

  1. // jQuery
  2. $.proxy(fn, context)
  3. // Native
  4. fn.bind(context)
复制代码
trim

去掉字符串起始和结尾的空格。

  1. // jQuery
  2. $.trim(string)
  3. // Native
  4. string.trim()
复制代码
type

确定JavaScript 对象的类型[[Class]] 。

  1. // jQuery
  2. $.type(obj)
  3. // Native
  4. function type(item) {
  5. const reTypeOf = /(?:^\[object\s(.*?)\]$)/
  6. return Object.prototype.toString.call(item)
  7. .replace(reTypeOf, '$1')
  8. .toLowerCase()
  9. }
复制代码
Animation

有哪块错误的或者不懂得可以在github上提个issue。如果哪块有更好的解法可以pr。



回复

使用道具 举报