本帖最后由 三千里晴空 于 2017-4-9 15:25 编辑
{:8_469:}不水,此贴不水,先谢黄威,不不不,不要问我黄威是谁
{:8_469:}听说每个人都经历过图片轮播和小圆点联动的问题
{:8_489:}虽然这个问题,很简单,但是我们有没有另外的思路呢
先从js的方法重载说起
在看这个帖子的你们应该都知道了 黄威很厉害 前面一段空白真的没有隐藏内容
js是没有方法重载的,不像那些世界第一编程呀OOP呀神tm西井之类的,可以用一个函数名定义出不同的函数体
当然呢,大家都知道了,js每个方法都隐藏着一个arguments,通过这个东西我们可以委婉的实现重载
[JavaScript] 纯文本查看 复制代码 function stopScroll() {
if (arguments.length == 0) {
/*函数体*/
} else if (arguments.length == 1) {
/*函数体*/
}
}
好了,不用解释了吧,通过参数的长度来决定执行哪种函数体,委婉的实现了重载
再谈动态绑定事件
{:8_469:}举个例子 现在有一排li需要绑定相似的onmouseover事件 不考虑行内式的情况(因为各种MVC啊MVP啊MVVC啊还是什么乱七八糟的思想架构都讲究分离)
在js里面实现动态绑定的话………………
先来按部就班
[JavaScript] 纯文本查看 复制代码 var liObj = window.document.getElementsByTagName("li");
当然我们需要来tm一个循环绑定特么的呀,这么多onclick手动来不得累死了
于是
[JavaScript] 纯文本查看 复制代码 for (var i = 0; i < liObj.length; i++) {
var element = liObj[i];
element.onmouseover = function () {
stopScroll(i);
}
}
这里的想法当然很单纯,就是针对li的不同位置,传入下标(暂且称之为下标)参数,这样可以实现相似的功能;
{:8_469:}是不是看起来天衣无缝
{:8_474:}当然我知道你们肯定知道问题在哪里了
这个i传进去的时候,是引用传递!
于是结果就成了,循环结束 > i=liObj.length> 你所有的li的onmouseover事件都绑定了同一个参数的函数,
{:8_469:}
真是英垂丝汀
当然上有政策,下有对策,根据万物皆对象的法则,我们只需要给你的li自定义一个属性,保存这个i,然后再用this大法,触发函数的时候调用这个i就阔以鸟
于是…………
[JavaScript] 纯文本查看 复制代码 for (var i = 0; i < liObj.length; i++) {
var element = liObj[i];
element.index = i;
element.onmouseover = function () {
stopScroll(this.index);
}
}
{:8_492:}好的,完美解决,相信能看到这里的你跟我一样都是彩笔
{:8_469:}最后大声高呼,黄威万岁(我不是水军)
|