silencesnow/2017ife

2017百度IFE前端学习学院部分练手demo

2017ife's Issues

耀耀学院- task04/task05

####task04

• 界面是一个10*10的棋盘格，我用了表格来表现，表格内容为空时表格是隐形的，因此加了一个&nbsp表示空格来占位。棋盘格两侧的数字标尺用了表格的表头标签，便于区分不同外观。
• 移动的小方块是div，带方向的色条我用了单侧边框，通过设置边框宽度和颜色来表现要求的方向。
• 对于小方块的转向，第一次的解决方案有点想复杂了，设了四个不同方向边框颜色的类，通过指令给小方块改变类，来表现转向。因此，方块共需要4个方法，获取当前坐标，设置坐标，获取当前类，设置新类。
• 对于小方块的移动，由于我设的小方块是在表格内的，因此它获取的是横纵向单元格的坐标，通过console.log(单元格），查到表格自身果然有自己的计数方法，是rowIndex和cellIndex，坐标问题得以解决。
  ####task05
• task05是在04基础上简单升级的，task04看别人的代码，发现很多同学用的是很简单的transform属性，表现很简单，于是决定task05不用04的方向类，而是设定转动角度来实现。
• 于是小方块定位是绝对定位，坐标的变化通过单纯的数字加减，不需要04中的表格参数定位了
• 小方块旋转时遇到一个无语的问题，当小方块旋转到0度（180度，-180度）这种时，再transform180度，小方块的旋转方向很任性，并不是我预计的右旋，而是左旋，改成（-180度，180度）也是左旋，由于task05需要有转动过程，不能任由它左旋，无奈之下，只能采用单纯的角度数字叠加，这样保证了旋转方向的准确，但是角度会出现很多大于360角度或者负角度，我觉得这很不环保……考虑在左旋时偷偷整除一下360，但是实现不佳，暂时先这样。
• 指令多了起来，但是大抵操作其实只有两类，于是还是努力复用函数，移动函数中，传入参数是实现A，不传参是实现B，实现操作还是同一部分语句达成的。

小薇学院-task01

复习了基础标签的使用

斌斌学院-task08

• 因为懒，用随机生成一个初始的多叉树，控制内容为4个字符，深度为4
• 因为多叉树叉树随机，所以在原始的母树生子树的函数外，还需要叠加一个数组的循环遍历
• 前序遍历函数没问题，后序遍历时，由于共用了变量i，需要设置为let i局部作用域，不然循环不完整
• 改进显示函数，根据输入参数数量不同，决定是查找还是简单遍历，提高代码复用

斌斌学院-task06

• 首先是逻辑，获取输入框内的文本，点击提交后将内容加到呈现框内；点击搜索时去搜索呈现框内的值，有符合匹配的变为红色。
• 考虑到输入提交可能多次进行，因此，呈现框内会出现多个文本节点的并存，因此最开始调用了一个不太常用的normalize()进行文本合并，变为一个文本节点。
• 对文本节点进行切分，用了split()，结合简单的正则表达式[^\w] \，转化成数组arr。此处本想用中文字符的 [\u4e00-\u9fa5]但是出现各种问题，后来放弃了。
• 简单点，对数组单元进行一个循环判定，此处用到字符串查找，a.indexOf(b)>-1就可以确认是包含关系
• 然而实施中发现不能对文本节点添加属性……于是把字符串包裹了一个span，这样就可以改变字体颜色，a,style.color="red"
• 考虑到多次搜索的问题，第二次及以后搜索时呈现框内已经是多个span节点而不是简单的文本节点，而如果有多次提交的行为，呈现框内是文本+span节点的大杂烩。因此需要在对呈现框内容操作时添加一个子节点循环，还需要根据子节点类型（text or span)采用不同处理，此处用了nodeType来判断子节点的类型，3为文本节点，而span节点只需要根据它的值是否匹配搜索来决定颜色就可以了。
• 总结：做的好繁琐，但是尽量把各种情况都考虑到了，看了别的同学提交的案例，为什么他们的demo辣么好看……

斌斌学院- task09

• 给每个div添加一个可点击事件，在事件内，需要去除之前影响
• 删除事件：js中删除节点貌似只有div.parentNode.removeChild(div)
• 把js基础部分的题都做完啦，开心

耀耀学院-task02

• 一个比较完整的表单校验，包含用户名、密码、密码复核、邮箱、手机和提交验证
• 表单字段有三个事件，focus，blur，change，项目要求失去焦点时验证表单内容，本来想用blur事件，但是如果再次修改表单内容，blur事件不会被触发，因此改为了change事件，而正好空表单需要有提示，于是空表单用的blur事件
• 考虑到节省重复代码，绑定事件和选择函数时都用了switch来分情况讨论，共用相同部分
• 密码、邮箱、手机验证都用了正则表达式

斌斌学院-task05

• 列表需要底部对齐，采用了flex布局：父元素display:flex;align-items: flex-end;
• 首次输入排序没问题，二次输入元素时，需要将上一次的排序列表清楚，此处卡了好久：
  由于nodelist是动态列表，所以首次判断列表非空后，需要把列表长度存起来，并且，每次removeChild都是清理ul.childNodes[0]，理由同上，动态列表
  if(ul.childNodes.length){ var len=ul.childNodes.length; for(var i=0;i<len;i++){ ul.removeChild(ul.childNodes[0]); } }
• 为了对列表元素进行排序，需要将其转化为数组类型，虽然childNodes是类数组，但是并不能使用sort方法，此处转化方式参考了高程中的，利用数组原型转化：array=Array.prototype.slice.call(lis_s,0);
• 在创建新列表时，用appendChild，发现原来的列表木有了，appendChild其实是挪了位置，因此只能克隆一个新的列表项：var li=stl[j].cloneNode(true);

斌斌学院- task07

• 先是做了一个自动二叉树的方法
• 前中后序遍历只是顺序不同，都是一个简单的迭代函数
• 展示动画时遇到一点问题，后来用数组作为静态输入，结合setInterval做定时器解决了
• 熟悉了setInterval的用法，把返回值作为timer,最后一步clearInterval(timer);
• 使用了局部作用域的let 标识符，不污染全局变量，好用

斌斌学院-task01

区分innerHTML、outerHTML、innerText 、outerText、value：

• innerHTML :属性设置或返回该标签内的HTML；
• outerHTML：属性设置或返回该标签及标签内的HTML；
• inneText：从起始位置到终止位置的内容，但它去除html标签；
• outerText 设置(包括标签)或获取(不包括标签)对象的文本；
• value：属性可设置或返回密码域的默认值。获取文本框的值；
  此案例中，input文本框的键入内容用value获取

斌斌学院-task04

• 左入与右入一并考虑，左出与右出一并考虑。
• 封装了一个获取数据的初始化函数，考虑到左出右出不需要获取input内的值，把input值的获取拆出来作为另一个验证函数。
  -验证数字用了Number()函数。
  -验证输入是否为数字时，不是数字的话返回元素为假，并不是一个DOM元素，因此输入时加入了一个验证参数是否为真的判断，防止控制台报错。
• 使用了操作DOM节点的几种用法：node.appendChild();node.removeChild();node.insertBefore();

斌斌学院-task02

复习了js的sort排序方法、filter过滤方法；
添加了转换数字为中文大写的方法

耀耀学院- task03

• 遇到一个神奇的问题，某次打开浏览器，显示找不到您的文件：该文件可能已被移至别处或遭到损坏。上查原因，发现在我js中命名了一个叫“location”的变量之后发生的，再google，原来BOM中有个对象就叫Location，包含了有关当前URL的信息，当用window.location赋值的时候，其实是把当前的url变为新值（这功能不明觉厉），所以，当我无意命名了某变量为同名，然而其值并不是有效地址时，浏览器会先去那个奇怪的字符串查找一圈，找不到，返回给我一个找不到文件的反馈。解决办法：js中乖乖改名字……（html中命名没关系）
• 此案例用到了对表单元素的css样式修改，默认的表单太丑啦，取消默认表单为appearance，只有部分支持，需要再加两个前缀，webkit与moz
• input type为radio时，发现小圆圈出现一个额外的浅色方框，选中时会出现，设置outline：none可取消它，案例图片中我认真观察，框被改成圆形了，应该是设了一个倒角，然而依旧是2层色彩，大雾。
• 同样是input type为radio，发现选项圈和后侧的文字总是错开一点，这……，查了一圈解决办法，决定用张大神推荐的人人网设的黑科技，设了一个vertical-align：-3px；目测对齐了，且是最简单的。
• 此案例主要考察的技能是表单联动，通过对主表单设置change事件，根据事件不同，显示不同的子表单，同时需要初始化一下

斌斌学院-task03

• 截取字符串本来想用slice（0，2），后来考虑到城市名有可能不仅2位，最后采用了indexOf（）搜索到城市名后一位来定位位置；
• 排序函数sort()时忘记写明返回函数了，导致后面函数取的一直是空值；