jquery工具方法整理

时间:2021-1-8 作者:admin

经历了第一次写文章,有少许惊喜,因为没有想到能够被推荐到首页,惊喜之中又带有紧迫感,因为临近就业,所以想抓紧时间复习知识,丰富自己的知识体系。今天,便想要总结的是jquery3.5.1版本的工具方法。或许有人说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;
}

如图所示:

最后还是很感谢那些给我第一篇文章点赞和鼓励我的人,谢谢你们,往后的日子会继续更新文章,当然如果有写的不好的地方请提出来,希望今后一起进步加油!!!奥利给

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。