成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

jQuery的大致實(shí)現(xiàn)原理

twohappy / 3341人閱讀

摘要：進(jìn)一步完善給個縮寫并且使其可以是節(jié)點(diǎn)或者選擇器可將所有的添加一個可將所有的變?yōu)榉庋b按照的思路封裝一個函數(shù)升級一下滿足規(guī)則

封裝一個函數(shù) 
function addClass(classes){}//可將所有輸入的標(biāo)簽的class添加一個類

再封裝一個函數(shù)

function setText(text){}//可將所有輸入標(biāo)簽的textContent變?yōu)閠ext
實(shí)現(xiàn)這兩個函數(shù)

第一個函數(shù)addClass()是輸入一個類名，給選中的所有標(biāo)簽添加一個類，所以要用到classList.add()，具體實(shí)現(xiàn)如下

function addClass(node, classes) {
  var allTag = document.querySelectorAll(node)
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].classList.add(classes)
  }
}

第二個函數(shù)setText()輸入文本，修改選中標(biāo)簽中的文本，所以要用到textContent()，具體實(shí)現(xiàn)結(jié)果如下

function setText(node, text) {
  var allTag = document.querySelectorAll(node)
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].textContent = text
  }
}
命名空間

在全局變量中創(chuàng)建一個對象，用來儲存封裝后的函數(shù)，這就是命名空間（名字前面統(tǒng)一加一個前綴）

window.jQuery = {}
jQuery.addClass = addClass
jQuery.setText = setText

jQuery.addClass("div", "red")
jQuery.setText("div","hi")

整理之后

window.jQuery = {}
jQuery.addClass = function(node, classes) {
  var allTag = document.querySelectorAll(node)
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].classList.add(classes)
  }
}
jQuery.setText = function(node, text) {
  var allTag = document.querySelectorAll(node)
  for (let i = 0; i < allTag.length; i++) {
    allTag[i].textContent = text
  }
}

jQuery.addClass("div", "red")
jQuery.setText("div", "hi")
將node放到前面 
node.addClass(classes)
node.setText(text)

1、 方法一：擴(kuò)展 Node 接口，直接在 Node.prototype 上加函數(shù)

Node.prototype.addClass = function(){
   ...
}
Node.prototype.setText = function(){
   ...
}

2、 方法二：新的接口 BetterNode

window.jQuery = function(node) {
  return {
    element: node,
    addClass: function(classes) {
      var allTag = document.querySelectorAll(node)
      for (let i = 0; i < allTag.length; i++) {
        allTag[i].classList.add(classes)
      }
    },
    setText: function(text) {
      var allTag = document.querySelectorAll(node)
      for (let i = 0; i < allTag.length; i++) {
        allTag[i].textContent = text
      }
    }
  }
}

let node2 = jQuery("div")
node2.addClass("red")
node2.setText("hi")

第二種叫做「無侵入」。

進(jìn)一步完善

給個縮寫并且使其可以是節(jié)點(diǎn)或者選擇器

window.jQuery = function(nodeOrSelector){
  let nodes = {}
  if(typeof nodeOrSelector === "string"){
    let temp = document.querySelectorAll(nodeOrSelector)
    for(let i=0;i
封裝ajax

按照jQuery的思路封裝一個ajax函數(shù)


window.jQuery.ajax = function(url, method, body, success, fail) {
    let request = XMLHttpResquest()
    request.open(method, url)
    request.onreadystatechange = () => {
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                success.call(undefined, request.responseText)
            } else if (request.status >= 400) {
                fail.call(undefined, request)
            }
        }
    }
    request.send(body)
}


升級一下滿足promise規(guī)則


window.jQuery.ajax = function({
    url,
    method,
    body,
    headers
}) {
    return new Promise(function(resolve, reject) {
        let request = XMLHttpResquest()
        request.open(method, url)
        for (let key in headers) {
            let value = headers[key]
            request.setRequestHeader(key, value)
        }
        request.onreadystatechange = () => {
            if (request.readyState === 4) {
                if (request.status >= 200 && request.status < 300) {
                    success.call(undefined, request.responseText)
                } else if (request.status >= 400) {
                    fail.call(undefined, request)
                }
            }
        }
        request.send(body)
    })
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96225.html

相關(guān)文章

  • javaScript鏈?zhǔn)秸{(diào)用原理以及加法實(shí)現(xiàn)

    摘要：相信很多小伙伴在面試的過程中都被問過鏈?zhǔn)秸{(diào)用的原理，甚至有些面試官還會讓你用其實(shí)現(xiàn)例如加法操作，舉例第一次看到這個題目時，或許你沒有什么頭緒，不要緊，讓我們慢慢來首先，大家還是否記得在使用時，我們會經(jīng)常這樣去操作一個節(jié)點(diǎn)這是怎么做到的原理很 相信很多小伙伴在面試的過程中都被問過js鏈?zhǔn)秸{(diào)用的原理，甚至有些面試官還會讓你用其實(shí)現(xiàn)例如加法操作，舉例： add(1)(2)(3) //6...

    LuDongWei 評論0 收藏0

  • jQuery 源碼系列（十）hooks 的原理

    摘要：歡迎來我的專欄查看系列文章。算是中一個非常可以借鑒的用法，以前聽到這個概念是非?？謶值模?dāng)看了源碼，弄懂原理之后，發(fā)現(xiàn)超級有意思。參考源碼分析鉤子機(jī)制屬性操作源碼學(xué)習(xí)本文在上的源碼地址，歡迎來。 歡迎來我的專欄查看系列文章。 hooks 在英語中的意思表示鉤子或掛鉤，在 jQuery 中也有 hooks 這么一個概念，它的功能在考慮到一些兼容性和其它特殊情況的條件下，優(yōu)先考慮這些特殊情...

    nihao 評論0 收藏0

  • webpack組織模塊的原理 - 打包Library

    摘要：所以你編譯后的文件實(shí)際上應(yīng)當(dāng)只輸出，這就需要在配置里用來控制這樣上面的模塊加載函數(shù)會在返回值后面加一個，這樣就只返回的部分。 之前一篇文章分析了Webpack打包JS模塊的基本原理，所介紹的案例是最常見的一種情況，即多個JS模塊和一個入口模塊，打包成一個bundle文件，可以直接被瀏覽器或者其它JavaScript引擎執(zhí)行，相當(dāng)于直接編譯生成一個完整的可執(zhí)行的文件。不過還有一種很常見的...

    legendmohe 評論0 收藏0

  • JavaScript學(xué)習(xí)

    摘要：和，前者是過濾選擇器而后者是子代選擇器。第三章中的操作查找節(jié)點(diǎn)想要查找元素節(jié)點(diǎn)或者是屬性節(jié)點(diǎn)，就是通過前一章學(xué)習(xí)的選擇器獲取相應(yīng)元素的文本，或者是通過選擇器屬性名獲取某元素相應(yīng)屬性的值。 About Javscript record the thing which maybe forgetten 原生JavaScript Javascript DOM document.writ...

    J4ck_Chan 評論0 收藏0

  • 仿淘寶的放大鏡效果

    摘要：本次文章的主要內(nèi)容是介紹一下淘寶的放大鏡效果是如何實(shí)現(xiàn)的，相信很多同學(xué)們對這個并不陌生。這個看似感覺很復(fù)雜的小功能，實(shí)際上原理卻是非常的簡單，下面我們學(xué)習(xí)一下淘寶放大鏡效果是如何實(shí)現(xiàn)的。 前言 這一段時間事情挺多的，一直沒有時間寫文章。這兩天稍微閑了一些，就趁這會閑工夫?qū)懸黄恼?。本次文章的主要?nèi)容是介紹一下淘寶的放大鏡效果是如何實(shí)現(xiàn)的，相信很多同學(xué)們對這個并不陌生。這個看似感覺很復(fù)雜...

    wuyangnju 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<