今天完成的事情：

明天计划的事情：

理一理基础知识，然后开始了解任务5的接口部分知识

遇到的问题：

囫囵吞枣扫了一遍还不是很懂

收获：

任务名称 ：JS-2-4

成果链接：https://lareina-wzy.github.io/test/JStask02-1/02-01-home/html/02-01-home.html

任务耗时：2019.11.18 - 2019.12.10(20天)

官网脑图：

我的脑图：

任务总结：

其实任务2-4总结用到的知识点也并不是很多，写了很久大半时间还是摸鱼了。。。

这个任务需要理顺页面逻辑，比如说页面跳转间需要设置几个数据传递，最少设置几个变量能够实现当前需要效果，用什么判断条件能准确定位当前状态等等。理顺逻辑了，寻找特定方法实现效果，学习就更有目的性。优化的时候，实现效果方法不变，但过程怎么判定，怎么避免重复代码，也还是看逻辑是否简洁顺畅。

1.滑动条

用input[type=range]实现滑动条，默认样式可修改，实现填充进度条的效果：在IE 9以上的浏览器中可以使用::-ms-fill-lower 和 ::-ms-fill-upper来自定义进度条；在Firefox浏览器中则可以通过::-moz-range-progress来自定义；而Chrome浏览器中不支持直接设置进度条，可用linear-gradient线性渐变填充滑动条背景颜色。

2.数组乱序

遍历数组元素，将其与之前的任意元素交换。因为遍历有从前向后和从后往前两种方式，所以该算法大致也有两个版本的实现。

function shuffle(array) {
  var _array = array.concat();
  for (var i = _array.length; i--; ) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = _array[i];
    _array[i] = _array[j];
    _array[j] = temp;
  }
  return _array;
}

3.storage默认存储为字符串，如果需保留原数据类型，需用JSON

window.sessionStorage.setItem("group",JSON.stringify(group));
var group = JSON.parse(window.sessionStorage.getItem("group"));

4.克隆clone

cloneNode 的deep 参数设为false 的时候，仅仅div-0 这个节点本身被克隆，而他的子节点（即其内容）是没有被复制的。

var box = document.getElementById('box-0');// 获得被克隆的节点对象
for (var i = 1; i < group.length; i++) {
    var boxClone = box.cloneNode(true);// 克隆节点
    boxClone.setAttribute("id", "box-" + i); // 修改一下id 值，避免id 重复
    box.parentNode.appendChild(boxClone);// 在父节点插入克隆的节点
    main.removeChild(boxClone);//删除子节点方法(父级）
    box.parentNode.removeChild(boxClone);//删除子节点方法
}
jQuery
$(".parent").append($("#box-0").clone().attr("id", "box-" + (i + 1)));

5.正则表达式

input.value = input.value.replace(/[^0-9]+/, '');

正则表达式还有很多其他方法，这个任务里我用的replace( )限制input[type=text]只能输入0-9数字.

6、jQuery

jQuery的写法和原生js还是有些不同，但是逻辑原理还是相同的。

jQuery获取节点比js更简单方便。dom操作和事件方法也都指向明确，在js基础上提炼了一些常用方法。

总的来说任务2-4运用的知识点不是很难，主要是逻辑的提炼。优化可以考虑让逻辑更简洁，代码更精简，用多种不同逻辑实现同一需求，再比较哪一种逻辑更简洁。