Other Interesting Things

// because react will not rerender when props change, so you can use this method to observe props
componentWillRecieveProps(newProps) {
    this.setState({
        opacity: (newProps.visible) ? 1 : 0,
    })
}
// control whether to trigger rerender by checking truely change states or not
shouldComponentUpdate(newProps, newState) {
    return this.state.opacity !== + newProps.visible;
}

window.addEvenListener('beforeunload', (e) => {
    let confirmMessage = '确定退出吗?';
    e.returnValue = confirmMessage; // Chrome 34+
    return confirmMessage; // Chrome 34-
});

class SaveButton extends React.Component {
    constructor() {
        super();
        this.handleSave = this.handleSave.bind(this);
    }
    handleSave() {

    }
    render() {
        return <button onClick={this.handleSave} >Save</button>
    }
}

class Mouse extends React.Component {
    handleMouseOver(e) {
        console.dir(e.target);
        setTimeout(()=> {
            console.log(e.target); // cannot access to e asyncly, you need use e.persist()
        })
    }
}

// Statefulness
class ClickButton extends React.Component {
    constructor() {
        super();
        this.state = {
            counter: 0
        }
    }
    clickHandler() {
        this.setState({
            counter: this.state.counter + 1
        })
    }
    render() {
        return <button onClick={this.clickHandler.bind(this)} >{this.state.counter}</button>
    }
}

// stateless
class ClickButton extends React.Component {
    render() {
        return <button onClick={this.props.clickHandler} >{this.props.counter}</button>
    }
}

// outside Component, this is statefulness, makes pure in more level
class Content extends React.Component {
    constructor() {
        super();
        this.clickHandler = this.clickHandler.bind(this);
        this.state = {
            counter: 0
        }
    }
    clickHandler() {
        this.setState({
            counter: ++this.state.counter
        })
    }
    render() {
        <ClickButton clickHandler={this.clickHandler} counter={this.state.counter} />
    }
}

<input value={this.state.value} onChange={this.onChangeHandle} />

<input type='text' />

<input type='text' onChange={this.onChangeHandler}>

class UncontrolComponent extends React.Component {
    constructor() {
        super()
        this.onSubmitHandle = this.onSubmitHandle.bind(this)
    }
    onSubmitHandle() {
        const value = React.findDOM(this.refs.input).value
        fetch(url, {method:'POST',body:{value}})
    }
    render() {
        return <form>
            <input ref='input'/>
            <button onClick={this.onSubmitHandle}>        
        </form>
    }
}

// in container component
const factoryComponent = Component => {
    class _factoryComponent extends React.Component {
        constructor() {
            super();
            this.state = {
                label: 'Run'
            };
            this.onClickHandler = this.onClickHandler.bind(this);
        }

        onClickHandler() {
            let iframe = document.getElementById('frame').src = 'xxx.com'
        }

        render() {
            return <Component {...this.state} {...this.props} />
        }
    }
    _factoryComponent.displayName = 'ExtendComponent';
    return _factoryComponent;
}

render() {
    let ExtendedButton = factoryComponent(Button);
    let ExtendedLink = factoryComponent(Link);
    let ExtendedLogo = factoryComponent(Logo);
    return <div>
    <ExtendedButton />
    <ExtendedLink />
    <ExtendedLogo />
    </div>
}

// in presentational components
class Button extends React.Component {
    render() {
        return <button onClick={this.props.onClickHandler} >{this.props.label}</button>
    }
}
// transform to function
const Button = props => <button onClick={props.onClickHandler} >{props.label}</button>

const Logo = props => <img src='logo.png' href='#' onClick={props.onClickHandler} />

const Link = props => <a onClick={this.onClickHandler} href='#'>{props.label}</a>

// 定义外盒子
const outer = document.createElement('div');
// 定义内盒子
const inner = document.createElement('div');
// 定义overflow
outer.style.overflow = 'scroll';
// 添加外盒子到body中
document.body.appendChild(outer);
// 添加内盒子到外盒子中
outer.appendChild(inner);
// 根据宽度差计算滚动条宽度
const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
// 移除外盒子
document.body.removeChild(outer);

elem.scrollIntoView({
    behavior: 'smooth',
})

window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY;
    // dosomething with scrollTop
});
// 使用函数节流
window.addEventListener('scroll', throttle(() => {
    const scrollTop = window.scrollY;
    // dosomething with scrollTop
}))
// 定义节流函数,默认1秒触发一次
function throttle(action, wait = 1000) {
    let time = Date.now();
    return function () {
        if ((time + wait - Date.now()) < 0) {
            action();
            time = Date.now();
        }
    }
}
// 或者使用requestAnimationFrame
function throttle(action) {
    let isRunning = false;
    return function() {
        if (isRunning) return;
        isRunning = true;
        window.requestAnimationFrame(()=> {
            action();
            isRunning = false;
        })
    }
}

window.addEventListener('scroll', () => {
    const rect = elem.getBoundingClientRect();
    const inViewport = rect.bottom > 0 && rect.right > 0 && rect.left < window.innerWidth && rect.top < window.innerHeight
})

const observer = new IntersectionObserver(callback, option);
observer.observe(element)

function handleOverscroll(event) {
    const delta = -event.deltaY;
    if (delta < 0 && elem.offsetHeight - delta > elem.scrollHeight - elem.scrollTop) {
        elem.scrollTop = elem.scrollHeight;
        event.preventDefault();
        return false;
    }
    if (delta > elem.scrollTop) {
        elem.scrollTop = 0;
        event.preventDefault();
        return(false);
    return true;
    }
}

element.addEventListener('touchstart', e => {}, {passive: true});

// a.js
$.get('../a.html', () => console.log('got a'));

// webpack
  copy: [
    {
      from: './public/audio',
      to: './dist/audio',
    }
  ],

// webpack.config.js 看看这两者的差别
module.exports = {
    publicPath: './',
    publicPath: '/',
}

let a = function(..args) {
    console.log(...args)
}
a(1,2,3,4) // 1 2 3 4

let a = fn => Function.apply.bind(fn, null);
a((b,c) => console.log(b,c))([1,2]) // 1,2

// 实例:
function getY(x) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(x * 3), 1000);
    })
}
function foo(bar, baz) {
    const x = bar * baz;
    // 返回两个promise
    return [Promise.resolve(x), getY(x)]
}
Promise.all(foo(10,20)).then(a((b, c) => console.log(b,c))) // 200, 600

function a([b,c]) {
    console.log(b,c)
}
a([1,2,3]) // 1,2
// 上例可改写为:
Promise.all(foo(10,20)).then(([b,c]) => console.log(b,c)) // 200, 600

// 匹配emoji表情和颜文字
function validate_string() {
  return /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/g;
}
// 只允许汉字,字母,数字输入
function validate_variable_name() {
return !/^[\u4E00-\u9FA5A-Za-z][\u4E00-\u9FA5A-Za-z0-9]*$/g;
};

document.getElementById('test').addEventListener('input', (e) => {
    e.target.value.replace(validate_string(), '');
    e.target.value.replace(validate_variable_name(), '');
    return false;
})

let inputLock;
document.getElementById('test').addEventListener('compositionstart', () => {
    inputLock = true;
})
document.getElementById('test').addEventListener('compositionend', () => {
    inputLock = false;
    dosomething(e.target);
})
document.getElementById('test').addEventListener('input', (e) => {
    if (!inputLock) {
        dosomething(e.target);
        return false;
    }
})

// 获取整个body高度
document.documentElement.offsetHeight = document.body.clientHeight = document.body.offsetHeight = document.body.scrollHeight = document.documentElement.scrollHeight
// 获取当前视窗scroll值
window.scrollY = document.documentElement.scrollTop
// 获取当前窗口的高度
document.documentElement.clientHeight = window.innerHeight

/*
* callback, 会被调用两次, 一次进入视图, 一次离开视图 
* entries是一个数组, 监听几个dom就有几个成员, 每一个成员都有以下属性: 1 time 发生变化的时间 2 target 目标元素 3 rootBounds 根元素矩形信息 4 boundingClientRect, 目标元素区域信息 5 intersectionRect 目标元素与视图窗口(或根元素)的交叉区域信息 6 intersectionRatio 目标元素的可见比例 即intersectionRect / boundingClientRect, 完全可见时为1, 不可见为0
* options
*/
let io = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        console.log(entry)
    })
})

// 开始观察, 指定DOM节点
io.observe(dom)
// 停止观察
io.unobserve(dom)
// 关闭observer
io.disconnect()

let observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        let container = entry.target;
        let content = container.querySelector('template').content;
        container.appendChild(content);
        observer.unobserve(container);
    })
})

Array.from(document.querySelectorAll('.lazy-loader')).forEach(item => observer.observe(item))

let intersectionObserver = new IntersectionObserver(entries => {
    if(entries[0].intersectionRatio <= 0) return;
    loadItems(10);
    console.log('load new items');
})
intersectionObserver.observe(
    document.queryselector('.scrollerFooter')
)

new intersectionObserver(entries => {}, {
    threshold: [0,0.25,0.5,0.75,1]
})

let opt = {
    root: document.querySelector('.container'),
    // 用来扩展或缩小rootBounds这个矩形的大小
    rootMargin: '500px, 0px',
}

// 函数强制返回new调用实例:
function foo(name) {
    if (!new.target) {
        return new foo(name);
    }
	var self = this;
	self.name = name;
}
// 抛出一个错误:
function foo(name) {
    if (!new.target) {
        throw Error('must called with new');
    }
	var self = this;
	self.name = name;
}
// new.target.name 属性, 通常情况下就是函数名
function foo() {
    console.log(new.target.name)
}
const a = new foo();// foo
// 如果是类的情况
class A {
    constructor() {
        console.log(new.target.name)
    }
}
class B extends A {
    constructor() {
        super();
    }
}
const a = new A();// A
const b = new B();// B
// 可以看到这个target就是new时候的对象.

var name = 'lorry'
age = 14

delete this.name // 1
delete this.age // 2

const name = 'lorry'
let age = 18
delete window.name // 1
delete window.age // 2

var a = 123
console.log(b)
let b = 1;

console.log(c)

console.log(typeof(c))
console.log(typeof(d))
let d  = 1

function test() {
  var n = 1;
  if(true){
    let n = n+1
  }
  console.log(n)
}

var a  = 123
function b() {
  console.log(a);
  let a = 456
}

var n = {number: [1,2,3,4,5]};
for(let n of n.a) {
  console.log(n)
}

let a = 1
if (true) {
  var a = 2
}