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

Question

如上面所示，小弟想将上面的JS代码封装成一个JS方法。但是没有思路，不知道该怎么下手，请大神们指点一下。能有范例最好。注：这段JS代码是一段特效代码，效果是鼠标移入移出的动画效果。原理是移除dom上的class样式

Answer 1

鉴于楼主欠缺编程经验，我就先不说封装成jQuery插件等高大上的做法了。单就论封装成方法而言。

方法，也就是函数。是面向过程式语言一种代码复用的初级手段，简而言之，就是把重复的部分用函数封装起来。

例如猫叫多遍，cat.meow(), 你总不可能写对应次数的代码，一般会写成：

function meow(num){    for(var i=0;i<num;i++){
        cat.meow()
    }
}

meow(1000)

这就是一种最基础的代码复用。
当然，面向对象的语言也许有更简单的 cat.meow(1000)

那么，针对楼主的情况。逐步讲一下各层次的方法。最简单的用函数封装一下就是：

function effect(srcDom,destDom,className){
    $(srcDom).mouseenter(function(){
        $(destDom).addClass(className)
    }).mouseout(function(){
        $(destDom).removeClass(className)
    })
}

然后调用

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 effect(name){
    $('#'+name).mouseenter(function(){
        $('#'+name+'hover').addClass(name+'after')
    }).mouseout(function(){
        $('#'+name+'hover').removeClass(name+'after')
    })
}

然后调用

effect('plate-1')
effect('plate-2')
effect('plate-3')

但是这样还是不够通用，楼主应该看看事件方面有关事件委托的知识

事件委托

事件委托要结合具体的DOM结构来看。假设有这样的一个结构：

<div class="wrap">
    <div class="box1">
        <span class="trigger">trigger</span>
        <div class="effect"></div>
    </div>
    <div class="box2">
        <span class="trigger">trigger</span>
        <div class="effect"></div>
    </div>
    <div class="box3">
        <span class="trigger">trigger</span>
        <div class="effect"></div>
    </div></div>

function effect(node){
    $(node).on('mouseenter','.trigger',function(){        var $this=$(this);
        $this.parent().find('.effect').addClass('after')
    })
    $(node).on('mouseout','.trigger',function(){        var $this=$(this);
        $this.parent().find('.effect').removeClass('after')
    })
}

这样，调用时就只需要调用一次。

effect('.wrap')

当然，这里假设是每组控件的效果都相似，如果不同，有两种解决方案：1.利用box父级class从样式层面解决。2.js层面多加一个配置项参数