阿里前端开发编程测验反思总结
2017-08-22 本文已影响71人
啊鹰的
题目：实现删除买家信息，使用原生JavaScript，不能使用第三方库，这个界面在手机上正常显示。已提供框架如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--code here-->
<title>demo</title>
<style>
* {
padding: 0;
margin: 0;
}
.head, li div {
display: inline-block;
width: 70px;
text-align: center;
}
li .id, li .sex, .id, .sex {
width: 15px;
}
li .name, .name {
width: 40px;
}
li .tel, .tel {
width: 90px;
}
li .del, .del {
width: 15px;
}
ul {
list-style: none;
}
.user-delete {
cursor: pointer;
}
</style>
</head>
<body>
<div id="J_container">
<div class="record-head">
<div class="head id">序号</div><div class="head name">姓名</div><div class="head sex">性别</div><div class="head tel">电话号码</div><div class="head province">省份</div><div class="head">操作</div>
</div>
<ul id="J_List">
<li><div class="id">1</div><div class="name">张三</div><div class="sex">男</div><div class="tel">13788888888</div><div class="province">浙江</div><div class="user-delete">删除</div></li>
<li><div class="id">2</div><div class="name">李四</div><div class="sex">女</div><div class="tel">13788887777</div><div class="province">四川</div><div class="user-delete">删除</div></li>
<li><div class="id">3</div><div class="name">王二</div><div class="sex">男</div><div class="tel">13788889999</div><div class="province">广东</div><div class="user-delete">删除</div></li>
</ul>
</div>
<script>
// 此处也可换成ES6的写法
function Contact(){
this.init();
}
// your code here
</script>
</body>
</html>
心里的小九九
- 第一眼看到题目，惊不惊喜？意不意外？惊喜！意外！没有想象中的那么难，像绘制解锁图案之类的，很耗时间。
- 第二眼扫题，好的，不需要第三方。
- 第三眼，嗯？在手机上正常显示，显示？给出的框架布局没什么特别的啊，打开模拟器看了一下，也没有什么。（这里耽误了点时间，另外这是个坑啊，后悔没有再继续深入想下去）。
我的解题思路
- 初始化点击删除事件（使用js的一系列get方法可以很方面的操作节点）
- 刷新买家编号（一开始没有想到这个，在测试删除的时候发现，删除了中间的买家，编号不变是一件很逆天又鬼畜的事情）
我的解题代码
和在网上提交的代码有一些不同，写好测试好之后发现时间就剩几分钟了，就先把代码保存了，然后回到本地IDE去做一些调整，就是让代码看起来舒服些，好看些。改了之后如下
window.onload = function init(){
var btnsForDel = document.getElementsByClassName("user-delete");
initClickEvent(btnsForDel);
}
function initClickEvent(btnsForDel){
var index=0;
for (var i = 0 ; i < btnsForDel.length; i++){
btnsForDel[i].onclick = function (){
index = (this.parentNode.children[0].innerHTML);
var rowForDel = document.getElementById("J_List").children[index-1].remove();
freshListNo();
index = 0;
}
}
}
function freshListNo(){
//现获取到列表，再获取其中每个对象的ID
//也可以直接查找ClassName为ID的div,但在有多个列表时不适用
var list = document.getElementById("J_List").children;
for (var i= 0 ; i < list.length ; i++){
list[i].getElementsByClassName("id")[0].innerHTML = i + 1;
}
}
考虑不周
咖啡厅的环境还是很棒的，店里生意挺热闹，还好顾客的声音都不是很大，然后呢，时间很快就过了，再回去测验页面发现保存的代码已经提交。松了口气，就开始发呆了，虽然我也不知道为什么紧张，开始看前面有个小姐姐在玩儿手机，小姐姐手很好看（微笑脸），忽然想到了那句“在手机上能正常显示”（微笑脸），忽然明白了什么，重点不是显示，重点是在手机上使用，那，，意思不就是要用手指触摸时间，不是鼠标点击啊，哪儿来的onclick，不存在的，全程微笑脸_。
滚去做了更改
// your code here
window.onload = function init(){
var btnsForDel = document.getElementsByClassName("user-delete");
initTouchEvent(btnsForDel);
}
function initTouchEvent(btnsForDel){
var index = 0;
for (var i = 0 ; i < btnsForDel.length; i++){
btnsForDel[i].addEventListener("touchstart",touch,false);
}
function touch(event){
var event = event || window.event;
index = (this.parentNode.children[0].innerHTML);
var rowForDel = document.getElementById("J_List").children[index-1].remove();
freshListNo();
index = 0;
}
}
function freshListNo(){
//现获取到列表，再获取其中每个对象的ID
//也可以直接查找ClassName为ID的div,但在有多个列表时不适用
var list = document.getElementById("J_List").children;
for (var i= 0 ; i < list.length ; i++){
list[i].getElementsByClassName("id")[0].innerHTML = i + 1;
}
}
这个时候在网页中点击是无效的，用Chrome模拟手机测试，点击可以正常删除信息，并重新编号。所以如果要在PC和手机上都能操作的话，还需要在初始化删除事件之前对设备进行判断，思路是使用navigator.userAgent获取到用户平台信息，判断PC（包括MAC和windows）还是移动端（iPhone、Android等），不需要再对平台类型进行判断，因为click和touch事件解析方式是浏览器相关。
写到这儿里的时候，已经是越想越多了，难道是咖啡屋环境太轻松，又想起来一个很重要的点，印象中题目中有要求“面向对象”，然鹅我解题的时候并没有注意这个点，挥泪离开～
----2017-8-20 记于某咖啡屋
