面向对象 解决增删改查
2017-12-21 本文已影响19人
bo_bo_bo_la
面向对象
1. 用构造函数方法
构造函数类似于类，但不是类，在ES6出来之前常规用法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="wrap"></div>
姓名：<input class="addName" type="text" /> 电话：<input class="addPhone" type="text" /><button onclick="addPhone()">添加电话</button><br />
姓名：<input class="searchName" type="text" /><button onclick="searchBtn()">查询电话</button><br />
姓名：<input class="delName" type="text" /><button onclick="delBtn()">删除电话</button><br />
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var data = [{name:"张三",tel:"11111111"},{name:"李四",tel:"2222222"}];
function PhoneBook(data){
this.data = data;
}
PhoneBook.prototype.showPhone = function(){
console.log(1111111)
$('.wrap').html("");
var html = "";
console.log(this.data)
for(let i = 0; i < this.data.length;i++){
html += `<p>姓名:${this.data[i].name};电话:${this.data[i].tel}</p>`;
}
$(html).appendTo(".wrap");
}
PhoneBook.prototype.addPhone = function(name, tel){
var obj = {name,tel};
this.data.push(obj);
}
PhoneBook.prototype.searchPhone = function(name){
for(var i = 0; i < this.data.length; i++){
if(name == this.data[i].name){
alert(this.data[i].tel)
}
}
}
PhoneBook.prototype.delPhone = function(name){
for(var i = 0; i < this.data.length; i++){
if(name == this.data[i].name){
this.data.splice(i,1);
}
}
}
var newPhoneBook = new PhoneBook(data);
newPhoneBook.showPhone();
function addPhone(){
console.log(11111)
var myName = $('.addName').val();
var myTel = $('.addPhone').val();
newPhoneBook.addPhone(myName, myTel);
newPhoneBook.showPhone();
}
function searchBtn(){
var myName = $('.searchName').val();
newPhoneBook.searchPhone(myName);
}
function delBtn(){
var myName = $('.delName').val();
newPhoneBook.delPhone(myName);
newPhoneBook.showPhone();
}
</script>
</html>
1. 用类方法
ES6出来之后，逐渐取代构造函数，代表着JS越来越像正规军靠近
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="wrap"></div>
姓名：<input class="addName" type="text" /> 电话：<input class="addPhone" type="text" /><button onclick="addPhone()">添加电话</button><br />
姓名：<input class="searchName" type="text" /><button onclick="searchBtn()">查询电话</button><br />
姓名：<input class="delName" type="text" /><button onclick="delBtn()">删除电话</button><br />
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var data = [{name:"张三",tel:"11111111"},{name:"李四",tel:"2222222"}];
class PhoneBook{
constructor(data){
this.data = data;
}
showPhone(){
$('.wrap').html("");
var html = "";
for(let i = 0; i < this.data.length;i++){
html += `<p>姓名:${this.data[i].name};电话:${this.data[i].tel}</p>`;
}
$(html).appendTo(".wrap");
}
addPhone(name, tel){
var obj = {name,tel};
this.data.push(obj);
}
searchPhone(name){
for(var i = 0; i < this.data.length; i++){
if(name == this.data[i].name){
alert(this.data[i].tel)
}
}
}
delPhone(name){
for(var i = 0; i < this.data.length; i++){
if(name == this.data[i].name){
this.data.splice(i,1);
}
}
}
}
var newPhoneBook = new PhoneBook(data);
newPhoneBook.showPhone();
function addPhone(){
var myName = $('.addName').val();
var myTel = $('.addPhone').val();
newPhoneBook.addPhone(myName, myTel);
newPhoneBook.showPhone();
}
function searchBtn(){
var myName = $('.searchName').val();
newPhoneBook.searchPhone(myName);
}
function delBtn(){
var myName = $('.delName').val();
newPhoneBook.delPhone(myName);
newPhoneBook.showPhone();
}
</script>
</html>
