2017年暑期前端實習-阿里程式設計題
阿新 • • 發佈：2019-01-06
（使用物件方式實現通訊錄使用者增加、展現及刪除功能）
要求
請利用面向物件的思想實現一個通訊錄功能：通訊錄包含n個人的聯絡方式，每個聯絡人資訊包含3個欄位：姓名，郵件和電話號碼；實現聯絡人資訊的錄入、展現和刪除功能，其中在錄入的時候要求姓名不能為空，郵箱和電話號碼不限，資料可以重複。
備註：
1、必須使用面向物件的方式實現，否者不給分
2、不能借助第三方庫，需用原生程式碼實現
3、錄入時郵箱和電話號碼這2個欄位需有基本的格式驗證
已給出的程式碼塊
已知以下程式碼結構，請在答題框編寫完整的Script程式碼：
<!DOCTYPE html>
<html 面向過程方式實現
window.onload=function(){
var oBtn=document.getElementById("J_AddBtn");
oBtn.setAttribute("type","button");//阻止form中普通分button也要submit表格，將其type設定為button
oBtn.onclick=function(){
var ul=document.getElementById("J_List");
var userName=document.querySelectorAll('.J_UserInput')[0].value;
var userEamil=document.querySelectorAll(".J_UserInput")[1].value;
var userPhone=document.querySelectorAll(".J_UserInput")[2].value;
var emailReg=/^(\w-*\.*)[email protected](\w-?)+(\.\w{2,})+$/;
var phoneReg=/^1\d{10}$/;
var phoneReg2 = /^0\d{2,3}-?\d{7,8}$/; //電話正則匹配座機號碼
if(userName!="" && emailReg.test(userEamil) && (phoneReg.test(userPhone) || phoneReg2.test(userPhone))){
//建立li標籤，包含顯示姓名，郵箱，電話號碼及刪除按鈕
//為姓名或郵箱等新增span標籤，好設定樣式
//新增刪除按鈕及設定刪除按鈕的樣式及新增點選事件
ul.innerHTML+="<li class=\"newLi\"><span>"
+userName+"<\/span><span>"+userEamil+"<\/span><span>"+userPhone
+"<\/span><span><input type=\"button\" value=\"刪除\" onclick=\"this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)\" \/><\/span><\/li>";
}
else{
if(userName==""){
alert("姓名不能為空");
}
else if(emailReg.test(userEamil)==false){
alert("郵箱格式錯誤");
}
else if(phoneReg.test(userPhone)==false && phoneReg2.test(userPhone)==false){
alert("電話號碼格式錯誤");
}
}
}
}將面向過程的實現方式改成面向物件的形式，將變數改為物件的屬性，函式改為物件的方法，需要注意的是this指標。
需要注意的幾點:**
1.不能有函式巢狀 2.變數改為屬性 3.函式改為方法 4.this的指向問題。。
面向物件實現方式
//code here1程式碼塊
function contact(){
var _this=this;
this.oBtn=document.getElementById('J_AddBtn');
this.oBtn.type='button';
this.emailReg=/^(\w-*\.*)[email protected](\w-?)+(\.\w{2,})+$/;
this.phoneReg=/^1\d{10}$/;
//電話正則匹配座機號碼
this.phoneReg2 = /^0\d{2,3}-?\d{7,8}$/;
this.oBtn.onclick = function(){
_this.clicks(this);
}
}
//code here3程式碼塊
//code here3編寫完整的Script程式碼：
contact.prototype.clicks=function(){
var _this=this;
this.userName = document.querySelectorAll('.J_UserInput')[0].value;
this.userEamil=document.querySelectorAll(".J_UserInput")[1].value;
this.userPhone=document.querySelectorAll(".J_UserInput")[2].value;
//alert(_this.userName + "---" + _this.userEamil + "---" + _this.userPhone);
if(_this.userName!="" && _this.emailReg.test(_this.userEamil) && (_this.phoneReg.test(_this.userPhone) || _this.phoneReg2.test(_this.userPhone))){
document.getElementById("J_List").innerHTML+="<li class=\"newLi\"><span>" +_this.userName+"<\/span><span>"+_this.userEamil+"<\/span><span>"+_this.userPhone+"<\/span><span><input type=\"button\" value=\"刪除\"onclick=\"this.parentNode.parentNode.parentNode
.removeChild(this.parentNode.parentNode)\" \/><\/span><\/li>";
}
else{
if(_this.userName==""){
alert("姓名不能為空");
}
else if(_this.emailReg.test(_this.userEamil)==false){
alert("郵箱格式錯誤");
}
else if(_this.phoneReg.test(_this.userPhone)==false && _this.phoneReg2.test(_this.userPhone)==false){
alert("電話號碼格式錯誤");
}
}
}
//呼叫contact()
window.onload=function(){
new contact();
}頁面樣式
點選新增按鈕後結果如下圖所示
點選刪除按鈕能滿足刪除功能，能滿足通訊錄的增加、展現以及刪除功能。
Contact.prototype=function(){
//add code2
}
//add code2程式碼塊需新增什麼，還不是很清楚，歡迎各路大神留言、交流學習！
重點：面向過程—>面向物件
之前在未學習面向物件時，我們都是面向過程程式設計的。它的優點就是簡單，明瞭，現在學習把面向過程的通訊錄新增、展現和刪除功能改寫成面向物件的方式。
此次筆試時間倉促，沒能及時完成，線下仔細研究實現，從而對面向物件程式設計有了一定的瞭解！