那些我所不知道前端的實現方式與新特性

此篇打算記錄從2019年開始，記錄天天學習或者遇到的trouble.

2019.01.12

1.Optional chaining（?. )

demo(old)

let data
if(myObj && myObj.firstProp && myObj.firstProp.secondProp && myObj.firstProp.secondProp.actualData) data = myObj.firstProp.secondProp.actualData複製代碼

demo(new)

const data = myObj?.firstProp?.secondProp?.actualData複製代碼

插件處理： @babel/plugin-proposal-optional-chaining

2.This behavior/bug has something to do with Object.preventExtension()

相關鏈接：react v8

3.管道操做符|> （當幾個函數鏈式調用時，使用管道操做符能夠加強代碼的可讀性。）

demo(old實現方式)

const shortenText = shortenText(capitalize("This is a long text"));function capitalize(text) {
  return text.charAt(0).toUpperCase() + text.slice(1);
}function shortenText(text) {
  return text.substring(0, 8).trim();
}複製代碼

demo(new) anmazing!!!

const shortenText = "This is a long text" 
  |> capitalize 
  |> shortenText;
  //This is複製代碼

插件處理

裝插件，.babelrc增長配置

{
  "plugins": [["@babel/plugin-proposal-pipeline-operator", {
             "proposal": "minimal" }]]
}複製代碼

2019.01.13

1.css+html實現表單驗證(推薦國外css-hack網站)

用到的僞類

:placeholder-shown（:placeholder-shown CSS 僞類 在 <input> 或 <textarea> 元素顯示 placeholder text 時生效，能夠設置首次聚焦光標，以後輸入後，此樣式不生效）

:valid input正則驗證成功後樣式 反之 :invalid

組合:invalid:not(:focus):not(:placeholder-shown)   

    :invalid:focus:not(:placeholder-shown) 實時驗證

效果圖

requried-fields

valid-fields

demo

html

<form action="#0">

  <div>
    <!-- placeholder=" "是hack，爲了以後輸入的後，利用:not:placeholder-shown選中-->

    <input type="text" id="first_name" name="first_name" required placeholder=" " />
    <label for="first_name">First Name</label>
  </div>
  
  <div>
    <input type="text" id="last_name" name="last_name" required placeholder=" " />
    <label for="last_name">Last Name</label>
  </div>
  
  <div>
    <input type="email" id="email" name="email" required placeholder=" " />
    <label for="email">Email Address</label>
    <div class="requirements">
      Must be a valid email address.
    </div>
  </div>
  
  <div>
    <!--正則驗證pattern-->
    <input type="password" id="password" name="password" required placeholder=" " pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" />
    <label for="password">Password</label>
    <div class="requirements">
      Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.
    </div>
  </div>
  
  <input type="submit" value="Sign Up" />

</form>複製代碼

scss

form {
  max-width: 450px;
  margin: 0 auto;
  
  // positioning context
  > div {
    position: relative;
    background: white;
    border-bottom: 1px solid #ccc;
    
    // Looks like placeholder
    > label {
      opacity: 0.3;
      font-weight: bold;
      position: absolute;
      top: 22px;
      left: 20px;
    }
    
    > input[type="text"],
    > input[type="email"],
    > input[type="password"] {
      width: 100%;
      border: 0;
      padding: 20px 20px 20px 50px;
      background: #eee;
      
      &:focus {
        
        // removing default focus style
        outline: 0;
        // adding new one
        background: white;
        
        & + label {
          opacity: 0;
        }
      }
      
      &:valid {
        background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/check.svg);
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: 20px 20px;
        & + label {
          opacity: 0;
        }
      }
      
      &:invalid:not(:focus):not(:placeholder-shown) {
        background: pink;
        & + label {
          opacity: 0;
        }
      }
      
      &:invalid:focus:not(:placeholder-shown) {
        & ~ .requirements {
          max-height: 200px;
          padding: 0 30px 20px 50px;
        }
      }
      
    }
    
    .requirements {
      padding: 0 30px 0 50px;
      color: #999;
      max-height: 0;
      transition: 0.28s;
      overflow: hidden;
      color: red;
      font-style: italic;
    }
    
  }
  
  input[type="submit"] {
    display: block;
    width: 100%;
    margin: 20px 0;
    background: #41D873;
    color: white;
    border: 0;
    padding: 20px;
    font-size: 1.2rem;
  }
  
}

body {
  background: #333;
  font-family: 'PT Sans', sans-serif;
  padding: 20px;
}
* {
  box-sizing: border-box;
}
複製代碼