• 如果你有兩個(gè)相鄰的文本位，且希望它們的padding差不多一個(gè)空格，那你可以試試1ch。{ padding-left: 1ch }
  擴(kuò)展閱讀
• 你知道vertical-align可以用百分比嗎？如果你發(fā)現(xiàn)vertical-align: super或top不是你想要的那樣，別去加position: relative; top: -3px之類的代碼，試試看vertical-align: 30%吧。
• input 的寬度一定要注意，當(dāng)它寬度低于某個(gè)臨界值時(shí)候，它的寬度將停留在這個(gè)臨界值，導(dǎo)致有些時(shí)候布局麻煩，所以最好給它設(shè)置個(gè)安全的最小寬度，比如 min-width: 10px。
• input，image，iframe 等不支持偽元素。
• 在 <input> 或 <textarea> 可以使用 oninput 事件，它在元素的值發(fā)生變化時(shí)立即觸發(fā)，而 onchange 在元素失去焦點(diǎn)時(shí)觸發(fā)。另一點(diǎn)，onchange 事件也可作用于 <keygen> 和 <select> 元素。
• 如果你需要在組件中使用 setInterval 或者 setTimeout，那你需要這樣調(diào)用。 擴(kuò)展閱讀

compnentDidMount() {
 this._timeoutId = setTimeout( this.doFutureStuff, 1000 );
 this._intervalId = setInterval( this.doStuffRepeatedly, 5000 );
}
componentWillUnmount() {
 clearTimeout( this._timeoutId );
 clearInterval( this._intervalId );
}

• 如果你需要使用 requestAnimationFrame() 執(zhí)行一個(gè)動(dòng)畫(huà)循環(huán)

// How to ensure that our animation loop ends on component unount
componentDidMount() {
  this.startLoop();
}

componentWillUnmount() {
  this.stopLoop();
}

startLoop() {
  if( !this._frameId ) {
    this._frameId = window.requestAnimationFrame( this.loop );
  }
}

loop() {
  // perform loop work here
  this.theoreticalComponentAnimationFunction()
  
  // Set up next iteration of the loop
  this.frameId = window.requestAnimationFrame( this.loop )
}

stopLoop() {
  window.cancelAnimationFrame( this._frameId );
  // Note: no need to worry if the loop has already been cancelled
  // cancelAnimationFrame() won't throw an error
}

• 媒體查詢

@media screen and (max-width: 500px) and (min-resolution: 2dppx) {
    .yourLayout {
        width:100%;
    }
}

• 圖片加載新方式

537f5932ly1ffrotx8adqj21kw162gxx.jpg

• 獲取元素尺寸知多少


• 關(guān)于數(shù)字

// 無(wú)效語(yǔ)法：
42.toFixed( 3 ); // SyntaxError
// 下面的語(yǔ)法都有效：
(42).toFixed( 3 ); // "42.000"
0.42.toFixed( 3 ); // "0.420"
42..toFixed( 3 ); // "42.000"
42 .toFixed(3); // "42.000"

• 簡(jiǎn)單值總是通過(guò)值賦值的方式來(lái)賦值（null, undefined, string, number, bool, symbol )，復(fù)合值總是通過(guò)引用復(fù)制的方式來(lái)賦值。

var a = 1;
b = a;
b++
a // 1
b // 2

var arr = [1, 2, 3]
brr = arr
arr.push(4)
arr // [1, 2, 3, 4]
brr // [1, 2, 3, 4]

• 常用的返回毫秒數(shù)

+ new Date()

更優(yōu)雅的方式
(new Date()).getTime()

Date.now()

• 數(shù)組的一些處理

CallApi(`/message/${id}`, null, 'DELETE').then(r => {
  if (r.code === 'SUCCESS') {
    let index = this.state.messages.findIndex(i => i.id == id);
    // 快速?gòu)?fù)制一個(gè)新數(shù)組
    let newArr = [...this.state.messages];
    newArr.splice(index, 1);
    this.setState(s => ({messages: newArr}))
  } else {
    r.msg && Toast.info(r.msg)
  }
});

// 解構(gòu)，如果需要改變變量名
let { message: newMessage } = this.state

• 對(duì)價(jià)格數(shù)組進(jìn)行去0操作，最多保留兩位數(shù)

function myNum(s) {
  var s1 = +s;
  if(!s1) return 0;
  var s2 = s1.toFixed(2) ;
  if(s2.substr(-1) !== '0'){
    return s2
  } else if(s2.substr(-2,1) !== '0' && s2.substr(-1) === '0'){
    return s1.toFixed(1)
  } else {return s1.toFixed(0)}
}

• 正則匹配

'font-size:20px'.replace(/:\s*(\d+)px/g, (a,b)=>{
               return `:${b*0.02}rem`
            })

• 如何寫(xiě)一個(gè)類似antd Toast 的組件

import React from 'react';
import {render} from "react-dom";
import {Toast} from 'react-weui';

class ToastContainer extends React.PureComponent {
    state={show: true};
    componentDidMount() {
        const {timer, cb} = this.props;
        setTimeout(() => {this.setState({show: false}); cb && cb()}, timer*1000)
    }
    render() {
        const {type, content} = this.props;
        const {show} = this.state;
        return (
            show && <Toast icon={type} show={true}>{content}</Toast>
        )
    }
}

function hide() {
    render(<div />, document.getElementById('toast'))
}

function notice(content, timer, cb, type) {
    hide();
    const root = React.createElement(ToastContainer, {content, timer, cb, type});
    render(root, document.getElementById('toast'))
}


export default {
    success: (content, timer=3, cb) => notice(content, timer, cb, 'success-no-circle'),
    fail: (content, timer=3, cb) => notice(content, timer, cb, 'cancel'),
    info: (content, timer=3, cb) => notice(content, timer, cb, 'info-circle'),
    loading: (content, timer=3, cb) => notice(content, timer, cb, 'loading'),
    hide: () => hide()
};

• 微信頁(yè)面，長(zhǎng)按會(huì)彈出系統(tǒng)菜單如何解決？
  有一個(gè)按鈕，用戶需要長(zhǎng)按它說(shuō)話，但是顯示在微信里面的網(wǎng)頁(yè)，長(zhǎng)按會(huì)出現(xiàn)復(fù)制的菜單，造成用戶體驗(yàn)不流暢。
  如何解決呢？

1. 首先為按鈕添加樣式 user-select:none
2. 其次在按鈕的 onTouchStart 事件上這樣組織代碼

onTouchStart = e => {
    e.preventDefault();
    setTimeout(() => { 你的核心代碼 }, 0)
}