jQuery源碼解析之addClass(),removeClass(),toggleClass()和hasClass()

1、$().addClass()
做用:
向目標元素添加一個或多個類名html

源碼:node

//向目標元素添加一個或多個類名
    //源碼8401行
    addClass: function( value ) {
      var classes, elem, cur, curValue, clazz, j, finalValue,
        i = 0;
      //若是addClass(value)的value是一個function
      //那麼就經過call讓目標元素this調用該function
      if ( isFunction( value ) ) {
        return this.each( function( j ) {
          // function(index,currentclass)
          // index 對應 j,做用是獲取多個目標元素的下標;
          // currentClass 對應 getClass(this),做用是獲取當前元素的類名,方便加空格
          jQuery( this ).addClass( value.call( this, j, getClass( this ) ) );
        } );
      }
      //將(多個)類名轉爲數組形式
      classes = classesToArray( value );
      if ( classes.length ) {
        //多個目標元素
        while ( ( elem = this[ i++ ] ) ) {
          //獲取當前值
          curValue = getClass( elem );
          //若是目標元素是元素節點而且用空格左右包起來 " "+value+" "
          cur = elem.nodeType === 1 && ( " " + stripAndCollapse( curValue ) + " " );

          if ( cur ) {
            j = 0;
            //一個個類名
            while ( ( clazz = classes[ j++ ] ) ) {
              //當前元素沒有和要添加的類名重複的話就添加
              if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
                cur += clazz + " ";
              }
            }
            //最後,確認通過處理後的類名集合是否和處理前的類名集合相同
            //若是相同,就setAttribute,從新渲染,不然不從新渲染(性能優化)
            // Only assign if different to avoid unneeded rendering.
            finalValue = stripAndCollapse( cur );
            if ( curValue !== finalValue ) {
              //最後經過setAttribute,添加類名
              elem.setAttribute( "class", finalValue );
            }
          }
        }
      }
      return this;
    },

解析:
(1)getClass()
做用:
獲取目標元素的類名express

源碼:數組

//源碼8377行
  function getClass( elem ) {
    return elem.getAttribute && elem.getAttribute( "class" ) || "";
  }

(2)classesToArray
做用:
將(多個)類名轉爲數組形式性能優化

源碼:性能

//源碼8382行
  function classesToArray( value ) {
    //元素的className若是有多個類名的話,是以數組形式保存的,那就直接返回
    if ( Array.isArray( value ) ) {
      return value;
    }
    //若是元素類名是string類型的話
    if ( typeof value === "string" ) {
      return value.match( rnothtmlwhite ) || [];
    }
    return [];
  }

(3)stripAndCollapse
做用:
將vaues以空格分開,再以空格拼接優化

源碼:this

// 源碼8370行
  // Strip and collapse whitespace according to HTML spec
  // https://infra.spec.whatwg.org/#strip-and-collapse-ascii-whitespace
  function stripAndCollapse( value ) {
    var tokens = value.match( rnothtmlwhite ) || [];
    return tokens.join( " " );
  }

綜上:
能夠看到 addClass() 的思路是:
① 獲取元素當前類名集合 a
② 若是要添加的類名 b 不重複,則將 b 添加進 a 裏
③ 最後使用elem.setAttribute("class",a)完成spa

2、$().removeClass
做用:
移除類,若是沒有參數,則移除目標元素全部類名code

源碼:

//源碼8449行
    removeClass: function( value ) {
      var classes, elem, cur, curValue, clazz, j, finalValue,
        i = 0;
      //做用同上
      if ( isFunction( value ) ) {
        return this.each( function( j ) {
          jQuery( this ).removeClass( value.call( this, j, getClass( this ) ) );
        } );
      }
      //若是沒有規定參數,則刪除全部類
      if ( !arguments.length ) {
        return this.attr( "class", "" );
      }
      //將(多個)類名轉爲數組形式
      classes = classesToArray( value );

      if ( classes.length ) {
        while ( ( elem = this[ i++ ] ) ) {
          curValue = getClass( elem );

          // This expression is here for better compressibility (see addClass)
          cur = elem.nodeType === 1 && ( " " + stripAndCollapse( curValue ) + " " );

          if ( cur ) {
            j = 0;
            while ( ( clazz = classes[ j++ ] ) ) {
              // 若是當前元素的類名裏有要移除的類,
              // 就將該類替換成" "
              // Remove *all* instances
              while ( cur.indexOf( " " + clazz + " " ) > -1 ) {
                cur = cur.replace( " " + clazz + " ", " " );
              }
            }
            //同上
            // Only assign if different to avoid unneeded rendering.
            finalValue = stripAndCollapse( cur );
            if ( curValue !== finalValue ) {
              elem.setAttribute( "class", finalValue );
            }
          }
        }
      }
      return this;
    },

能夠看到 addClass() 的思路是:
① 獲取元素當前類名集合 a
② 若是要移除的類名 b 不重複,則將 a 裏面的 b 替換成空格 " "
③ 最後使用elem.setAttribute("class",a)完成移除類名

3、$().toggleClass
做用:
切換類

源碼:

//stateVal爲true,則添加類,false則移除類
    //源碼8497行
    toggleClass: function( value, stateVal ) {
      var type = typeof value,
        //若是value是string類型或者是數組類型的話,爲true,反之爲false
        isValidValue = type === "string" || Array.isArray( value );
      //true添加類,false移除類
      if ( typeof stateVal === "boolean" && isValidValue ) {
        return stateVal ? this.addClass( value ) : this.removeClass( value );
      }
      //同上
      if ( isFunction( value ) ) {
        return this.each( function( i ) {
          jQuery( this ).toggleClass(
            value.call( this, i, getClass( this ), stateVal ),
            stateVal
          );
        } );
      }

      return this.each( function() {
        var className, i, self, classNames;

        if ( isValidValue ) {

          // Toggle individual class names
          i = 0;
          self = jQuery( this );
          classNames = classesToArray( value );

          while ( ( className = classNames[ i++ ] ) ) {
            //若是目標元素已經有要toggle的className,那麼就移除它
            // Check each className given, space separated list
            if ( self.hasClass( className ) ) {
              self.removeClass( className );
            } else {
              //不然就添加類
              self.addClass( className );
            }
          }

          // Toggle whole class name
        }
        //若是$.toggleClass()沒有值或者該值爲布爾值
        else if ( value === undefined || type === "boolean" ) {
          className = getClass( this );
          //若是目標元素有類的話,就先用__className__屬性保存類名
          if ( className ) {

            // Store className if set
            dataPriv.set( this, "__className__", className );
          }

          // If the element has a class name or if we're passed `false`,
          // then remove the whole classname (if there was one, the above saved it).
          // Otherwise bring back whatever was previously saved (if anything),
          // falling back to the empty string if nothing was stored.
          //若是目標元素存在setAttribute的方法話
          if ( this.setAttribute ) {
            //若是已有類名/value=false,則移除全部類名
            //若是沒有類名而且value=true,
            //則從dataPriv中從新獲取以前保存過的__className__當作目標元素的類名
            this.setAttribute( "class",
              className || value === false ?
                "" :
                dataPriv.get( this, "__className__" ) || ""
            );
          }
        }
      } );
    },

解析:
主要是兩個 if
(1) if ( typeof stateVal === "boolean" && isValidValue )
這個就是$().toggleClass(value,truefalse) 的第二個參數的做用了,
true 即 addClass(),false 即 removeClass()

(2)if(isValidValue )
這個是隻有一個參數的狀況
利用 hasClass 判斷是否 add/removeClass

(3)若是$.toggleClass()沒有值或者第一個值爲 true 的話
若是目標元素有類名的話,就使用dataPriv來保存類名,
若是目標元素有setAttribute的話,則將 className 設置爲dataPriv裏保存的值。

4、$().hasClass
做用:
檢查目標元素是否包含指定的類

源碼:

//源碼8568行
    hasClass: function( selector ) {
      var className, elem,
        i = 0;

      className = " " + selector + " ";
      while ( ( elem = this[ i++ ] ) ) {
        if ( elem.nodeType === 1 &&
          //關鍵代碼
          ( " " + stripAndCollapse( getClass( elem ) ) + " " ).indexOf( className ) > -1 ) {
          return true;
        }
      }

      return false;
    }

這個代碼還挺簡單的,就不解析了。


(完)

相關文章
相關標籤/搜索