js怎么封装函数

JavaScript022

js怎么封装函数,第1张

1、js封装就是尽量把使用的方式简单化，内部逻辑和使用解耦。通俗的说就是使用的时候只需要知道参数和返回值，其他条件尽量不要使用人员进行设置。<br>2、js封装的方法有函数方式、对象的方式、闭包的方式。<br>举例<br>1）函数方式<br>function kk(a,b){<br> 内部对a，b怎么处理就不需要关心了<br>}<br><br>2）对象方式<br>function kk(a,b){<br> this.x = a<br> this.y = b<br>}<br>var k = new kk(1,2)//通过面向对象的方式<br>alert(k.x)<br>3）闭包方式<br>function kk(a,b){<br> var k = 1<br> return function tt(){<br> k++<br> }<br>}<br>var u = kk(1,2)<br>u()//闭包实现累加<br>u()//闭包实现累加

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

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

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

function meow(num){

    for(var i=0i<numi++){

        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')

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