시뮬레이션 jquery 원리

3851 단어 JSjquery
;(function() {
        function JQuery(selector) {
          return new JQuery.prototype.init(selector)
        }

        JQuery.prototype.init = function(selector) {
          //           this = {}
          this.length = 0
          let dom = null

          //            selector     ,      length=0   jq  
          if (selector) {
            // '.dom' / '#dom'
            if (typeof selector == 'string') {
              if (selector.indexOf('.') != -1) {
                dom = document.getElementsByClassName(selector.slice(1))
              }
              if (selector.indexOf('#') != -1) {
                dom = document.getElementById(selector.slice(1))
              }
            }

            //         dom  
            // 1.DOMElement nodeType               selector null    
            // 2.selector instanceof Element (  )     selector null false
            //          dom    ,   $('').eq(2)         dom  

            if (selector instanceof Element || dom.length == undefined) {
              this.length++
              this[0] = dom || selector
            } else {
              for (let i = 0; i < dom.length; i++) {
                this[i] = dom[i]
                this.length++
              }
            }
          }

          return this
        }

        JQuery.prototype.css = function(attrObj) {
          for (let i = 0; i < this.length; i++) {
            for (let attr in attrObj) {
              this[i].style[attr] = attrObj[attr]
            }
          }
          return this
        }

        //get  0 1 2 / -1 -2 -3       dom
        //    / null      
        JQuery.prototype.get = function(index) {
          // if (index == null) {
          //   return [].slice.call(this, null)
          // } else {
          //   if (index >= 0) {
          //     return this[index]
          //   } else {
          //     return this[index + this.length]
          //   }
          // }
          return index == null
            ? [].slice.call(this, null)
            : index >= 0
            ? this[index]
            : this[index + this.length]
        }

        //eq  0 1 2 / -1 -2 -3    jq  
        //    null       jq  
        JQuery.prototype.eq = function(index) {
          let dom =
            index == null
              ? null
              : index >= 0
              ? this[index]
              : this[index + this.length]
          return this.pushStack(dom)
        }

        //find             
        //    DOMElement  / string / jq        jq  
        JQuery.prototype.find = function(config) {}

        //add
        JQuery.prototype.add = function(dom) {
          let curObejct = JQuery(dom), //       jq  
            baseObject = this, //    jq  
            newObject = JQuery() //          jq  

          for (let i = 0; i < curObejct.length; i++) {
            newObject[newObject.length++] = curObejct[i]
          }

          for (let i = 0; i < baseObject.length; i++) {
            newObject[newObject.length++] = baseObject[i]
          }

          this.pushStack(newObject)
          return newObject //          jq  
        }

        //end           ,           ,        preventObject        jq  
        //            preventObject  , jq           
        JQuery.prototype.end = function() {
          return this.preventObject
        }

        JQuery.prototype.pushStack = function(deom) {
          // end       jq  , preventObject       jq  ,
          //     deom     jq          jq  
          if (deom.constructor != JQuery) {
            deom = JQuery(deom)
          }
          deom.preventObject = this
          return deom
        }

        JQuery.prototype.init.prototype = JQuery.prototype

        window.$ = window.JQuery = JQuery
      })()

좋은 웹페이지 즐겨찾기