JQuery工具方法整理

jquery工具方法整理

或許有人說jquery不是過期了嗎？怎麼還用，但我要告訴你， 沒有永恆的庫或者框架，只有其中的思想是最寶貴的，也能夠結合遊戲來說，就是一代版本一代神

jquery工具方法總結

1.下載jquery3.5.1

因爲本人是經過yarn進行下載的，若是沒有安裝yarn，能夠參考後面的連接或者用npm包下載,我使用的命令以下:  yarn add jquery@3.5.1 [注意，這裏的jquery的q千萬不能大寫，我已經掉幾回坑了!!!]

安裝詳細請參考 :
npm學習npm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org    //cnpm安裝    
複製代碼

yarn官網 yarn

安裝完成後文件夾以下:

2.jquery工具方法總結

（1）檢測類型方法

以前寫過，可是太匆匆忙忙了，就連解釋都沒有寫了，此次寫完整些, 返回值爲小寫開頭的數據類型字母，例如String類型的返回string

var class2type = {};//定義一個空對象
var toString = class2type.toString;//至關於Object.prototype.toString
["Boolean","Number","String","Function","Array","Date","RegExp","Object","Error","Symbol","BigInt","GeneratorFunction"].forEach(item=>{
    class2type["[object "+item+"]"] = item.toLowerCase(); //遍歷數組爲class2type添加屬性和對應的值，如class2type[object String]:string
  })
  function toType(obj){
      if(obj==null){//排除null和undefined
        return obj+'';
      }
      return typeof obj === "object" || typeof obj === "function" ?
              class2type[toString.call(obj)] || "object" : typeof obj;
    }
複製代碼

具體以下：

2.判斷是不是函數

用於檢測是不是一個函數，返回值爲 布爾值

//這裏的nodeType是爲了解決兼容問題
//在某些瀏覽器中，typeof對HTML <object>元素返回「function」
//(即「文件類型」。createElement("object") === "function" ')。
//咱們不想將*任何* DOM節點分類爲函數。
function isFunction(obj){//判斷是不是函數
     return typeof obj === 'function' && typeof obj.nodeType !== "number";
}
複製代碼

3.判斷是不是window

用於判斷是不是一個window，返回值爲 布爾值

//這裏巧用了window上面有個window屬性
function isWindow(obj){//判斷是不是window
     return obj!=null && obj.window === window;
}
複製代碼

4.判斷是不是純粹的對象

用於判斷是不是純粹 【{},new Object,Object.create(null)】的對象，返回值爲 布爾值

var getProto = Object.getPrototypeOf;//獲取原型
var hasOwn = class2type.hasOwnProperty;//至關於object.prototype.hasOwnProperty
function isPlainObject(obj){//判斷是不是純粹的對象({},new Object,Object.create(null))
      var proto = getProto(obj),
          Ctol;

      if(!obj || toType(obj)!=="object"){//檢測是不是object類型，不是則直接返回false
        return false
      }

      //判斷proto上面是否有constructor這個屬性，有則直接獲取構造器
      Ctol = hasOwn.call(ptoto,"constructor") && proto.constructor;
      return typeof Ctol === "function" && fnToString.call( Ctor ) === ObjectFunctionString;
}
複製代碼

5.判斷是不是一個空對象

用於判斷是不是一個空對象，返回值爲 布爾值

原jq代碼 :

//缺陷:沒法檢測Symbol，以及原型上添加的屬性也會被forin循環出來
function isEmptyObject: function( obj ) {
        var name;
        for ( name in obj ) {//循環若是有屬性則直接返回false
            return false;
        }
        return true;
}
複製代碼

如圖:`咱們是但願只要當前對象沒有屬性，則被判斷爲空對象，而不是原型上有對象也被認爲不是空對象

修改以後

function isEmptyObject(obj){//判斷是不是一個空對象
      let arr = [
        ...Object.getOwnPropertyNames(obj),//獲取自身上的屬性
        ...Object.getOwnPropertySymbols(obj)//獲取symbol
      ]
      return arr.length > 0;
 }
複製代碼

6.檢測是不是類數組

用於檢測是不是類數組或者數組，返回值爲 布爾值

function isArrayLike( obj ) {
    var length = !!obj && "length" in obj && obj.length,//obj存在而且有length屬性，則直接回去obj的length
        type = toType( obj );//前面的檢測類型

    if ( isFunction( obj ) || isWindow( obj ) ) {//由於函數和對象中也有length屬性，因此要排除他們
        return false;
    }

    return type === "array" || length === 0 ||
        typeof length === "number" && length > 0 && ( length - 1 ) in obj;
}
複製代碼

7.jq的each遍歷

用於遍歷數組或者對象，返回值爲 每一項和索引

原jq :

//缺陷不能遍歷出symbol
function each( obj, callback ) {
    var length, i = 0;

    if ( isArrayLike( obj ) ) {
        length = obj.length;
        for ( ; i < length; i++ ) {
            if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                break;
            }
        }
    } else {
        for ( i in obj ) {
            if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                break;
            }
        }
    }

    return obj;
 }
複製代碼

如圖所示:不能遍歷出symbol 

修改後 :

function getPropertyname(obj){//獲取symbol加當前對象的屬性，不包括原型上的屬性
  return [
    ...Object.getOwnPropertyNames(obj),
    ...Object.getOwnPropertySymbols(obj)
  ]
}
function each( obj, callback ) {
    var length, i = 0;

    if ( isArrayLike( obj ) ) {
        length = obj.length;
        for ( ; i < length; i++ ) {
            if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                break;
            }
        }
    } else {
         let keys = getPropertyname(obj),
             length = keys.length
         for(;i<length;i++){
           if ( callback.call( obj[keys[i]], i, obj[keys[i]] ) === false ) {
                       break;
           }
         }
    }
    return obj;
}
複製代碼

如圖所示: