阿里巴巴提前批前端程式設計測評思考

阿里巴巴提前批前端程式設計測試題

這道題是阿里巴巴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與物件導向