面向对象之简易通讯录

面向过程的通讯录，今天用面向对象写了个简单的通讯录，实现基本的增删查
效果图：

1.png

以下是html代码：

    <div id="exchange"></div>
        <div>增：<br/>
            姓名：<input type="text" id="myname" value=""/>
            电话：<input type="number" id="mytel" value=""/>
            <input type="button" value="确定" onclick="addPhone()"/>
        </div>
        <div>查：<br/>
            姓名：<input type="text" id="searchName" value=""/>
            <input type="button" value="确定" onclick="searchTel()"/>
        </div>
        <div>删：<br/>
            姓名：<input type="text" id="delName" value=""/>
            <input type="button" value="确定" onclick="del()"/>
    </div>

css代码

  .exchange{
        width: 300px;
        border: 1px solid black;
    }

js代码

  function PhoneBook(data){
            this.data = data;
        }
        //呈现数据的方法
        PhoneBook.prototype.showData = function(){
            var html = "";
            for(var i=0;i<this.data.length;i++){
                html +=`<p>姓名是:${this.data[i].name} 电话是:${this.data[i].tel}</p>`;
            }
            document.getElementById("exchange").innerHTML = html;
        }
        //添加电话
        PhoneBook.prototype.addPhone = function(name,tel){
            var obj = {name,tel};
            this.data.push(obj);
        }
        //查找电话
        PhoneBook.prototype.getPhone = function(name){
            for(var i=0;i<this.data.length;i++){
                if(name==this.data[i].name){
                    alert("姓名是："+name+";电话是："+this.data[i].tel);
                }
            }
        }
        //删除电话
        PhoneBook.prototype.del = function(name){
            console.log(this.data);
            for(var i=0;i<this.data.length;i++){
                if(name==this.data[i].name){
                    this.data.splice(i,1);
                    i--;
                }
            }
        }
        var data = [{name:"张三",tel:123456},{name:"李四",tel:2014110451}];
       //实例化对象
        var newBook = new PhoneBook(data);
        newBook.showData();
             //增加电话
            function addPhone(){
                var name =document.getElementById("myname").value;
                var tel = document.getElementById("mytel").value;
                newBook.addPhone(name,tel);
                newBook.showData();
            }
            //查询电话
            function searchTel(){
                var name = document.getElementById("searchName").value;
                newBook.getPhone(name);
            }
            //删除电话
            function del(){
                var name = document.getElementById("delName").value;
                newBook.del(name);
                newBook.showData();
            }