最近学了啥(一)

  • 如果你有两个相邻的文本位,且希望它们的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
  • 获取元素尺寸知多少
![a2.png](http://upload-images.jianshu.io/upload_images/111568-40e1fbc6a94bc222.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  • 关于数字
// 无效语法:
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)
}

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 11,872评论 1 91
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 2,817评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 2,405评论 0 6
  • 关于css常见问题,大多是移动端的。 简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用...
    苏水儿阅读 3,765评论 0 8
  • 杨庆瑞阅读 133评论 0 2