阿里巴巴提前批前端编程测试题
这道题是阿里巴巴2017年7月秋招提前批,前端岗位的编程测评题,原题是给出了html和css代码,让考生写js代码,js代码提示可以用ES6写,并且要用面向对象的思维写。js部分给了一个init()和两句注释。
- 题目:提供一个列表,每个列表后面有个删除按钮,点击相应的删除按钮就可以删除相应的列表的其中一行,并且要以面向对象的方式实现。
- 我的思路 1.第一反应: 1.1获取页面中的所有删除按钮元素 1.2点击事件监听 1.3列表获取及移除 2.事件委托优化: 2.1获取页面中的列表元素 2.2点击事件监听 2.3列表获取及移除 3.加入面向对象(OOP)思维 3.1.把列表和联系人都看作是一个对象,把相关的功能封装到对象里去 3.2.获取页面中的列表元素并监听点击事件 3.3.列表获取及移除 _3.JS的委托面向对象思维 _3.1.创建一个DOMPlayer对象专门操作DOM _3.2.创建一个List对象并且和DOMPlayer建立原型链关联 _3.3.创建list实例,直接调用相关方法 4.其他的考虑 4.1事件监听的移除 4.2前端和后端的交互
- 答案:
//第一反应
init()
function init() {
const deleteBtn = document.querySelectorAll(".user-delete")
deleteBtn.forEach(d => {
d.addEventListener("click", removeItem)
})
}
function removeItem(event) {
event.target.parentNode.remove()
}
// 事件委托优化
init()
function init() {
const J_List = document.querySelector("#J_List")
J_List.addEventListener("click", removeListItem)
}
function removeListItem(e) {
e.target.className.includes("user-delete") && e.target.parentNode.remove()
}
//OOP思维
class List {
constructor(contacts) {
this.contacts = contacts
}
initList() {
const J_List = document.querySelector("#J_List")
J_List.addEventListener("click", this.removeListItem)
}
removeListItem(e) {
e.target.className.includes("user-delete") && e.target.parentNode.remove()
}
}
class Contact {
constructor(id, name = "", sex = "", tel = "", province = "") {
this.id = id
this.name = name
this.sex = sex
this.tel = tel
this.province = province
}
removeItem() {
//
}
}
init()
function init() {
let list = new List(null)
list.initList()
}
//委托对象思维
let DOMPlayer = {
initDOM(domName, eventName) {
const el = document.querySelector(domName)
el.addEventListener(eventName, this.removeItem)
},
//更多方法
}
init()
function init() {
let List = Object.create(DOMPlayer)
List.initList = function (e) {
this.initDOM("#J_List", "click")
}
List.removeItem = function (e) {
e.target.className.includes("user-delete") && e.target.parentNode.remove()
}
let list = Object.create(List)
list.initList()
}
- 效果:通过
- 技巧:多准备基础知识,手动练习代码
- 知识点:操作DOM,JS与面向对象