正文
JavaScript复用,js代码复用
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
新手请教，如何将一段JS代码封装成一个方法
鉴于楼主欠缺编程经验，我就先不说封装成jQuery插件等高大上的做法了。单就论封装成方法而言。
方法，也就是函数。是面向过程式语言一种代码复用的初级手段，简而言之，就是把重复的部分用函数封装起来。
例如猫叫多遍，cat.meow(), 你总不可能写对应次数的代码，一般会写成：
function meow(num){
for(var i=0;inum;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')
但是这样还是不够通用，楼主应该看看事件方面有关事件委托的知识
相关问答
Q1: 一个JS函数 在同一个页面 怎么重复利用啊
没有详细的代码，不过可以给你思路。
给每个拥有相同行为的问题DOM节点一个相同的class类，如question，同时给不同的问题一个不同的标识ID如 id="question1" id="question2"...诸如此。
给类.question绑定点击事件，在触发函数里面先判断当前点击的这个类的id，即可知道你要操作的是哪一个问题，然后调用你的那个伸缩函数即可。
Q2: 什么是函数复用，能用JS举例说明吗？
举个最简单的例子：
计算两个数字的和。
function test(a,b){
return a+b;
}
console.log(test(1,2));
console.log(test(5,6));
意思就是说 写一个通用的方法来避免每次重复写大段的代码。
Q3: javascript 中 var x = // 是什么意思？
var为variable的缩写，即变量的意思，在JS中用关键字var声明变量。var x = 3;为声明了一个变量，变量名为x，值为3。可以没有赋值只声明变量，此时没有等号。故你给出的语句应该是不完整的。
双斜线//为JS中的单行注释。
