解决增删改查

2017-12-21

面向对象

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>

2. 用类方法

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>