关于前端:JQuery工具方法整理

或者有人说 jquery 不是过期了吗？怎么还用，但我要通知你，没有永恒的库或者框架，只有其中的思维是最贵重的，也能够联合游戏来讲，就是一代版本一代神

因为自己是通过 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

装置实现后文件夹如下:

之前写过，然而太匆匆忙忙了，就连解释都没有写了，这次写残缺些,返回值为小写结尾的数据类型字母，例如 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;
    }
复制代码

具体如下：

用于检测是否是一个函数，返回值为 布尔值

// 这里的 nodeType 是为了解决兼容问题
// 在某些浏览器中，typeof 对 HTML <object> 元素返回“function”//(即“文件类型”。createElement("object") === "function" ')。// 咱们不想将 * 任何 * DOM 节点分类为函数。function isFunction(obj){// 判断是否是函数
     return typeof obj === 'function' && typeof obj.nodeType !== "number";
}
复制代码

用于判断是否是一个 window，返回值为 布尔值

// 这里巧用了 window 下面有个 window 属性
function isWindow(obj){// 判断是否是 window
     return obj!=null && obj.window === window;
}
复制代码

用于判断是否是纯正 【{},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;
}
复制代码

用于判断是否是一个空对象，返回值为 布尔值

原 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;
 }
复制代码

用于检测是否是类数组或者数组，返回值为 布尔值

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;
}
复制代码

用于遍历数组或者对象，返回值为 每一项和索引

原 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;
}
复制代码

如图所示:

关于前端:JQuery工具方法整理

jquery 工具办法整顿

jquery 工具办法总结

1. 下载 jquery3.5.1

2.jquery 工具办法总结

（1）检测类型办法

2. 判断是否是函数

3. 判断是否是 window

4. 判断是否是纯正的对象

5. 判断是否是一个空对象

6. 检测是否是类数组

7.jq 的 each 遍历