• 工作中遇到的两个问题-正则以及console


    一.今天做点击按钮验证邮箱时,遇到以下几个问题:

      (1)点击按钮后,执行if(regExp.test(str)),出现一种奇怪的现象:第一次输入正确邮箱验证通过,第二次输入正确邮箱就返回false,第三次又验证通过....

    自己百思不得其解,直接找老大调试。老大用谷歌自带调试工具弄了20分钟,也没找到原因。

    后面自己通过百度搜索和360搜索都没搜到,用https://g.ttlsa.com/一搜,就找到了原因。原因是regExp.lastIndex惹的货。原来老大和我因为时间太长,忘记了这个东西,这是正则里面很简单的问题。

    只要regExp里面的正则表达式包含g属性(也就是全局属性),那么regExp就会保存上次的lastIndex值。因此就出现:

    第一次验证通过后,由于设置了g属性,因此lastIndex值就变成了str的长度。    第二次验证时,直接从lastIndex开始,因此就会返回false。这时lastIndex就会变成0.第三次验证时,又可以验证通过。

    解决办法:在if语句里面,执行regExp.lastIndex=0,就可以解决这个问题了。

      (2)在事件委托时,需要判断target是否是I标签,我用的是if(target == $("i")[0])。老大说:你应该通过if($(target).prop("nodeName") == "I")去判断,减少了再去找I元素引起的Dom操作性能问题,然后我问:那要有很多歌I元素呢,他说你可以通过if($(target).prop("nodeName") == "I"&&$(target).hasClass("特有类"))等等这样特有的属性来判断。最后,我问了一句为啥用prop而不用attr,他说,你自己去百度。然后我就去百度了。区别:

      1.DOM 对象属性(property)及 HTML 标签属性(attribute),prop操作property,attr操作attribute。DOM对象属性通过元素.property来取得,和设置。HTML标签属性,通过setAttribute和getAttribute来设置。
      2. HTML元素的内置build-in属性,attribute和property共享数据,attribute更改了会对property造成影响,反之亦然,但是两者的自定义属性是独立的数据,即使name一样,也互不影响,但是IE6、7没有作区分,依然共享自定义属性数据。
      3.并不是所有的attribute与对应的property名字都一致,比如刚才使用的attribute 的class属性,使用property操作的时候应该是这样className。t.className='active2';
      4.类似于input的checked属性等,attribute取得值是HTML文档字面量值,property是取得计算结果(true or false),property改变并不影响attribute字面量,但attribute改变会影响property计算。
        var t=document.getElementsByTagName('input');
         console.log(t.getAttribute('checked'));  //null
         console.log(t.checked);        //false;
         t.setAttribute('checked','checked');
          console.log(t.getAttribute('checked'));    //checked
          console.log(t.checked);      //true
          t.checked=false;
         console.log(t.getAttribute('checked'));    //checked
         console.log(t.checked);          //false
      5. 对于一些和路径相关的属性,两者取得值也不尽相同,但是同样attribute取得是字面量,property取得是计算后的完整路径
        var t=document.getElementsByTagName('a');
            console.log(t.getAttribute('href'));//#
            console.log(t.href);//file:///C:/Users/bsun/Desktop/ss/anonymous.html#
      在jQuery1.6之前,.attr()方法在获取一些attributes的时候使用了property值,这样会导致一些不一致的行为。在jQuery1.6中,.prop()方法提供了明确的获取property值的方式,这样.attr()方法仅返回attributes。
      selectedIndextagNamenodeNamenodeTypeownerDocumentdefaultChecked, 和defaultSelected应该使用.prop()方法获取/设置值,因为这几个并没有相应的attibute,只有property。
    (这就解释了我老大为什么要用prop("nodeName")=="I",来处理了)。
      checkbox的checked属性property是一个布尔值,这就意味着只要checked属性在HTML中表现出来了,那么相应的property就应该是true,即使checked没有值,这点儿对其它布尔类型的属性一样适用。
      var elem = $('<input type="checkbox" checked=null(空字符"") /> ');
      console.log(elem[0].checked); //true(true)

      var elem = $('<input type="checkbox" checked=false/> ');
      console.log(elem[0].checked); //true
      
    还有一点:checked attribute并不随着checkedbox的状态而改变,但是checked property却跟着变。因此浏览器兼容的判断checkebox是否被选中应该使用property:
    if ( elem.checked ),if ( $( elem ).prop( "checked" ) ),if ( $( elem ).is( ":checked" ) ),这对其它一些类似于selected、value这样的动态attribute也适用。


    二.由于IE8一下浏览器,不支持原生的console,但是有时为了开发测试,会在js文件添加console打印日志,但是上线时,为了在低版本浏览器下不出问题,可以使用
    if(!window.console){
      window.console = {
        log:function(){},
        time:function(){},
        timeEnd:function(){}
      };
    }


    加油!

     
     
  • 相关阅读:
    pycharm中python文件名使用中划线导致无法自动导入
    (笔记)Ubuntu20.04更换软件源
    (笔记)ROS学习——rosdep update 超时解决方法
    (笔记)国内如何访问GitHub
    java基于TreeMap或ConcurrentSkipListMap实现数据的范围查找
    数字正则式(整数、小数、负数、保留两位小数等)
    写了一个简易的本地缓存fastmap,支持键过期和键排序等
    Timer和ScheduledThreadPoolExecutor的区别及源码分析
    Jenkins Unstable 状态解释
    微信小程序部署流程
  • 原文地址:https://www.cnblogs.com/chaojidan/p/4108777.html
Copyright © 2020-2023  润新知