百度前端学院task18任务总结

最近一直在断断续续的写任务和看书，都没有怎么总结一下。但是好记性不如烂笔头，有些地方还是要记一下，以后复习有用。

task18-task21都是关于队列的题目。做完这几个题目，我觉得主要是一些思考问题的流程有了提升，其次是相关语法的熟练度提升了。比如一个问题出现了，我先要分析要实现的需求有些什么，哪些可以封装成小函数单独多次调用的，这些很重要。
代码：https://github.com/sunyueru/IFE/tree/master/task18
demo：https://sunyueru.github.io/IFE/task18/task18.html
主要注意点：

1. 主体思路总结
2. 如何动态绘制元素的高度
3. 单独封装一个判断输入是否合法的函数的思想
4. uhshift，shift，push，pop的简单总结

1、主体思路总结
鼠标点击四个功能按钮触发四个事件，分别是leftin，rightin，leftout，rightout；
其中每个函数内部要实现的首先判断输入数字是否合法，其实是按需求进or出，最后是根据输入数字的大小动态绘制不同高度的元素。
因为考虑到每次判断数字是否合法，每次都要绘制，所以可以单独写一个判断函数和绘制函数用于调用。
2、如何动态绘制元素的高度

function draw(){   // alert("draw");    queue.innerHTML="";    for(var i=0;i<data.length;i++){        var newNode=document.createElement("span");        newNode.style.height=data[i]*2+"px";        queue.appendChild(newNode);    }}

首先就是创建节点；然后就是关键：直接设置style.height，注意这里加了“px”;最后就是把离散的节点使用appendChild添加到dom中。
其实不难，但是之前没有接触过就不知道要使用style.height.下次遇到类似的举一反三即可。
3. 单独封装一个判断输入是否合法的函数的思想
这个在第一点其实已经说了，之后的很多任务都要有这样的思路，尤其是task21的面向对象封装那边的抽象函数的创建。可能需要多写就有感觉了，自己在这说再多也没有用。多写就知道那些功能需要封装成函数，哪些需要写一个构造函数之类的。
4. uhshift，shift，push，pop的简单总结
先说一下， 这一题我之前不是用这四个方法来写的。因为这里有个我没有说的问题，就是整个程序都是通过先申明一个空的数组，然后使用数组的相关方法操作得到想要的结果，最后直接绘制该数组即可。可以看到draw（）函数也是直接使用一个简单的for循环绘制data数组即可。因为相对于我们就是一直在操作一个data数组。但是我之前写的不是这样，是直接操作dom元素的，使用insertBefore和removeChild以及lastChild这些节点直接完成左入，左出等操作的。但是后面发现这样写看着有点乱，而且没有封装成函数。所以想到用uhshift这四个方法，但是这四个方法不可以直接用于元素，是数组的方法，所以首先要申明一个空数组啦。
啰啰嗦嗦说了那么多。。。
下面总结一下四个方法，前两个可以说是队列的方法，后两个是栈方法。
队列都是操作对头，所以unshift就是头添加，shift是头删除。
栈是后进先出，push是尾添加，pop是尾删除。
以上说的头，尾都是一个数组。方法比较简单，不要记混淆就行。