今日完成：

今天重写了任务一，把之前那些疏忽的小问题都一一解决了，js部分基本上重写了一遍，虽然一边写一遍有刻意的注意去追求高内聚低耦合，提高可扩展性，问题是虽然概念有在脑子里过了几遍，可在实际的代码中还不知道如何把这些特性体现出来，这个不知道是该找些代码习惯良好的代码看看来学习还是只能通过大量的自己练习。

任务总结：

任务名称：JS-TASK1

成果链接：https://lurenxie.github.io/jnshu/

任务耗时：2019.3.17-2019.3.19（3天） 

技能脑图：

官网脑图：

个人脑图：

遇到问题：

1、使用document.getElementByClassName()一次获取大量节点并赋值给存储变量，此时该变量为当前文档中所有相关元素的集合（节点列表对象），使用序列号（index）访问节点列表，index的值从0开始。跟数组非常类似，实际上不是数组，这里开始把他当数组使用，想用array.slice()来赋值给变量，然后Google给出了Uncaught TypeError: array.slice is not a function的错误；

2、任务一的要求是从九宫格中取出三个不同的格子进行变色，之前没有考虑重复性问题，只是取一个随机数，然后取三次，所有有重复的可能，后来准备在第二次和第三次取的时候加判断，重复就重新取，后来参考了任务二说的取随机数数组，找了下，发现这个实际上方法核心还是Math.random，在一个数组里面先随机取走一个数组元素，然后删除该元素，然后依次取走剩余个数，这样就得到了随机的三个不同的数。后面还参考了师兄们的洗牌算法，也是先取一个随机数，然后从该数字对应的数组元素与第一个数组元素交换位置，重复数组元素个数次，然后取前三个数组元素，即达到了同样的目的

//从array数组中获取num个随机元素并输出
function getRandomArray(array, num) {
       var sliceArray = array.slice(0);
    var lengthArray = array.length;
    var min = lengthArray - num,returnArray = [],index,i = 0;
    while(lengthArray --> min) {
       index = Math.floor((lengthArray+1)*Math.random());
        returnArray[i] = sliceArray[index];
        sliceArray.splice(index,1);
        i++;
    }
       return(returnArray);
}
//利用随机数函数随机改变三个方块颜色
function runChangecolor() {
    recoverColor();
    var radonmArray = getRandomArray(nineArray, 3);
    // alert(radonmArray);
    getboxelement[radonmArray[0]].style.backgroundColor = getColot();
    getboxelement[radonmArray[1]].style.backgroundColor = getColot();
    getboxelement[radonmArray[2]].style.backgroundColor = getColot();
}

3、js绑定事件有三种方式，一种是直接在dom里面绑定，第二种是从脚本里面绑定，第三种是通过addEventListener绑定事件的句柄的方式

我之前是用的第一种方式，这话方式不利于维护，需要一个个手动绑定到html标签里面，第二种后面的会覆盖前面的，然后这里重写js的时候就学习并采用了第三种方式，并且采用了匿名函数。

<div id="btn" onclick="clickone()"></div> //直接在DOM里绑定事件
<script>
function clickone(){ alert("hello"); }
</script>

<div id="btn"></div>
<script>
document.getElementById("btn").onclick = function（）{ alert("hello"); } //脚本里面绑定
</script>

<div id="btn"></div>
    <script>
    document.getElementById("btn").addeventlistener("click",clickone,false); //通过侦听事件处理相应的函数
function clickone(){ alert("hello"); }
</script>
//给id为footer-btn1的dom节点添加按键事件句柄，使鼠标按下该节点时执行匿名函数
document.getElementById('footer-btn1').addEventListener('click',function() {
    clearInterval(changeVar);
    recoverColor();
    changeVar = setInterval("runChangecolor()", 1000);
});

总结：虽然任务是完美实现了，相应的一些方法也学习了解了，但是关于如果让代码更简洁，更方便阅读，如果从封装的角度来写代码依旧没什么概念，希望修真院能在任务完成后给出一些比较完美的代码，来修正一下代码习惯。

明天计划：

这次小课堂选的课题是为什么要做组件库，昨天晚上查了半夜资料，熟悉了很多概念，组件，库，框架，封装，耦合，解耦，等等，怎么具体的理解还没有好的思路，明天继续做这部分，同时重写任务二，之前切页按钮是用的伪元素做的，这种关键按钮按道理讲是不能用伪元素的，之前做的时候搞忘了，明天先重写下，然后把之前的关于无法取消MouseMove的bug解决掉并完成任务二剩下的数据绑定，然后把整个js重构一边。顺便学习一下重构，也不知道这种微量代码怎么做封装，边写边理解吧。