思考：引入外部变量对功能实现的必要性

前言

  在学习bom和dom的过程中发现有一类的功能是比较复杂并且初学者难以实现的，复杂的功能都有相似的共同点：一个原素被多个元素相连接or一个元素注册了多个事件or两者都存在。

例子的引入

  1 作用目标

  一个好看的导航栏

  

  2 功能叙述

  

        // 鼠标经过某个小li， 云朵跟这到当前小li位置

        // 鼠标离开这个小li， 云朵复原为原来的位置

        // 鼠标点击了某个小li， 云朵就会留在点击这个小li的位置
  

  3 实现核心代码

   实现方案一

var current = 0;
for (var i = 0; i < lis.length; i++) {
    lis[i].addEventListener('mouseover', function() {
        animate(cloud, this.offsetLeft);
        flag = true;
    });
    lis[i].addEventListener('mouseleave', function() {
        if (flag) {
            animate(cloud, current);
        }
    });
    lis[i].addEventListener('click', function() {
        current = this.offsetLeft;
    });
}

   实现方案二

var flag = true;
        for (var i = 0; i < lis.length; i++) {
            lis[i].addEventListener('mouseover', function() {
                animate(cloud, this.offsetLeft);
                flag = true;
            });
            lis[i].addEventListener('mouseleave', function() {
                if (flag) {
                    animate(cloud, 0);
                }
            });
            lis[i].addEventListener('click', function() {
                flag = false;
            });
        }

   4 写时候的心得

   1 只要引入了一个外部变量就可以很轻松的解决问题如果不引入则很难解决问题

   2 我自己第一次碰到比较复杂的功能就是轮播图 发现新人很难想到引入外部变量来解决问题（当然天才除外）。

思考的总结

  在复杂问题中引入外部变量是非常有必要的几乎是解决的最优解，那么究竟引入几个变量呢？（干货满满哦）

   仔细观察所学得的代码发现当一个复杂功能需要实现时 引入复杂功能所涉及到的主原素（我认为写的时候很好判断）的个数的外部变量就可以了   注意在实际写的过程中吧记录一个元素的一个状态称为一个外部变量

  外部变量是用来作什么的呢？

  仔细思考后，我认为外部变量时用来记录主元素的在此刻的状态的并且将此状态传递给其他涉及到的元素，变量类型可以是任意类型。