阿里巴巴提前批前端编程测评思考

阿里巴巴提前批前端编程测试题

这道题是阿里巴巴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前端和后端的交互
  4.3是否可以使用MVVM的方式完成这个需求
• 答案：

//第一反应
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(name,delBtnName) {
        const el = document.querySelector(name)
        this.initEvent(el,"click",(e)=>{this.removeItem(e,delBtnName)})
    }
    initEvent(element,eventName,cb){
        element.addEventListener(eventName, cb)
    }
    removeItem(e,delBtnName) {
        e.target.className.includes(delBtnName) && 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("#J_List","user-delete")
}

//委托对象思维
let DOMPlayer = {
    el:null,
    initDOM(domName) {
        el = document.querySelector(domName)
    },
    initEvent(eventName,cb){
        el.addEventListener(eventName, cb)
    },
    removeItemFromClass(event,itemClassName){
        event.target.className.includes(itemClassName) && event.target.parentNode.remove()
    }
    //更多方法
}

init()
function init() {
    let List = Object.create(DOMPlayer)
    List.initList = function (name) {
        this.initDOM(name)
        this.initEvent("click",(e)=>{
            this.removeItemFromClass(e,"user-delete")
        })
    }
    let list = Object.create(List)
    list.initList("#J_List")
}

• 效果：通过
• 技巧：多准备基础知识，手动练习代码
• 知识点：操作DOM,JS与面向对象