js中什么是函数封装以及怎么用?

JavaScript014

js中什么是函数封装以及怎么用?,第1张

封装最基本的意思就是对外提供简单功能单一的方法,

比如一个方法根据不同的参数获取不同的页面元素

如点开头的是查找class的元素,#开头的是查找id,不加这两个的是根据标签查找

function

getElements()

{

//这里要根据开头判断返回数据

}

这个方法功能虽然多,但是功能不单一不如提供3个对外的方法

function

getElementById(id)

{

return

getElements("#"+id)

}

function

getByClass(cls)

{

return

getElements("."+cls)

}

function

getByTag(tag)

{

return

getElements(tag)

}

这样别人一看方法名就明白这个方法怎么使用了,这就是封装的最简单应用

鉴于楼主欠缺编程经验,我就先不说封装成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')

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