黑马程序员技术交流社区

标题: 好好好，一楼献给成都校区的黄威，顺便说说js的一点事情 [打印本页]

---

作者: 三千里晴空    时间: 2017-4-3 00:38
标题: 好好好，一楼献给成都校区的黄威，顺便说说js的一点事情


{: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;

    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;

    element.index = i;

    element.onmouseover = function () {

        stopScroll(this.index);

    }

}

{:8_492:}好的，完美解决，相信能看到这里的你跟我一样都是彩笔
{:8_469:}最后大声高呼，黄威万岁（我不是水军）

---

作者: Hp_Yx    时间: 2017-4-3 00:42
顶贴

---

作者: javaeeheima    时间: 2017-4-3 08:14
黄威是谁？

---

作者: 三千里晴空    时间: 2017-4-3 13:00

javaeeheima 发表于 2017-4-3 08:14
黄威是谁？

这个问题问得好，我也不知道，反正先谢黄威就对了

---

作者: 轻风24    时间: 2017-4-3 17:33
先看看代码.

---

作者: 15711325639    时间: 2017-4-4 23:47

---

作者: 陆权允    时间: 2017-4-5 23:05
依旧迷茫，不过还是会继续努力学的

---

作者: 沈唁    时间: 2017-4-6 09:42
没毛病老铁

---

作者: 沈唁    时间: 2017-4-8 17:07
我能说不水吗

---

作者: 盖碗茶    时间: 2017-4-27 08:57
鸹貔

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2