常见开发问题整理

规定文字显示行数，多余部分用省略号代替

设置元素宽度

width:200px;
overflow: hidden;//超出文本隐藏
text-overflow: ellipsis;//超出文本省略号显示
display: -webkit-box;//设置为webkit盒模式
-webkit-line-clamp: 2;//2行显示
-webkit-box-orient: vertical;//从上到下垂直排列

不设置宽度，弹性布局。

父元素设置：display:flex,子元素：flex：1

flex: 1;
text-overflow:ellipsis;
white-space:nowrap;
overflow: hidden;

一像素边框的解决方案

原因：不同的设备，不同的设备像素比（dpr）导致的；

通过media来媒体查询

React：style-components解决方案

可设置颜色、类型、粗细，有默认值，也可通过父组件来传递参数

//定义
import styled from 'styled-components'

const border = StyledComp => {
  return styled(StyledComp) `
    position: relative;
    border-radius: ${ props => props.radius || 0 }rem;
    &::after {
      pointer-events: none;
      position: absolute;
      z-index: 999;
      top: 0;
      left: 0;
      content: "";
      border-color: ${ props => props.color || '#ccc' };
      border-style: ${ props => props.style || 'solid' };
      border-width: ${ props => props.width || 0 };

      @media (max--moz-device-pixel-ratio: 1.49),
        (-webkit-max-device-pixel-ratio: 1.49),
        (max-device-pixel-ratio: 1.49),
        (max-resolution: 143dpi),
        (max-resolution: 1.49dppx) {
          width: 100%;
          height: 100%;
          transform: scale(1);
          border-radius: ${ props => props.radius || 0 }rem;
        }
        
      @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
        (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
        (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
        (min-resolution: 144dpi) and (max-resolution: 239dpi),
        (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
          width: 200%;
          height: 200%;
          transform: scale(0.5);
          border-radius: ${ props => props.radius * 2 || 0 }rem;
        }
        
      @media (min--moz-device-pixel-ratio: 2.5),
        (-webkit-min-device-pixel-ratio: 2.5),
        (min-device-pixel-ratio: 2.5),
        (min-resolution: 240dpi),
        (min-resolution: 2.5dppx) {
          width: 300%;
          height: 300%;
          transform: scale(0.3333333);
          border-radius: ${ props => props.radius * 3 || 0 };
        }
        
      transform-origin: 0 0;
    }
  `
}

export default border

包裹一个被加边框的元素后生成一个新的组件

//使用
import border from '@/CommonStyled/border.js'

//包裹使用
const SearchInput  = border(styled.div `...`)

//jsx通过属性传递，ChildComponentStyle是Search组件里面的内容，可以通过{...this.props拿到父组件的属性}
<Search width="1px" radius={0.16}></Search>

//Search.jsx
class Search extends Component {
    render() {
        return (
            <>
                <SearchContainer {...this.props}>
                    <SearchInput {...this.props}>
                        <i className="iconfont">&#xe60e;</i>
                        <span>{this.props.message}</span>
                    </SearchInput>
                </SearchContainer>
            </>
        )
    }
}

vue：styl

//加四周边框
$border(width = 0, color = #ccc, style = solid, radius = 0)
  position relative
  border-radius radius
  &::after
    pointer-events none
    position absolute
    z-index 999
    top 0
    left 0
    content ""
    border-color color
    border-style style
    border-width width

    @media (max--moz-device-pixel-ratio: 1.49),
      (-webkit-max-device-pixel-ratio: 1.49),
      (max-device-pixel-ratio: 1.49),
      (max-resolution: 143dpi),
      (max-resolution: 1.49dppx)
      width 100%
      height 100%
      transform scale(1)
      border-radius radius

    @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49),
      (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),
      (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),
      (min-resolution: 144dpi) and (max-resolution: 239dpi),
      (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx)
      width 200%
      height 200%
      transform scale(0.5)
      border-radius radius * 2

    @media (min--moz-device-pixel-ratio: 2.5),
      (-webkit-min-device-pixel-ratio: 2.5),
      (min-device-pixel-ratio: 2.5),
      (min-resolution: 240dpi),
      (min-resolution: 2.5dppx)
      width 300%
      height 300%
      transform scale(0.3333333)
      border-radius radius * 3

    transform-origin 0 0

//加底部边框
$borderdown($color) 
    position: relative;

    @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) 
      &::before 
        content: " ";
        position: absolute;
        left: 0px;
        bottom: 0px;
        background-color: $color;
        transform: scaleY(0.667);
        height: 1px;
        width: 100%;
      
  
    @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) 
      &::before 
        content: " ";
        position: absolute;
        left: 0px;
        bottom: 0px;
        background-color: $color;
        transform: scaleY(0.5);
        height: 1px;
        width: 100%;
      
  
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) 
      &::before 
        content: " ";
        position: absolute;
        left: 0px;
        bottom: 0px;
        background-color: $color;
        transform: scaleY(0.333);
        height: 1px;
        width: 100%;

//使用
<style lang='stylus' scoped>
    @import "../../assets/style/border";
    @import "../../assets/style/borderDown";
    
    
    .className
        $border(1px,rgba(0,0,0,.08),,8px)
        .childclassName
            $borderdown(rgba(0,0,0,.08))
<style>

函数节流和防抖

节流

所谓节流，就是指连续触发事件，但是在 n 秒中只执行一次函数，节流会稀释函数的执行频率。

对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

时间戳：使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。

// 时间戳版本
function throttle(func, wait) {
    var context, args;
    var previous = 0;//定义初始基准时间戳用于计算差值
    return function() {
        var now = +new Date();
        context = this;//保存this指向，这里作为了回调函数，所以this指向事件对象
        args = arguments;//保存传入的函数参数，e等
        if (now - previous > wait) {
            func.apply(context, args);//通过apply重新定义this指向，并传入参数
            previous = now;
        }
    }
}

使用，第一次触发立即执行，往后每间隔给定时间才执行一次

container.onmousemove = throttle(getUserAction, 1000);
//continer是通过getelementbyId获取的dom，对鼠标滑过监听，事件的回调函数为getUserAction，1000为间隔时间

定时器：当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

// 使用定时器
function throttle(func, wait) {
    var timeout;
    var previous = 0;

    return function() {
        context = this;
        args = arguments;
        if (!timeout) {//如果不存在定时器则向下执行
            timeout = setTimeout(function(){
                timeout = null;
                func.apply(context, args)
            }, wait)//在指定时间后将定时器消除
        }

    }
}

防抖

防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行，真是任性呐!

function debounce(func, wait, immediate) {//immediate（布尔类型）用来控制第一次是否立即执行

    var timeout;

    return function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        //这里判断timeout的时候只有在timeout=null时才不执行，clearTimeout只能清除延时器但是不会将timeout制空，所以每次触发事件都会通过判断并且清除原始延时器，只有在停止触发事件后，延时器将timeout制空才不会通过判断
        if (immediate) {//如果需要立即执行则通过
            var callNow = !timeout;//控制执行回调函数，
            timeout = setTimeout(function(){
                timeout = null;//在指定时间后异步延时的将timeout=null，下次触发事件下面的判断才会通过方可执行回调
            }, wait)
            if (callNow) func.apply(context, args)//只有在延时器将timeout赋值null后才会执行回调函数
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}