当前位置: 首页 > Web前端 > JavaScript

从面试题到插件机制的小思考

时间:2023-03-27 00:32:11 JavaScript

一开始是因为一道面试题。这个面试题是去年遇到的,就是下面的代码:classOperator{...}varop=newOperator(1)op.add(3).minus(2).multi(2).division(1))写出Operator中的代码。一开始写不出来,因为我笔试写作从来没有遇到过这样的问题。当然,这也暴露了我基础薄弱的问题。现在,我可以解决它。其实很简单。add、minus、multi、division都是Operator的方法。他们调用后可以返回,因为返回了this,而this指向调用者,所以或指向实例(即op)classOperator{constructor(initial){this.num=initial}add(num){this.num=this.num+numreturnthis}minus(num){this.num=this.num-numreturnthis}multi(num){this.num=this.num*numreturnthis}division(num){this.num=this.num/numreturnthis}}varop=newOperator(1)op.add(3).minus(2).multi(2).division(1)注意一定要返回。如果你调用一个没有return的方法,就不会有结果。通常,调用方法时总是必须返回一个值。再次提醒我,链接调用的关键是在调用方法后返回this。this指向调用者,即实例。是Chrome中的插件,PhotoShop中的插件,Webpack(前端打包库)中的插件,还是jQuery、Axios、BetterScroll等类库中的插件。写应用程序时,为了可扩展性,我们会使用“插件化思维”,实现核心功能,然后使用插件化机制来扩展自身,讲了也没用,如果使用插件化机制来实现这个函数,怎么改造呢?bind(this)}//这里添加一个方法,调用并显示结果result(){returnthis.num;}}constAddPlugin={name:'add',exec:function(num){this.num=this.nu??m+num;returnthis}}constminusPlugin={name:'minus',exec:function(num){this.num=this.num-num;returnthis}}constop=newOperator(5)op.use(AddPlugin)op.use(minusPlugin)op.add(5).minus(2).result()//8我们打印op,我们可以看到方法add和minus已应用于实例。当然,这只是冰山一角。说到怎么写库,按照现代的说法,JavaScript库的写法还是有很多需要考虑的。作者从他的研究中有所收获之后,他会写一篇文章