优化方法总结

最新推荐文章于 2022-09-22 09:03:37 发布

时清云

最新推荐文章于 2022-09-22 09:03:37 发布

阅读量281

点赞数 1

分类专栏： javascript 文章标签：简洁的方法更少的代码实现更多的功能

本文链接：https://blog.csdn.net/xiaolinlife/article/details/91403537

版权

javascript 专栏收录该内容

108 篇文章 2 订阅

订阅专栏

这篇文章主要是总结平时用到的一些更优的方法或者看到别人用的比较好的方法。积少成多。
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;
  }

7.对象的解构赋值妙用
先看一下具体的业务场景：一个对象里面包含很多值，但是只有这个对象里面的其中四个值有值，按钮才会点亮。

let buttonShow = false;
let user =  {
        chan: "",
        busType: "",
        comName: "",
        comTown: "", 
        comProvince: "", 
        comCounty: "", 
        comCity: "", 
        conName: "", 
        conPhone: "", 
        proTypeValue: ""
      }
 // 只有当chan，comName，comCity  这三个值不为空值时，按钮才会点亮
 let {chan,comName,comCity} = user;  // 对象的解构赋值
 if(chan&&comName&&comCity){
     buttonShow = true;
 }
// 对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。
// 例一
let { log, sin, cos } = Math;

// 例二
const { log } = console;
log('hello') // hello

8.获取cookie中的特定值

/**
     * 获取cookie
     * @param name
     * @param value
     * @param days
     * @returns {*}
     */
  getCookie (name, value, days) {
    if (arguments.length === 1) {
      let nameEQ = name + '=';
      // 这一步很关键
      let ca = document.cookie.split(';');
      for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
      }
      return null;
    } else if (arguments.length > 1) {
      this.setCookie(name, encodeURIComponent(value), days);
    }
  };

cookie: uuid_tt_dd=10_9752424420-1616997120720-293824; UN=xiaolinlife; p_uid=U010000; Hm_ct_6bcd52f51e9b3dce32bec4a3997715ac=6525*1*10_9752424420-1616997120720-293824!5744*1*xiaolinlife; UserName=xiaolinlife; UserInfo=c7e5bd65d71c4c2c888008227819506a; UserToken=c7e5bd65d71c4c2c888008227819506a;
 
getCookie('UserToken')  // c7e5bd65d71c4c2c888008227819506a