js

[chenjf5]

如何实现拖动效果

• 事件注册

  为什么不把三个事件都绑定在被拖动的div上？因为mousemove不断触发过程中还在不断修改dom,所以被拖动的div移动速度小于光标移动速度，导致出现卡顿现象，如果把mousemove和mouseup事件放在document上，只要就可以实现光标在那里，拖动div就在那里。

  const dialog = document.querySelector(`.${this.state.snailClassName} .snail-dialog-title`);
  //被拖动的div上绑定mousedown事件
  dialog.addEventListener('mousedown', this.mouseDown, false);
  //在document上绑定mousemove和mouseup事件
  document.addEventListener('mousemove', this.mouseMove, false);
  document.addEventListener('mouseup', this.mouseUp, false);

• 事件回调函数的实现

  下面的加减法计算拖动框的位置是为了最后光标还停留在拖动框内部的原始位置。

  mouseDown = (e) => {
  const dialog = document.querySelector(`.${this.state.snailClassName}`);
  this.drag = {
  mouseActive: true,
  eleXY: {
  dx: e.pageX - dialog.offsetLeft,
  dy: e.pageY - dialog.offsetTop
  }
  };
  }
  mouseMove = (e) => {
  let dialog = document.querySelector(`.${this.state.snailClassName}`);
  if (this.drag.mouseActive && e.buttons) { 
  let x = e.pageX;      
  let y = e.pageY;       
  var moveX = x - this.drag.eleXY.dx;
  var moveY = y - this.drag.eleXY.dy;    
  dialog.style.cssText = 'top:' + moveY + 'px;left:' + moveX + 'px';
  }   
  e.preventDefault();
  }
  mouseUp = (e) => {
  this.drag.mouseActive = false;
  }

[chenjf5]

在react中，按钮实现点击效果

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import './buttonAnim.less';
/**
 * ButtonAnimate组件是给按钮添加特效的组件
 * 1 color 可选，点击时背景变化颜色
 * 2 wrapClassName 可选，覆盖改类的样式
 * @classdesc ButtonAnimate
 * @extends Component
 */
export default class ButtonAnimate extends Component { 
  constructor(props) {
    super(props);
    this.btn = null;
    this.RETCOLOE = '#fff';
  }

  static defaultProps = {
    color: 'rgba(218, 213, 213, 1)',
    wrapClassName: 'snail'
  }
  static propTypes = {
    color: React.PropTypes.string,
    wrapClassName: React.PropTypes.string
  }

  componentDidMount() {
    const containers = ReactDOM.findDOMNode(this.btn);
    this.canvas = document.createElement('canvas');
    this.canvas.addEventListener('click', this.press, false);
    containers.appendChild(this.canvas);
    this.canvas.style.width = '100%';
    this.canvas.style.height = '100%';
    this.canvas.width = this.canvas.offsetWidth;
    this.canvas.height = this.canvas.offsetHeight;
  }
  componentWillUnmount() {
    this.canvas.removeEventListener('click', this.press, false);
    this.canvas = null;
    this.color = null;
    this.element = null;
    this.canvasContext = null;
    this.radius = null;
    this.centerX = null;
    this.centerY = null;
  }
  press = (event) => {
    this.color = this.props.color;
    this.element = event.toElement;
    this.element.style.opacity = 0.25;
    this.canvasContext = this.element.getContext('2d');
    this.radius = 0;
    this.centerX = event.offsetX;
    this.centerY = event.offsetY;
    this.canvasContext.clearRect(0, 0, this.element.width, this.element.height);
    this.draw();
  }

  draw = () => {
    this.canvasContext.beginPath();
    this.canvasContext.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI, false);
    this.canvasContext.fillStyle = this.color;
    this.canvasContext.fill();
    this.radius += 2;
    if (this.radius < this.element.width) {
      requestAnimationFrame(this.draw);
    }
    else {
      this.element.style.opacity = 0;
      //this.canvasContext.fillStyle = this.RETCOLOE;
      //this.canvasContext.fill();
    }
  }
  getletChildren = () => {
    let children = this.props.children;
    const _this = this;   
    let snailClassName = _this.props.wrapClassName + '-button';
    return React.cloneElement(children, {
      className: classnames(snailClassName, children.props.className),
      ref: (e) => _this.btn = e
    });
  } 

  render() {
    return this.getletChildren();
  }
}

---

buttonAnim.less

.snail-button {
  position: relative;
  color: #7d8191;
  overflow: hidden;
  &:hover {
    color: rgba(158, 158, 158, 0.81);
  }
}
.snail-button canvas {
    opacity: 0.25;
    position: absolute;
    top: 0;
    left: 0;
}

[chenjf5]

Worker案例

• 如果worker实列引用为0，该worker空闲后立即会被关闭

• 如果worker实列引用不为0，该worker空闲也不会被关闭

  index.js

  
  let w = new Worker("js/workers.js");
  w.onmessage = function (event) {
  debugger;
  document.getElementById("result").innerHTML=event.data.i + event.data.name;
  w.postMessage(event.data.i)
  if(event.data.i > 10) {
  w.terminate();
  }
  };

  w.oerror = function(e){ console.log('erro: ' + e.message); };

  ---
  > worker.js

  let i = 0; setInterval(() => { i++; let data = { i, name: 'test' } postMessage(data) }, 100);

onmessage =function(event) { console.log(event.data); }

[chenjf5]

window.onerror

window.onerror用来捕获js异常，但是如果异常是在try里抛出被catch住window.onerror是不会被触发的