pa- week 28

week 28

（关于输入框和正则的一些东西）

现在我们的input 输入框有一些bug ，根据业务的需求，在输入卡号的时候需要实时的每隔四位输入一个空格。
原来的操作方案是这样的

1. 用watch 来监听 用户输入的卡号，通过卡号的改变，用正则替换新值用空格分割

if(value.length<8){
    return value.replace(/(\d{4})/,"$1 ");
}else if(value.length<12){
    return value.replace(/(\d{4})(\d{4})/,"$1 $2 ");
}else if(value.length<16){
    return value.replace(/(\d{4})(\d{4})(\d{4})/,"$1 $2 $3 ");
}else{
    return value.replace(/(\d{4})(\d{4})(\d{4})(\d{4})/,"$1 $2 $3 $4 ");
}

2. 这样做法是有两个Bug。第一个就是删除的时候会导致光标跟不上删除的数字，第二个就是在某些机型上会出现输入时卡顿严重的情况。
3. 解决方案
   • 在输入的卡号被正则替换赋值的动作时，设置一个50ms 的延时。
   • 在监听卡号的改变时设置一个节流函数，只有在每四位的时候才会用正则的replace 替换。其余位数不做处理。

关于return 的函数的一些问题

1. 由于不熟练的缘故。当通过函数传参的时候 通过参数的改变去赋值的话是无效的。比如在某些情况下并不是异步的原因

var obj = {};
obj.a = "aa";
var replaceStr =  function(str){
  str = "bb";
}
obj.a   //输入 “aa”
replaceStr(obj.a)  //调用函数 
undefined
obj.a  // 输出 "aa" obj.a的值并未改变

2. 解决方法。就是传一个callback 函数进去。在callback 函数中执行对应的操作

var obj = {};
obj.a = "aa";

var replaceStr =  function(cb){
  cb();
}
replaceStr(function(){obj.a = "bb"})
undefined
obj.a. // 输入的为"bb"
"bb"

3. 在某些情况下 需要函数是否执行来做判断，如果执行了，就终止其他的操作。如果没有执行就走原来的逻辑。
   • 解决方法：在函数里面返回一个return true，然后在需要调用它的地方用if来判断。如果执行了是true。未执行就是false 。就可以走相关的逻辑了。