国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

看Zepto如何實現增刪改查DOM

VioletJack / 2852人閱讀

摘要:先看下圖,我們以刪除元素,插入元素復制元素,包裹元素和替換元素幾個模塊分別探究如何一一將其實現。遍歷當前集合中的元素,當該元素的父節點存在的時候,使用刪除該元素。接下來我們來看如何將中創建好的節點插入到目標位置。

前言

dom也就是文檔對象模型,是針對HTML和XML的一個api,描繪了一個層次化的節點樹。雖然瀏覽器原生給我們提供了許多操作dom的方法,使我們可以對dom進行查找,復制,替換和刪除等操作。但是zepto在其基礎上再次封裝,給以我們更加便捷的操作方式。先看下圖,我們以刪除元素插入元素,復制元素包裹元素替換元素幾個模塊分別探究zepto如何一一將其實現。

原文鏈接

github項目地址

刪除元素 remove

當父節點存在時,從其父節點中刪除當前集合中的元素。

remove: function () {
  return this.each(function () {
    if (this.parentNode != null)
      this.parentNode.removeChild(this)
  })
}

遍歷當前集合中的元素,當該元素的父節點存在的時候,使用removeChild刪除該元素。

detach

功能和remove一樣,都是刪除元素。

$.fn.detach = $.fn.remove

可以看到就是在$的原型上添加了一個指向remove函數的方法detach

empty

清空對象集合中每個元素的DOM內容

empty: function () {
  return this.each(function () { this.innerHTML = "" })
},

遍歷當前集合中的元素,然后將元素的innerHTML屬性設置為空。也就達到了清除DOM內容的目的。

插入元素

插入元素的相關api比較多,我們先來重溫部分api的使用用法和比較一下他們之間的區別。

append, prepend, after, before
  • 1
let $box = $(".box")
let insertDom = "
  • i am child
  • " // append appendTo // $box.append(insertDom) // $(insertDom).appendTo($box) /*
    • 1
    • i am child
    */ // prepend prependTo // $box.prepend(insertDom) // $(insertDom).prependTo($box) /*
    • i am child
    • 1
    */ // before insertBefore // $box.before(insertDom) // $(insertDom).insertBefore($box) /*
  • i am child
    • 1
    */ // after insertAfter // $box.after(insertDom) // $(insertDom).insertAfter($box) /*
    • 1
  • i am child
  • */

    以上是append,appendTo,prepend,prependTo,after,insertAfter,before,insertBefore八個方法的基本用法,以及用過之后的dom結構。我們總結一下他們的區別。

    首先每個方法的入參都可以為html字符串,dom節點,或者節點組成的數組。參考自zeptojs_api

    append,appendTo,prepend,prependTo都是在元素內部插入內容,而after,insertAfter,before,insertBefore則是在元素外部插入內容。

    append,appendTo是在元素的末尾插入內容,prepend,prependTo是在元素的初始位置插入,after,insertAfter是在元素的后面插入內容,before,insertBefore則是在元素的前面插入內容

    接下來我們開始學習和閱讀實現這8大方法的核心源碼部分

    adjacencyOperators = ["after", "prepend", "before", "append"]
    
    adjacencyOperators.forEach(function(operator, operatorIndex) {
      var inside = operatorIndex % 2
    
      $.fn[operator] = function() {
        // arguments can be nodes, arrays of nodes, Zepto objects and HTML strings
        var argType, nodes = $.map(arguments, function(arg) {
          var arr = []
          argType = type(arg)
          if (argType == "array") {
            arg.forEach(function(el) {
              if (el.nodeType !== undefined) return arr.push(el)
              else if ($.zepto.isZ(el)) return arr = arr.concat(el.get())
              arr = arr.concat(zepto.fragment(el))
            })
            return arr
          }
          return argType == "object" || arg == null ?
            arg : zepto.fragment(arg)
        }),
            parent, copyByClone = this.length > 1
        if (nodes.length < 1) return this
    
        return this.each(function(_, target) {
          parent = inside ? target : target.parentNode
    
          // convert all methods to a "before" operation
          target = operatorIndex == 0 ? target.nextSibling :
          operatorIndex == 1 ? target.firstChild :
          operatorIndex == 2 ? target :
          null
    
          var parentInDocument = $.contains(document.documentElement, parent)
    
          nodes.forEach(function(node) {
            if (copyByClone) node = node.cloneNode(true)
            else if (!parent) return $(node).remove()
    
            parent.insertBefore(node, target)
            if (parentInDocument) traverseNode(node, function(el) {
              if (el.nodeName != null && el.nodeName.toUpperCase() === "SCRIPT" &&
                  (!el.type || el.type === "text/javascript") && !el.src) {
                var target = el.ownerDocument ? el.ownerDocument.defaultView : window
                target["eval"].call(target, el.innerHTML)
              }
            })
              })
        })
      }
    

    遍歷adjacencyOperators數組給$原型添加對應的方法

    adjacencyOperators = ["after", "prepend", "before", "append"]
    
    adjacencyOperators.forEach(function(operator, operatorIndex) {
      // xxx
      $.fn[operator] = function() {
        // xxx
      }
      // xxx
    })
    

    可以看到通過循環遍歷adjacencyOperators從而給$的原型添加對應的方法。

    轉換node節點

    var argType, nodes = $.map(arguments, function(arg) {
      var arr = []
      argType = type(arg)
      if (argType == "array") {
        arg.forEach(function(el) {
          if (el.nodeType !== undefined) return arr.push(el)
          else if ($.zepto.isZ(el)) return arr = arr.concat(el.get())
          arr = arr.concat(zepto.fragment(el))
        })
        return arr
      }
      return argType == "object" || arg == null ?
        arg : zepto.fragment(arg)
    })
    

    例子

    // 1 html字符串
    $box.append("hello world")
    // 2 dom節點
    $box.append(document.createElement("span"))
    // 3 多個參數
    $box.append("1", "2")
    // 4 數組
    $box.append(["hello world", document.createElement("span")]) 
    

    因為傳入的內容可以為html字符串,dom節點,或者節點組成的數組。這里對可能的情況分類型做了處理。通過內部的type函數判斷每個參數的數據類型并保存在argType中。

    當參數類型為數組(類似上面例子中的4)的時候,再對該參數進行遍歷,如果該參數中的元素存在nodeType屬性則將該元素推進數組arr,
    如果該參數中的元素是一個Zepto對象,則調用get方法,將arr與返回的原生元素數組進行合并。

    當參數類型為object或者null的時候直接返回,否則就是處理字符串形式了,通過調用zepto.fragment(這個函數在后面的文章中會詳細講解,現在就其理解為將html字符串處理成dom節點數組就可以了)處理并將結果返回。

    到現在為止,我們已經明白了怎么將傳入的content轉化為對應的dom節點

    接下來我們來看如何將nodes中創建好的dom節點插入到目標位置。

    parent, copyByClone = this.length > 1
    
    if (nodes.length < 1) return this
    

    先留意一下parent,以及copyByClone這兩個變量,挺重要的,具體作用下面會詳細說明。并且如果需要插入的元素數組的長度小于1,那么也就沒有必要繼續往下走了,直接return this進行鏈式操作。

    return this.each(function(_, target) {
      // xxx
      nodes.forEach(function(node) {
        // xxx 
        // 注意這行,所有的插入操作都通過insertBefore函數完成
        parent.insertBefore(node, target)
        // xxx
      })
    
    })
    

    整個后續代碼就是兩層嵌套循環,第一層遍歷當前選中的元素集合,第二層就是需要插入的nodes節點集合。通過兩個循環來最終完成元素的插入操作,并且很重要的一點是,不管是append還是after等方法都是通過insertBefore來模擬完成的。

    確定parent節點以及target目標節點

    通過上面的分析我們知道通過insertBefore(在當前節點的某個子節點之前再插入一個子節點)來完成節點的插入,很重要的幾個因素就是

    parentNode.insertBefore(newNode, referenceNode)

    父節點(parentNode)

    需要插入的新節點(newNode)

    參考節點referenceNode

    所以確定以上1和3就顯得極其重要了。怎么確定呢?

    return this.each(function(_, target) {
      parent = inside ? target : target.parentNode
    
      // convert all methods to a "before" operation
      target = operatorIndex == 0 ? target.nextSibling :
      operatorIndex == 1 ? target.firstChild :
      operatorIndex == 2 ? target :
      null
      // xxx
    })
    

    inside是個啥啊!!!,讓我們回到頂部看這段

    adjacencyOperators = ["after", "prepend", "before", "append"]
    adjacencyOperators.forEach(function (operator, operatorIndex) {
      var inside = operatorIndex % 2
      // xxx
    })
    

    所以說當要往$原型上添加的方法是prependappend的時候inside為1也就是真,當為afterbefore的時候為0也就是假。

    因為prependappend都是往當前選中的元素內部添加新節點,所以parent當然就是target本身了,但是afterbefore確是要往選中的元素外部添加新節點,自然parent就變成了當前選中元素的父節點。到這里上面的三要素1,已經明確了,還有3(target)如何確定呢?

    target = operatorIndex == 0 ? target.nextSibling :
      operatorIndex == 1 ? target.firstChild :
      operatorIndex == 2 ? target :
      null
    

    如果operatorIndex為0,即after方法,node節點應該是插入到目標元素target的后面,也就是target的下一個兄弟節點的前面

    如果operatorIndex為1,即prepend方法,node應該插入到目標元素target的第一個子元素的前面

    如果operatorIndex為2,即before方法,node節點應該插入到target節點的前面

    否則operatorIndex為4了,即append方法,node節點應該插入到target最后一個子節點的末尾,insertBefore傳入null,正好與其功能相對應

    好啦三要素3頁已經明確了,接下來我們把重要放在第二個循環。

    將新節點插入到指定位置

    nodes.forEach(function(node) {
      if (copyByClone) node = node.cloneNode(true)
      else if (!parent) return $(node).remove()
    
      parent.insertBefore(node, target)
      // 處理插入script情況
    })
    

    在將節點插入到指定位置的前有一個判斷,如果copyByClone為真,就將要插入的新節點復制一份。為什么要這么做呢?我們來看個例子。

    • 1
    • 2
    • 3
    let $list = document.querySelector(".list")
      let $listLi = document.querySelectorAll(".list li")
      let createEle = (tagName, text) => {
        let ele = document.createElement(tagName)
        ele.innerHTML = text
        return ele
      }
      let $span1 = createEle("span", "span1")
      let $span2 = createEle("span", "span2")
    
      Array.from($listLi).forEach((target) => {
        [$span1, $span2].forEach((node) => {
          // node = node.cloneNode(true)
          $list.insertBefore(node, target)
        })
      })
    

    先將cloneNode那部分給注銷了,我們期望往三個li的前面都插入兩個span,但是結果會怎么樣呢?只有最后一個節點前面可以成功地插入兩個span節點。這樣就不是我們先要的結果了,根據insertBefore mdn解釋,如果newElement已經在DOM樹中,newElement首先會從DOM樹中移除。,所以當我們需要往多個li中插入同樣類似的兩個節點的時候,才需要將新節點克隆一份再插入。

    我們接著回到源碼。

    nodes.forEach(function(node) {
      if (copyByClone) node = node.cloneNode(true)
      else if (!parent) return $(node).remove()
    
      parent.insertBefore(node, target)
      // 處理插入script情況
    })
    

    如果需要(當前選中元素的個數大于1)克隆節點的時候,先將新節點克隆一份,如果沒有找到對應的parent節點,就講要插入的新節點刪除,最后通過insertBefore方法插入新節點。

    到了這里我們似乎已經完成了從

    創建新節點 => 將新節點插入到指定位置的操作了。任務好像已經完成了,但是革命尚未成功,同志仍需努力啊。接下來看最后一點代碼,主要是處理,當插入的節點是script
    標簽的時候,需要手動去執行其包含的js代碼。

    
    var parentInDocument = $.contains(document.documentElement, parent)
    
    if (parentInDocument) traverseNode(node, function(el) {
      if (el.nodeName != null && el.nodeName.toUpperCase() === "SCRIPT" &&
          (!el.type || el.type === "text/javascript") && !el.src) {
        var target = el.ownerDocument ? el.ownerDocument.defaultView : window
        target["eval"].call(target, el.innerHTML)
      }
    })
    

    先提前看一下traverseNode這個函數的代碼

    function traverseNode(node, fun) {
      fun(node)
      for (var i = 0, len = node.childNodes.length; i < len; i++)
        traverseNode(node.childNodes[i], fun)
    }
    

    這個函數的主要作用就是將傳入的node節點作為參數去調用傳入的fun函數。并且遞歸的將node節點的子節點,交給fun去處理。

    接下來繼續看。

    首先通過$.contains方法判斷parent是否在document文檔中,接著需要滿足一下幾個條件才去執行后續操作。

    存在nodeName屬性

    nodeName是script標簽

    type屬性為空或者type屬性為text/javascript

    src屬性為空(即不指定外部腳本)

    確定window對象

    var target = el.ownerDocument ? el.ownerDocument.defaultView : window
    

    新節點存在ownerDocument mdn則window對象為defaultView mdn,否則使用window對象本身。

    這里主要會考慮node節點是iframe種的元素情況,才需要做三目處理。

    最后便是調用target["eval"].call(target, el.innerHTML)去執行script中的代碼了。

    到這里我們終于知道了"after", "prepend", "before", "append"實現全過程(偷樂一下?,不容易啊)。

    appendTo, prependTo, insertBefore, insertAfter

    緊接著我們繼續往前走,前面說了插入操作有很多個方法,其中
    insertAfter,insertBefore,prependTo,appendTo的實現基于上述幾個方法。

    // append   => appendTo
    // prepend  => prependTo
    // before   => insertBefore
    // after    => insertAfter
    
    $.fn[inside ? operator + "To" : "insert" + (operatorIndex ? "Before" : "After")] = function (html) {
      $(html)[operator](this)
      return this
    }
    

    如果是append或者prepend則往$原型上添加appendToprependTo方法,如果是before或者after的時候,便往$的原型上添加insertBeforeinsertAfter方法。因為其兩兩對應的方法本質上是同樣的功能,只是在使用上有點相反的意思,所以簡單的反向調用一下就可以了。

    html

    獲取或設置對象集合中元素的HTML內容。當沒有給定content參數時,返回對象集合中第一個元素的innerHtml。當給定content參數時,用其替換對象集合中每個元素的內容。content可以是append中描述的所有類型 zeptojs_api

    例子

    1. html()   ? string
    
    2. html(content)   ? self
    
    3. html(function(index, oldHtml){ ... })   ? self
    

    源碼實現

    html: function (html) {
      return 0 in arguments ?
        this.each(function (idx) {
          var originHtml = this.innerHTML
          $(this).empty().append(funcArg(this, html, idx, originHtml))
        }) :
        (0 in this ? this[0].innerHTML : null)
    }
    

    當沒有傳html參數的時候,先判斷當前選中的元素是否存在,存在則讀取第一個元素的innerHTML并返回,否則直接返回null

    (0 in this ? this[0].innerHTML : null)
    

    當傳了html參數的時候。對當前選中的元素集合進行遍歷設置,先保存當前元素的innerHTML到originHtml變量中,再將當前元素的innerHTML置空,并將funcArg函數執行之后返回的html插入到當前元素中。

    function funcArg(context, arg, idx, payload) {
      return isFunction(arg) ? arg.call(context, idx, payload) : arg
    }
    

    可以看到funcArg會對傳入arg進行類型判斷,如果是函數,就把對應的參數傳入函數再將函數的執行結果返回,不是函數就直接返回arg。

    text

    獲取或者設置所有對象集合中元素的文本內容。當沒有給定content參數時,返回當前對象集合中第一個元素的文本內容(包含子節點中的文本內容)。當給定content參數時,使用它替換對象集合中所有元素的文本內容。它有待點似 html,與它不同的是它不能用來獲取或設置 HTML。zeptojs_api

    text: function (text) {
      return 0 in arguments ?
        this.each(function (idx) {
          var newText = funcArg(this, text, idx, this.textContent)
          this.textContent = newText == null ? "" : "" + newText
        }) :
        (0 in this ? this.pluck("textContent").join("") : null)
    }
    

    text實現方法與html比較類似有些不同的是沒有傳參數的時候,html是獲取第一個元素的innerHTMLtext則是將當前所有元素的textContent拼接起來并返回.

    復制元素 clone

    通過深度克隆來復制集合中的所有元素。zeptojs_api

    clone: function () {
      return this.map(function () { return this.cloneNode(true) })
    }
    

    對當前選中的元素集合進行遍歷操作,底層還是用的瀏覽器cloneNode,并傳參為true表示需要進行深度克隆(其實感覺這里是不是將true設置為可選參數比較好呢,讓使用者決定是深度克隆與否不是更合理?)

    需要注意的地方是cloneNode方法不會復制添加到DOM節點中的Javascript屬性,例如事件處理程序等,這個方法只復制特性,子節點,其他一切都不會復制,IE在此存在一個bug,即他會賦值事件處理程序,所以我們建議在賦值之間最好先移除事件處理程序(摘自《JavaScript高級程序設計第三版》10.1.1 Node類型小字部分)

    替換元素 replaceWidth

    用給定的內容替換所有匹配的元素。(包含元素本身) zeptojs_api

    replaceWith: function(newContent) {
      return this.before(newContent).remove()
    }
    

    源碼實現其實很簡單分兩步,第一步調用前面我們講的before方法將制定newContent插入到元素的前面,第二部步將當前選中的元素刪除。自然也就達到了替換的目的。

    包裹元素 wrapAll

    在所有匹配元素外面包一個多帶帶的結構。結構可以是單個元素或 幾個嵌套的元素zeptojs_api/#wrapAll

    wrapAll: function (structure) {
      // 如果選中的元素存在
      if (this[0]) {
        // 則將制定structure結構通過before方法,插入到選中的第一個元素的前面
        $(this[0]).before(structure = $(structure))
        var children
        // drill down to the inmost element
        // 獲取structure的最深層次的第一個子元素
        while ((children = structure.children()).length) structure = children.first()
        // 將當前的元素集合通過append方法添加到structure末尾
        $(structure).append(this)
      }
      // 反則直接返回this進行后續的鏈式操作
      return this
    }
    

    源碼實現直接看注釋就可以了,這里需要注意一下children函數是獲取對象集合中所有的直接子節點。而first函數則是獲取當前集合的第一個元素。

    另外我們看一下下面兩個例子。

    • 1
    • 2
    $(".box").wrapAll(".wrap")
    

    執行上述代碼之后dom結構會變成

    • 1
    • 2
    • 1
    • 2
    • 1
    • 2

    可以看到原來ul結構還是存在,仿佛是復制了一份ul及其子節點到wrap中被包裹起來。

    接下來再看一個例子,唯一的區別就在wrap結構中嵌套了基層。

    • 1
    • 2

    但是最后執行$(".box").wrapAll(".wrap")得到的dom結果是。

    • 1
    • 2

    嘿嘿可以看到,ul原來的結構不見了,被移動到了第一個wrap的第一個子節點here中。具體原因是什么呢?大家可以重新回去看一下append的核心實現。

    wrap

    在每個匹配的元素外層包上一個html元素。structure參數可以是一個多帶帶的元素或者一些嵌套的元素。也可以是一個html字符串片段或者dom節點。還可以是一個生成用來包元素的回調函數,這個函數返回前兩種類型的包裹片段。zeptojs_api/#wrapAll

    wrap: function (structure) {
      var func = isFunction(structure)
      // 當前選中的元素不為空,并且structure不是一個函數
      if (this[0] && !func)
        // 就將structure轉化后的第一個元素賦值給dom元素
        var dom = $(structure).get(0),
          // 如果dom元素的parentNode存在或者當前選中的元素個數大于1那么clone為true
          clone = dom.parentNode || this.length > 1
      // 對當前選中元素進行遍歷并且調用wrapAll方法
      return this.each(function (index) {
        $(this).wrapAll(
          // 如果structure為函數,則將當前的元素和對應的索引傳入函數
          func ? structure.call(this, index) :
            // 如果clone為true,則使用拷貝的副本
            clone ? dom.cloneNode(true) : dom
        )
      })
    }
    
    wrapInner

    將每個元素中的內容包裹在一個多帶帶的結構中 zeptojs_api/#wrapInner

    wrapInner: function (structure) {
      // 判斷structure是否為函數
      var func = isFunction(structure)
      // 對當前元素集合進行遍歷處理
      return this.each(function (index) {
        // contents => 獲取當前元素的所有子節點(包括元素節點和文本節點)
        var self = $(this), contents = self.contents(),
          // structure為函數則將其執行結果賦值為dom,否則直接將其賦值
          dom = func ? structure.call(this, index) : structure
          // 當前元素的子節點不為空,則調用wrapAll,否則直接將dom插入self當前元素即可
        contents.length ? contents.wrapAll(dom) : self.append(dom)
      })
    }
    

    需要注意的是這個函數和前面的wrapAll和wrap有點不一樣,這里強調的是將當前元素中的內容(包括元素節點和文本節點)進行包裹。

    unwrap

    移除集合中每個元素的直接父節點,并把他們的子元素保留在原來的位置

    unwrap: function () {
      // 通過parent()獲取當前元素集合的所有直接父節點
      // 將獲取到的父節點集合進行遍歷
      this.parent().each(function () {
        // 將該父節點替換為該父節點的所有子節點
        $(this).replaceWith($(this).children())
      })
      return this
    },
    
    
    結尾

    呼呼呼,終于寫完了,快累死了。歡迎大家指正文中的問題。

    參考

    讀Zepto源碼之操作DOM

    Zepto源碼分析-zepto模塊

    ownerDocument

    insertBefore

    innerHTML

    《JavaScript高級程序設計第三版》

    文章記錄

    form模塊

    zepto源碼分析之form模塊(2017-10-01)

    zepto模塊

    這些Zepto中實用的方法集(2017-08-26)

    Zepto核心模塊之工具方法拾遺 (2017-08-30)

    看zepto如何實現增刪改查DOM (2017-10-2)

    event模塊

    mouseenter與mouseover為何這般糾纏不清?(2017-06-05)

    向zepto.js學習如何手動觸發DOM事件(2017-06-07)

    誰說你只是"會用"jQuery?(2017-06-08)

    ajax模塊

    原來你是這樣的jsonp(原理與具體實現細節)(2017-06-11)

    文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

    轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116661.html

    相關文章

    • Zepto如何實現刪改DOM

      摘要:先看下圖,我們以刪除元素,插入元素復制元素,包裹元素和替換元素幾個模塊分別探究如何一一將其實現。遍歷當前集合中的元素,當該元素的父節點存在的時候,使用刪除該元素。接下來我們來看如何將中創建好的節點插入到目標位置。 前言 dom也就是文檔對象模型,是針對HTML和XML的一個api,描繪了一個層次化的節點樹。雖然瀏覽器原生給我們提供了許多操作dom的方法,使我們可以對dom進行查找,復制...

      lookSomeone 評論0 收藏0
    • Zepto如何實現刪改DOM

      摘要:先看下圖,我們以刪除元素,插入元素復制元素,包裹元素和替換元素幾個模塊分別探究如何一一將其實現。遍歷當前集合中的元素,當該元素的父節點存在的時候,使用刪除該元素。接下來我們來看如何將中創建好的節點插入到目標位置。 前言 dom也就是文檔對象模型,是針對HTML和XML的一個api,描繪了一個層次化的節點樹。雖然瀏覽器原生給我們提供了許多操作dom的方法,使我們可以對dom進行查找,復制...

      Clect 評論0 收藏0
    • Zepto中數據緩存原理與實現

      摘要:有一個模塊,專門用來做數據緩存,允許我們存放任何與相關的數據。在匹配元素上存儲任意相關數據或返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。確定元素是否有與之相關的數據。 前言 以前我們使用Zepto進行開發的時候,會把一些自定義的數據存到dom節點上,好處是非常直觀和便捷,但是也帶來了例如直接將數據暴露出來會出現安全問題,數據以html自定義屬性標簽存在,對于瀏覽器本身來說...

      macg0406 評論0 收藏0
    • Zepto學習關于"偏移"的那些事

      摘要:獲得當前元素相對于的位置。返回一個對象含有和當給定一個含有和屬性對象時,使用這些值來對集合中每一個元素進行相對于的定位。獲取對象集合中第一個元素相對于其的位置。結尾以上就是中與偏移相關的幾個的解析,歡迎指出其中的問題和有錯誤的地方。 前言 這篇文章主要想說一下Zepto中與偏移相關的一些事,很久很久以前,我們經常會使用offset、position、scrollTop、scrollLe...

      hzx 評論0 收藏0

    發表評論

    0條評論

    VioletJack

    |高級講師

    TA的文章

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