最近学了啥（一）

• 如果你有两个相邻的文本位，且希望它们的padding差不多一个空格，那你可以试试1ch。{ padding-left: 1ch }
  扩展阅读
• 你知道vertical-align可以用百分比吗？如果你发现vertical-align: super或top不是你想要的那样，别去加position: relative; top: -3px之类的代码，试试看vertical-align: 30%吧。
• input 的宽度一定要注意，当它宽度低于某个临界值时候，它的宽度将停留在这个临界值，导致有些时候布局麻烦，所以最好给它设置个安全的最小宽度，比如 min-width: 10px。
• input，image，iframe 等不支持伪元素。
• 在 <input> 或 <textarea> 可以使用 oninput 事件，它在元素的值发生变化时立即触发，而 onchange 在元素失去焦点时触发。另一点，onchange 事件也可作用于 <keygen> 和 <select> 元素。
• 如果你需要在组件中使用 setInterval 或者 setTimeout，那你需要这样调用。 扩展阅读

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

• 如果你需要使用 requestAnimationFrame() 执行一个动画循环

// 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

• 获取元素尺寸知多少


• 关于数字

// 无效语法：
42.toFixed( 3 ); // SyntaxError
// 下面的语法都有效：
(42).toFixed( 3 ); // "42.000"
0.42.toFixed( 3 ); // "0.420"
42..toFixed( 3 ); // "42.000"
42 .toFixed(3); // "42.000"

• 简单值总是通过值赋值的方式来赋值（null, undefined, string, number, bool, symbol )，复合值总是通过引用复制的方式来赋值。

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]

• 常用的返回毫秒数

+ new Date()

更优雅的方式
(new Date()).getTime()

Date.now()

• 数组的一些处理

CallApi(`/message/${id}`, null, 'DELETE').then(r => {
  if (r.code === 'SUCCESS') {
    let index = this.state.messages.findIndex(i => i.id == id);
    // 快速复制一个新数组
    let newArr = [...this.state.messages];
    newArr.splice(index, 1);
    this.setState(s => ({messages: newArr}))
  } else {
    r.msg && Toast.info(r.msg)
  }
});

// 解构，如果需要改变变量名
let { message: newMessage } = this.state

• 对价格数组进行去0操作，最多保留两位数

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`
            })

• 如何写一个类似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()
};

• 微信页面，长按会弹出系统菜单如何解决？
  有一个按钮，用户需要长按它说话，但是显示在微信里面的网页，长按会出现复制的菜单，造成用户体验不流畅。
  如何解决呢？

1. 首先为按钮添加样式 user-select:none
2. 其次在按钮的 onTouchStart 事件上这样组织代码

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