新手请教，如何将一段JS代码封装成一个方法？

Question

如上面所示，小弟想将上面的JS代码封装成一个JS方法。但是没有思路，不知道该怎么下手，请大神们指点一下。能有范例最好。

注：这段JS代码是一段特效代码，效果是鼠标移入移出的动画效果。原理是移除dom上的class样式

Answer 1

鉴于楼主欠缺编程经验，我就先不说封装成jQuery插件等高大上的做法了。单就论封装成方法而言。方法，也就是函数。是面向过程式语言一种代码复用的初级手段，简而言之，就是把重复的部分用函数封装起来。例如猫叫多遍，cat.meow(), 你总不可能写对应次数的代码，一般会写成：function&nbsp;meow(num){&nbsp;&nbsp;&nbsp;&nbsp;for(var&nbsp;i=0;i<num;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cat.meow() &nbsp;&nbsp;&nbsp;&nbsp;} } meow(1000)这就是一种最基础的代码复用。当然，面向对象的语言也许有更简单的&nbsp;cat.meow(1000)那么，针对楼主的情况。逐步讲一下各层次的方法。最简单的用函数封装一下就是：function&nbsp;effect(srcDom,destDom,className){ &nbsp;&nbsp;&nbsp;&nbsp;$(srcDom).mouseenter(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(destDom).addClass(className) &nbsp;&nbsp;&nbsp;&nbsp;}).mouseout(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(destDom).removeClass(className) &nbsp;&nbsp;&nbsp;&nbsp;}) }然后调用effect('#plate-1','#plate-1hover','plate-1after') effect('#plate-2','#plate-2hover','plate-2after') effect('#plate-3','#plate-3hover','plate-3after')鉴于楼主的DOM的ID和Class命名比较有规律，可以写成这样function&nbsp;effect(name){ &nbsp;&nbsp;&nbsp;&nbsp;$('#'+name).mouseenter(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#'+name+'hover').addClass(name+'after') &nbsp;&nbsp;&nbsp;&nbsp;}).mouseout(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#'+name+'hover').removeClass(name+'after') &nbsp;&nbsp;&nbsp;&nbsp;}) }然后调用effect('plate-1') effect('plate-2') effect('plate-3')但是这样还是不够通用，楼主应该看看事件方面有关事件委托的知识事件委托事件委托要结合具体的DOM结构来看。假设有这样的一个结构：<div&nbsp;class="wrap"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="box1"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="trigger">trigger</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="effect"></div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="box2"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="trigger">trigger</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="effect"></div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="box3"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="trigger">trigger</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="effect"></div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>function&nbsp;effect(node){ &nbsp;&nbsp;&nbsp;&nbsp;$(node).on('mouseenter','.trigger',function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$this=$(this); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this.parent().find('.effect').addClass('after') &nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;$(node).on('mouseout','.trigger',function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$this=$(this); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$this.parent().find('.effect').removeClass('after') &nbsp;&nbsp;&nbsp;&nbsp;}) }这样，调用时就只需要调用一次。effect('.wrap')当然，这里假设是每组控件的效果都相似，如果不同，有两种解决方案：1.利用box父级class从样式层面解决。2.js层面多加一个配置项参数