摘要：注同時(shí)移除元素上的事件及數(shù)據(jù)。其他對(duì)象通過(guò)其屬性名進(jìn)行迭代。原始數(shù)組不受影響。檢查對(duì)象是否為空不包含任何屬性。返回一個(gè)數(shù)字，表示當(dāng)前時(shí)間。兩者性能差不多接受一個(gè)標(biāo)準(zhǔn)格式的字符串，并返回解析后的對(duì)象。

在我看來(lái)，jQuery確實(shí)已經(jīng)過(guò)時(shí)了。本項(xiàng)目總結(jié)了絕大部分 jQuery API 替代的方法，類似項(xiàng)目You-Dont-Need-jQuery，并會(huì)再此基礎(chǔ)上進(jìn)行很多的補(bǔ)充。寫這個(gè)項(xiàng)目主要想讓自己和大家增進(jìn)對(duì)javascript原生api的理解，也可以作為一個(gè)"原生jquery"的api文檔隨時(shí)查看。兼容ie9及以上瀏覽器，如不支持ie9會(huì)特別說(shuō)明。

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

Regulation

DOM Manipulation

Query Selector

Ajax

Events

Utilities

Animation

function $(selector) {
  return document.querySelector(selector)
}

function $$(selector) {
  return Array.prototype.slice.call(document.querySelectorAll(selector))
}

如果在jQuery示例下的$是jquery對(duì)象，在Native示例下的$是以上的實(shí)現(xiàn)。相當(dāng)于實(shí)現(xiàn)了chrome控制臺(tái)上$，$$方法。

很多人一直認(rèn)為jQuery還沒(méi)有過(guò)時(shí)的其中一個(gè)原因是在DOM操作上非常方便。接下來(lái)比較一下。

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

// jQuery
$(selector).add($(newEl))

// Native
$$(selector).push(newEl)

為每個(gè)匹配的元素添加指定的樣式類名

// jQuery
$(el).addClass(className)

// Native (IE 10+ support)
el.classList.add(className)

在匹配元素集合中的每個(gè)元素后面插入?yún)?shù)所指定的內(nèi)容，作為其兄弟節(jié)點(diǎn)。

// jQuery
$(el).after("
")

// Native (Html string)
el.insertAdjacentHTML("afterend", "
")

// Native (Element)
el.insertAdjacentElement("afterend", newEl)

// Native (Element)
el.parentNode.insertBefore(newEl, el.nextSibling)

在每個(gè)匹配元素里面的末尾處插入?yún)?shù)內(nèi)容。

// jQuery
$(el).append("
")

// Native (Html string)
el.insertAdjacentHTML("beforeend", "
")

// Native (Element)
el.insertAdjacentElement("beforeend", newEl)

// Native (Element)
el.appendChild(newEl)

與append相反

獲取匹配的元素集合中的第一個(gè)元素的屬性的值。設(shè)置每一個(gè)匹配元素的一個(gè)或多個(gè)屬性。

// jQuery
$(el).attr("foo")

// Native
el.getAttribute("foo")

// jQuery
$(el).attr("foo", "bar")

// Native
el.setAttribute("foo", "bar")

根據(jù)參數(shù)設(shè)定，在匹配元素的前面插入內(nèi)容（外部插入）

// jQuery
$(el).before("
")

// Native (Html string)
el.insertAdjacentHTML("beforebegin", "
")

// Native (Element)
el.insertAdjacentElement("beforebegin", newEl)

// Native (Element)
el.parentNode.insertBefore(newEl, el)

獲得匹配元素集合中每個(gè)元素的子元素，選擇器選擇性篩選。

// jQuery
$(el).children()

// Native
el.children

創(chuàng)建一個(gè)匹配的元素集合的深度拷貝副本。

// jQuery
$(el).clone()

// Native
el.cloneNode()

// For Deep clone , set param as `true`

從元素本身開始，在DOM 樹上逐級(jí)向上級(jí)元素匹配，并返回最先匹配的祖先元素。以數(shù)組的形式返回與選擇器相匹配的所有元素，從當(dāng)前元素開始，在 DOM 樹中向上遍歷。

 // jQuery
$el.closest(selector)

// Native - Only latest, NO IE
el.closest(selector)

// Native
function closest(el, selector = false) {
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector
  do {
    if (matchesSelector.call(el, selector)) {
      return el
    }
  } while ((el = el.parentElement) !== null)
  return null
}

獲得匹配元素集合中每個(gè)元素的子元素，包括文字和注釋節(jié)點(diǎn)。

// jQuery
$(el).contents()

// Native
el.childNodes

獲取匹配元素集合中的第一個(gè)元素的樣式屬性的值設(shè)置每個(gè)匹配元素的一個(gè)或多個(gè)CSS屬性。

// jQuery
$(el).css("color")

// Native
// 注意：此處為了解決當(dāng) style 值為 auto 時(shí)，返回 auto 的問(wèn)題
const win = el.ownerDocument.defaultView

// null 的意思是不返回偽類元素
win.getComputedStyle(el, null).color

// jQuery
$(el).css({ color: "#f01" })

// Native
el.style.color = "#f01"

// 一次性設(shè)置多個(gè)樣式
// jQuery
$(el).css({ color: "#f01", "background-color": "#000" })

// Native
const cssObj = {color: "#f01", backgroundColor: "#000"}
for (let key in cssObj) {
  el.style[key] = cssObj[key]
}

// Native
const cssText = "color: #f01; background-color: #000"
el.style.cssText += cssText

從DOM中移除集合中匹配元素的所有子節(jié)點(diǎn)。

// jQuery
$(el).empty()

// Native
el.innerHTML = ""

篩選元素集合中匹配表達(dá)式 或 通過(guò)傳遞函數(shù)測(cè)試的 那些元素集合。

// jQuery
$(selector).filter(filterFn)

// Native
$$(selector).filter(filterFn)

通過(guò)一個(gè)選擇器，jQuery對(duì)象，或元素過(guò)濾，得到當(dāng)前匹配的元素集合中每個(gè)元素的后代。

// jQuery
$(el).find(selector)

// Native
el.querySelectorAll(selector)

篩選匹配元素集合中的那些有相匹配的選擇器或DOM元素的后代元素。

// jQuery
$(selector).has("p")

// Native
$$(selector).filter(el => el.querySelector("p") !== null)

確定任何一個(gè)匹配元素是否有被分配給定的（樣式）類。

// jQuery
$(el).hasClass(className)

// Native (IE 10+ support)
el.classList.contains(className)

獲取匹配元素集合中的第一個(gè)元素的當(dāng)前計(jì)算高度值。設(shè)置每一個(gè)匹配元素的高度值。

// jQuery window
$(window).height()

// Native
window.innerHeight

// jQuery document
$(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
)

// jQuery Element (it"s `height` always equals to content height)
$(el).height()

// Native
function getHeight(el) {
  const styles = window.getComputedStyle(el)
  const height = el.clientHeight
  const paddingTop = parseFloat(styles.paddingTop)
  const paddingBottom = parseFloat(styles.paddingBottom)
  return height - paddingTop - paddingBottom
}

// Native
// when `border-box`, it"s `height` === (content height) + padding + border; when `content-box`, it"s `height` === (content height)
getComputedStyle(el, null).height

獲取集合中第一個(gè)匹配元素的HTML內(nèi)容 設(shè)置每一個(gè)匹配元素的html內(nèi)容。

// jQuery
$(el).html()

// Native
el.innerHTML

// jQuery
$(el).html(htmlString)

// Native
el.innerHTML = htmlString

為匹配的元素集合中獲取第一個(gè)元素的當(dāng)前計(jì)算高度值,包括padding，但是不包括border。

// jQuery
$(el).innerHeight()

// Native
el.clientHeight()

為匹配的元素集合中獲取第一個(gè)元素的當(dāng)前計(jì)算寬度值,包括padding，但是不包括border。

// jQuery
$(el).innerWidth()

// Native
el.clientWidth()

與after相反

與before相反

判斷當(dāng)前匹配的元素集合中的元素，是否為一個(gè)選擇器，DOM元素，或者jQuery對(duì)象，如果這些元素至少一個(gè)匹配給定的參數(shù)，那么返回true。

// jQuery
$(el).is(selector)

// Native
(el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector)

取得匹配的元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合。如果提供一個(gè)選擇器，那么只有緊跟著的兄弟元素滿足選擇器時(shí)，才會(huì)返回此元素。

// jQuery
$(el).next()

// Native
el.nextElementSibling

獲得每個(gè)匹配元素集合中所有下面的同輩元素，選擇性篩選的選擇器。

// jQuery
$(el).nextAll()

// Native
const nextAll = []
while((el = el.nextElementSibling) !== null) {
  nextAll.push(el)
}

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

// jQuery
$(selector).not(matches)

// Native
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector
$$(selector).filter(el => !matchesSelector.call(el, matches))

在匹配的元素集合中，獲取的第一個(gè)元素的當(dāng)前坐標(biāo)，坐標(biāo)相對(duì)于文檔。 設(shè)置匹配的元素集合中每一個(gè)元素的坐標(biāo)， 坐標(biāo)相對(duì)于文檔。

// jQuery
$(el).offset()

// Native
const elClientRect = el.getBoundingClientRect()
{
  top: elClientRect.top + window.pageYOffset - document.documentElement.clientTop,
  left: elClientRect.left + window.pageXOffset - document.documentElement.clientLeft
}

// jQuery
$(el).offset(10, 10)

// Native
const elClientRect = el.getBoundingClientRect()
const elTop = 10 - elClientRect.top - document.documentElement.clientTop
const elLeft = 10 - elClientRect.left - document.documentElement.clientLeft
el.style.cssText += `position: relative;top: ${elTop}px;left: ${elLeft}px;`

// jQuery
$(el).offsetParent()

// Native
el.offsetParent || el

獲取元素集合中第一個(gè)元素的當(dāng)前計(jì)算高度值,包括padding，border和選擇性的margin。返回一個(gè)整數(shù)（不包含“px”）表示的值 ?，或如果在一個(gè)空集合上調(diào)用該方法，則會(huì)返回 null。

// jQuery
$(el).outerHeight()

// Native
el.offsetHeight

// jQuery
$(el).outerHeight(true)

// Native
const win = el.ownerDocument.defaultView
const {marginTop, margintBottom} = win.getComputedStyle(el, null)
el.offsetHeight + parseFloat(marginTop) + parseFloat(margintBottom) === $(el).outerHeight(true) // true

與outerHeight類似。

取得匹配元素集合中，每個(gè)元素的父元素，可以提供一個(gè)可選的選擇器。

// jQuery
$(el).parent()

// Native
el.parentNode

獲得集合中每個(gè)匹配元素的祖先元素，可以提供一個(gè)可選的選擇器作為參數(shù)。

// jQuery
$(el).parents(selector)

// Native
function parents(el, selector = "*") {
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector
  const parentsMatch = []
  while ((el = el.parentElement) !== null) {
    if (matchesSelector.call(el, selector)) {
      parentsMatch.push(el)
    }
  }
  return parentsMatch
}

查找當(dāng)前元素的所有的前輩元素，直到遇到選擇器， DOM 節(jié)點(diǎn)或 jQuery 對(duì)象匹配的元素為止，但不包括這些元素。

// jQuery
$(el).parentsUntil(selector)

// Native
function parentsUntil(el, selector = false) {
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector
  const parentsMatch = []
  while ((el = el.parentElement) !== null && !matchesSelector.call(el, selector)) {
      parentsMatch.push(el)
  }
  return parentsMatch
}

獲取匹配元素中第一個(gè)元素的當(dāng)前坐標(biāo)，相對(duì)于offset parent的坐標(biāo)。( offset parent指離該元素最近的而且被定位過(guò)的祖先元素 )

// jQuery
$(el).position()

// Native
{ left: el.offsetLeft, top: el.offsetTop }

將參數(shù)內(nèi)容插入到每個(gè)匹配元素的前面（元素內(nèi)部）。

// jQuery
$(el).prepend("
")

// Native (HTML string)
el.insertAdjacentHTML("afterbegin", "
")

// Native (Element)
el.insertBefore(newEl, el.firstChild)

與prepend相反

取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的前一個(gè)同輩元素的元素集合。選擇性篩選的選擇器。

與next類似

獲得集合中每個(gè)匹配元素的所有前面的兄弟元素，選擇性篩選的選擇器。

與nextAll類似

獲取每個(gè)元素但不包括選擇器，DOM節(jié)點(diǎn)，或者jQuery對(duì)象匹配的元素的所有前面的兄弟元素。

與nextUntil類似

將匹配元素集合從DOM中刪除。（注：同時(shí)移除元素上的事件及 jQuery 數(shù)據(jù)。）

// jQuery
$(el).remove()

// Native
el.parentNode.removeChild(el)

// Native
el.outerHTML = ""

為匹配的元素集合中的每個(gè)元素中移除一個(gè)屬性（attribute）。

// jQuery
$(el).removeAttr(attr)

// Native
el.removeAttribute(attr)

移除集合中每個(gè)匹配元素上一個(gè)，多個(gè)或全部樣式。

// jQuery
$(el).removeClass(className)

// Native (IE 10+ support)
el.classList.remove(className)

與replaceWith相反

用提供的內(nèi)容替換集合中所有匹配的元素并且返回被刪除元素的集合。

// jQuery
$(el).replaceWith("
")

// Native (HTML string)
el.outerHTML = "
"

// Native (Element)
el.parentNode.replaceChild(newEl, el)

與scrollTop一樣

獲取匹配的元素集合中第一個(gè)元素的當(dāng)前垂直滾動(dòng)條的位置或設(shè)置每個(gè)匹配元素的垂直滾動(dòng)條位置。設(shè)置每個(gè)匹配元素的垂直滾動(dòng)條位置

// jQuery
$(el).scrollTop()

// Native (el is window)
Math.max(document.documentElement.scrollTop, document.body.scrollTop)
or
window.pageYOffset

// Native (el is not window)
el.scrollTop

// jQuery
$(el).scrollTop(10)

// Native (el is window)
document.documentElement.scrollTop = 10
document.body.scrollTop = 10

// Native (el is not window)
el.scrollTop = 10

獲得匹配元素集合中每個(gè)元素的兄弟元素,可以提供一個(gè)可選的選擇器。。

// jQuery
$(el).siblings()

// Native

根據(jù)指定的下標(biāo)范圍，過(guò)濾匹配的元素集合，并生成一個(gè)新的 jQuery 對(duì)象。

// jQuery
$(selector).slice(1, 6)

// Native
$$(selector).slice(1, 6)

得到匹配元素集合中每個(gè)元素的合并文本，包括他們的后代設(shè)置匹配元素集合中每個(gè)元素的文本內(nèi)容為指定的文本內(nèi)容。

// jQuery
$(el).text()

// Native
el.textContent

// jQuery
$(el).text(string)

// Native
el.textContent = string

在匹配的元素集合中的每個(gè)元素上添加或刪除一個(gè)或多個(gè)樣式類,取決于這個(gè)樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個(gè)類。

// jQuery
$(el).toggleClass(className)

// Native
el.classList.toggle(className)

將匹配元素集合的父級(jí)元素刪除，保留自身（和兄弟元素，如果存在）在原來(lái)的位置。

// jQuery
$(el).unwrap()

// Native
const parent = el.parentNode
parent.outerHTML = parent.innerHTML

獲取匹配的元素集合中第一個(gè)元素的當(dāng)前值。設(shè)置匹配的元素集合中每個(gè)元素的值。

// jQuery
$(el).val()

// Native
el.value

// jQuery
$(el).val(value)

// Native
el.value = value

與height類似

在每個(gè)匹配的元素外層包上一個(gè)html元素。

// jQuery
$(el).wrap("
")

// Native
const wrapper = document.createElement("div")
wrapper.className = "wrapper"
el.parentNode.insertBefore(wrapper, el)
el.parentNode.removeChild(el)
wrapper.appendChild(el)

// Native
// 這種性能比較差 https://jsperf.com/outerhtml-appendchild
el.outerHTML = `
${el.outerHTML}
`

常用的 class、id、屬性 選擇器都可以使用?document.querySelector?或?document.querySelectorAll?替代。區(qū)別是

document.querySelector?返回第一個(gè)匹配的 Element

document.querySelectorAll?返回所有匹配的 Element 組成的 NodeList。它可以通過(guò)?[].slice.call()?把它轉(zhuǎn)成 Array

如果匹配不到任何 Element，jQuery 返回空數(shù)組?[]，但?document.querySelector?返回?null，注意空指針異常。

注意：document.querySelector?和?document.querySelectorAll?性能很差。如果想提高性能，盡量使用?document.getElementById、document.getElementsByClassName?或?document.getElementsByTagName。

以下只實(shí)現(xiàn)和jquery有所區(qū)別的api

選擇所有包含指定文本的元素。

// jQuery
$("selector:contains("metchString")")

// Native
$$("selector").filter(el => el.textContent.indexOf("metchString") !== -1)

選擇所有沒(méi)有子元素的元素（包括文本節(jié)點(diǎn)）。

// jQuery
$("selector:empty")

// Native
$$("selector").filter(el => el.innerHTML === "")

選擇索引值為偶數(shù)的元素，從 0 開始計(jì)數(shù)。

// jQuery
$("selector:even")

// Native
$$("selector").filter((el, index) => (index & 1) === 0)

選擇當(dāng)前獲取焦點(diǎn)的元素。

// jQuery
$(":focus")

// Native
document.activeElement

選擇匹配集合中所有大于給定index（索引值）的元素。

// jQuery
$("selector:gt(2)")

// Native
$$("selector").filter((el, index) => index > 2)

與has類似

選擇所有標(biāo)題元素，像h1, h2, h3 等.

// jQuery
$("selector:header")

// Native
$$("selector").filter(el => /^hd$/i.test(el.nodeName))

選擇匹配集合中所有索引值小于給定index參數(shù)的元素。

// jQuery
$("selector:lt(2)")

// Native
$$("selector").filter((el, index) => index < 2)

與not類似

選擇索引值為奇數(shù)元素，從 0 開始計(jì)數(shù)。

// jQuery
$("selector:odd")

// Native
$$("selector").filter((el, index) => (index & 1) === 1)

如果某個(gè)元素是其父元素的唯一子元素，那么它就會(huì)被選中。

// jQuery
$("selector:only-child")

// Native
$$("selector").filter(el => el.previousElementSibling === null && el.nextElementSibling === null)

// Native
$$("selector").filter(el => el.parentNode.children.length === 1)

選擇器匹配屬于其父元素的特定類型的唯一子元素的每個(gè)元素。

// jQuery
$("selector:only-of-type")

// Native
$$("selector").filter(el => {
  for(let child of el.parentNode.children) {
    if (child !== el && child.nodeName === el.nodeName) {
      return true
    }
  }
  return false
})

選擇所有含有子元素或者文本的父級(jí)元素。

// jQuery
$("selector:parent")

// Native
$$("selector").filter(el => el.innerHTML !== "")

獲取 select 元素中所有被選中的元素。

// jQuery
$("select option:selected")

// Native (single)
$("select option")[$("select").selectedIndex]

// Native (multiple)
$$("select option").filter(el => el.selected)

檢查一個(gè)DOM元素是另一個(gè)DOM元素的后代。

// jQuery
$.contains(el, child)

// Native
el !== child && el.contains(child)

一個(gè)通用的迭代函數(shù)，它可以用來(lái)無(wú)縫迭代對(duì)象和數(shù)組。數(shù)組和類似數(shù)組的對(duì)象通過(guò)一個(gè)長(zhǎng)度屬性（如一個(gè)函數(shù)的參數(shù)對(duì)象）來(lái)迭代數(shù)字索引，從0到length - 1。其他對(duì)象通過(guò)其屬性名進(jìn)行迭代。

// jQuery
$.each(array, (index, value) => {})

// Native
array.forEach((value, index) => {})

將兩個(gè)或更多對(duì)象的內(nèi)容合并到第一個(gè)對(duì)象。

// jQuery
$.extend({}, {a: 1}, {b: 2}) // {a: 1, b: 2}

// ES6-way
Object.assign({}, {a: 1}, {b: 2}) // {a: 1, b: 2}

在全局上下文下執(zhí)行一些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)

查找滿足過(guò)濾函數(shù)的數(shù)組元素。原始數(shù)組不受影響。

// jQuery
$.grep([10,11,3,4], n => n > 9)

// Native
[10,11,3,4].filter(n => n > 9)

在數(shù)組中查找指定值并返回它的索引（如果沒(méi)有找到，則返回-1）。

// jQuery
$.inArray(item, array)

// Native
array.indexOf(item) > -1

// ES6-way
array.includes(item)

確定的參數(shù)是一個(gè)數(shù)組。

// jQuery
$.isArray(array)

// Native
Array.isArray(array)

檢查對(duì)象是否為空（不包含任何屬性）。

// jQuery
$.isEmptyObject(obj)

// Native
function isEmptyObject(obj) {
  return Object.keys(obj).length === 0
}

確定參數(shù)是否為一個(gè)Javascript 函數(shù)。

// 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]"
}

確定它的參數(shù)是否是一個(gè)數(shù)字。

// jQuery
$.isNumeric(item)

// Native
function isNumeric(value) {
  var type = typeof value

  return (type === "number" || type === "string") && !isNaN(value - parseFloat(value))
}

測(cè)試對(duì)象是否是純粹的對(duì)象（通過(guò) "{}" 或者 "new Object" 創(chuàng)建的）

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

確定參數(shù)是否為一個(gè)window對(duì)象。

// jQuery
$.isWindow(obj)

// Native
function isWindow(obj) {
  return obj !== null && obj !== undefined && obj === obj.window
}
// jquery源碼中是這么判斷對(duì)象是否為window的，我的理解是代碼可能會(huì)跑到服務(wù)器上，因?yàn)榉?wù)器上是沒(méi)有window對(duì)象的。所以這么判斷

轉(zhuǎn)換一個(gè)類似數(shù)組的對(duì)象成為真正的JavaScript數(shù)組。

// jQuery
$.makeArray(arrayLike)

// Native
Array.prototype.slice.call(arrayLike)

// ES6-way
Array.from(arrayLike)

將一個(gè)數(shù)組中的所有元素轉(zhuǎn)換到另一個(gè)數(shù)組中。

// jQuery
$.map(array, (value, index) => {
})

// Native
array.map((value, index) => {
})

合并兩個(gè)數(shù)組內(nèi)容到第一個(gè)數(shù)組。

// jQuery
$.merge(array1, array2)

// Native
// But concat function doesn"t remove duplicate items.
function merge(...args) {
  return [].concat(...args)
}

返回一個(gè)數(shù)字，表示當(dāng)前時(shí)間。

// jQuery
$.now()

// Native
Date.now()

// Native
+new Date()

// Native
new Date().getTime()

將字符串解析到一個(gè)DOM節(jié)點(diǎn)的數(shù)組中。

// jQuery
$.parseHTML(string)

// 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.childNodes
}

// Native (IE 10+ support)
// 兩者性能差不多 https://jsperf.com/parsehtml2
function parseHTML(string) {
  const context = new DOMParser().parseFromString(string, "text/html")
  return context.body.childNodes
}

接受一個(gè)標(biāo)準(zhǔn)格式的 JSON 字符串，并返回解析后的 JavaScript 對(duì)象。

// jQuery
$.parseJSON(str)

// Native
JSON.parse(str)

解析一個(gè)字符串到一個(gè)XML文檔。

// jQuery
jQuery.parseXML(xmlString)

// Native
new DOMParser().parseFromString(xmlString, "application/xml")

接受一個(gè)函數(shù)，然后返回一個(gè)新函數(shù)，并且這個(gè)新函數(shù)始終保持了特定的上下文語(yǔ)境。

// jQuery
$.proxy(fn, context)

// Native
fn.bind(context)

去掉字符串起始和結(jié)尾的空格。

// jQuery
$.trim(string)

// Native
string.trim()

確定JavaScript 對(duì)象的類型[[Class]] 。

// jQuery
$.type(obj)

// Native
function type(item) {
  const reTypeOf = /(?:^[objects(.*?)]$)/
  return Object.prototype.toString.call(item)
    .replace(reTypeOf, "$1")
    .toLowerCase()
}

有哪塊錯(cuò)誤的或者不懂得可以在github上提個(gè)issue。如果哪塊有更好的解法可以pr。