javascript - 新手请教,如何将一段JS代码封装成一个方法?
本文介绍了javascript - 新手请教,如何将一段JS代码封装成一个方法?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
$("#plate-1").mouseenter(function() {
$("#plate-1hover").addClass("plate-1after")
}).mouseout(function(){
$("#plate-1hover").removeClass("plate-1after")
});
$("#plate-2").mouseenter(function() {
$("#plate-2hover").addClass("plate-2after")
}).mouseout(function(){
$("#plate-2hover").removeClass("plate-2after")
});
$("#plate-3").mouseenter(function() {
$("#plate-3hover").addClass("plate-3after")
}).mouseout(function(){
$("#plate-3hover").removeClass("plate-3after")
});
$("#plate-4").mouseenter(function() {
$("#plate-4hover").addClass("plate-4after")
}).mouseout(function(){
$("#plate-4hover").removeClass("plate-4after")
});
$("#plate-5").mouseenter(function() {
$("#plate-5hover").addClass("plate-5after")
}).mouseout(function(){
$("#plate-5hover").removeClass("plate-5after")
});
$("#plate-6").mouseenter(function() {
$("#plate-6hover").addClass("plate-6after")
}).mouseout(function(){
$("#plate-6hover").removeClass("plate-6after")
});
$("#plate-7").mouseenter(function() {
$("#plate-7hover").addClass("plate-7after")
}).mouseout(function(){
$("#plate-7hover").removeClass("plate-7after")
});
如上面所示,小弟想将上面的JS代码封装成一个JS方法。但是没有思路,不知道该怎么下手,请大神们指点一下。能有范例最好。
注:这段JS代码是一段特效代码,效果是鼠标移入移出的动画效果。原理是移除dom上的class样式
解决方案
鉴于楼主欠缺编程经验,我就先不说封装成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层面多加一个配置项参数
这篇关于javascript - 新手请教,如何将一段JS代码封装成一个方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文