优化方法总结

这篇文章主要是总结平时用到的一些更优的方法或者看到别人用的比较好的方法。积少成多。
es6语法
1.使用 includes 处理多重条件

  if( code === '202' || code === '203' || code === '204' ){
        someMethod()
    }
    复制代码可以改成
    if( ['202','203','204'].includes(code) ){
        someMethod()
    }

这个方法挺不错的，可以用起来。

css3语法
2.text-transform 应用
假设有个输入框只能输入大写字母，那么如下设置，输入小写字母出现的却是大写字母，可用于身份证输入框或验证码输入框等：

 input {
    text-transform: uppercase;
  }

3.::first-letter 应用实例
::first-letter选中首个字符(用于强调首个字符)

  <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <p>￥ 1000</p>
    </body>
    </html>
    
    p{
      font-weight: bold;
      font-size: 22px;
    }
    p::first-letter{
      font-size: 44px;
      color: red;
    }

结果：在这里插入图片描述
4.使用三元表达式来代替if else
if else写法

 let a = "";
    if(code==="200"){
      a = "努力着";
    }else{
     a = "从不放弃"
    }

三元表达式写法

   let a = "";
    a  =  code==="200" ?  "努力着" :  "从不放弃"
    // 当然 "努力着"和 "从不放弃"都可以换成变量

5.弹出数字键盘

<!-- 有"#" "*"符号输入 -->
<input type="tel">

<!-- 纯数字 -->
<input pattern="\d*">

6.css中这样设置可以遮住整个页面

  <div class="el-dialog__wrapper">
       123
  </div>
  .el-dialog__wrapper{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
  }

时青云

发布了130 篇原创文章 · 获赞 103 · 访问量 26万+

私信关注

猜你喜欢