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.hasOwnPropertyfunction 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 :

//缺点不能遍历出symbolfunction 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;}复制代码

如图所示: