美文网首页
代码的套路简单点

代码的套路简单点

作者: FredericaJ | 来源:发表于2018-11-06 14:37 被阅读0次
    • textarea文本框自适应高度
      给textarea加一个兄弟元素div,并把文本内容同时放入兄弟元素,通过兄弟元素撑开父元素高度,那么只要给textarea加上height:100%属性就行了,代码如下:
    //vue项目
    <temlate>
    <div class="father">
      <div class="brother">{{content}}</div>
      <textarea class="textSelf" v-model="content"></textarea>
    </div>
    </template>
    ....
    <style>
    .father {
      position: relative;
      display: block;
      width: 100%;
      font-size:14px;
      line-height:16px;
      font-family:inherit;
       .brother,,textSelf{
         padding:10px 15px;
       }
      .brother {
        position: relative;
        z-index: -1;
        opacity: 0;
        display: block;
        width: 100%;
      }
      .textSelf {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
        border:none;
        outline:none;
      }
    }
    </style>
    
    • 数字补0操作 slice和padStart方法
    const addZero1 = (num, len = 2) => (`0${num}`).slice(-len)
    const addZero2 = (num, len = 2) => (`${num}`).padStart(len, '0')
    addZero1(3) // 03
    addZero2(32,4)  // 0032
    
    • 判断奇偶数 & 1
    const num=3;
    !!(num & 1)                    // true
    !!(num % 2)                    // true
    
    • 取整 | 0
    1.5 | 0         // 1
    1.2 | 0         // 1
    -1.9 | 0        // -1
    
    • 使用Boolean过滤数组中的所有假值
    const compact = arr => arr.filter(Boolean)
    compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34])
    // [ 1, 2, 3, 'a', 's', 34 ]
    
    • 判断数字
    function  isNumber(obj)  {
          return  obj === +obj
    }
    
    • 判断字符串
    function  isString(obj)  {
        return  obj === obj + ''
    }
    
    • 判断布尔类型
    function  isBoolean(obj)  {
        return  obj === !!obj
    }
    
    • 对象属性的缩写(es6)
    const obj = { x:x, y:y };
    // 等同于
    const obj = { x, y };
    
    • if .. else -> 优化 -> 三目运算
    let big;
    if (x > 10) {   
      big = true; 
    } else{ 
       big = false; 
    }
    
    let  big = x > 10 ? true : false;   //三目运算
    
    • charAt的简化
    "myString".charAt(0);
    //简化
    "myString"[0];   //返回'm'
    
    • ~ 的神奇用法
    (~arr.indexOf('zank') )   等价于   (arr.indexOf('zank')>-1)   
    
    • 字符串转JSON的方式,
    常规的有JSON.parse(string)和eval("("+string+")"),还有一小众用法
    let json = (new Function("return " + string))();  //还可用于字符串转数组等
    
    • 用数组交换两变量的值
    var a=1,
        b=2;
    a=[b,b=a][0];
    
    • 判断浏览器是否IE
    ie11 = !!window.MSInputMethodContext;
    

    参考链接:如何判断是什么浏览器

    JavaScript 复杂判断的更优雅写法

    仅供自娱自乐,不定期整理。

    相关文章

      网友评论

          本文标题:代码的套路简单点

          本文链接:https://www.haomeiwen.com/subject/gakuxqtx.html