一、bindme

官方定义: is a helper to bind a list of methods to an object reference

理解: 因为不推荐在render()里构建函数,作者就用了6行代码封装了函数绑定事件的代码.
bindme的npm包实际上由6行ES5代码组成,但是确实方便了很多.这个包值得一用

二、用法

代替箭头函数和多层bind

有时候我们并不会直接在创建事件的时候bind,而是统一在constructor上绑定事件,如果一个模块大起来,就会出现好几十行绑定事件的代码,用bindme可以很好解决.例如

//原写法 this.clickEvent1 = this.clickEvent1.bind(this) this.clickEvent2 = this.clickEvent2.bind(this) this.clickEvent3 = this.clickEvent3.bind(this) this.clickEvent4 = this.clickEvent4.bind(this) this.clickEvent5 = this.clickEvent5.bind(this)  //bindme写法 bindme(this, 'clickEvent1', 'clickEvent2', 'clickEvent3', 'clickEvent4', 'clickEvent5')

又好看又方便

也可以在super构建实例的时候绑定

bindme(super(props),     'clickEvent1',     'clickEvent2',     'clickEvent3',     'clickEvent4',     'clickEvent5', )

就是这么简单的用法, 我们可以看看它的源码转换成ES6是怎么样的

const bindme = (self, ...funcs) => {   funcs.forEach(func => {     if (self[func]) {       self[func] = self[func].bind(self)     } else {       console.error(`Method ${func} is not defined`)     }   }) }

其实也就是收集所有的事件,再统一bind,如果不存在的抛出异常.我们在平时也会经常封装一些类似这些小的便捷操作

结合React

import React,{ PureComponent } from 'react'  import bindme from 'bindme' import './style.css' export default class BindmeComp extends PureComponent{     constructor(props){         bindme(super(props),             'bindmeOnMouseOver'         )          this.initClickMode = this.initClickMode.bind(this)                  bindme(this, 'bindmeFirClickMode', 'bindmeSecClickMode')     }      noThisClickMode(){         console.log('未绑定this事件 =========>', this)     }      initClickMode(){         console.log('普通bind事件 ===========>', this)     }      arrowClickMode = () => {         console.log('箭头函数bind事件 ===========>', this)     }      bindmeFirClickMode(){         console.log('bindme事件1 ===========>', this)     }      bindmeSecClickMode(){         console.log('bindme事件2 ===========>', this)     }      bindmeOnMouseOver(){         console.log('bindme事件3 ===========>', this)     }      render(){         return(             

                    

                        
关键字：