需要注意的问题：
1、其他模块若是使用构造函数MP3创建对象，唯一不同的就是他们传入的音乐库是不一样的，所以构造函数中存在一个songList属性，其他一样的就被添加到了构造函数的原型对象之中
2、原型对象是直接替换的，所以会失去constructor属性，我们最好给这个属性重新赋值
3、我们new的过程中，就可以将传入的音乐库进行提取然后渲染到浏览器上，所以在属性中我们在new过程中就去执行render()方法
4、还有在CURD的方法调用中，只要修改了原来的songList库就必须再次调用render()方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } .clearfix::after { content: ''; visibility: hidden; display: block; clear: both; } .container { width: 800px; margin: 0 auto; border: 1px solid #000; } .songslist-top { height: 50px; line-height: 50px; } .songslist-header span { display: inline-block; float: left; width: 350px; height: 50px; line-height: 50px; text-align: center; background-color: lightblue; border-right: 1px solid black; } .songslist-header span:nth-child(3) { border-right: none; width: 98px; } .songslist-single { height: 50px; line-height: 50px; } .songslist-single .songslist-name { display: block; float: left; width: 350px; text-align: center; } .songslist-single .songslist-singer { width: 350px; display: block; float: left; text-align: center; } </style> </head> <body> <div class="container"> <div class="songslist-top"> 歌曲名：<input type="text"> 歌手名：<input type="text"> <input type="button" value="添加"> <input type="button" value="修改"> <input type="button" value="删除"> </div> <div class="songslist-header clearfix"> <span>歌曲名</span> <span>歌手名</span> <span>操作</span> </div> <div class="songslist-main clearfix"> <div class="songslist-single"> <span class="songslist-name">dd</span> <span class="songslist-singer">dd</span> </div> </div> </div> <script> function MP3(songs) { //songList属性用来存储歌曲信息 //当创建歌曲管理工具实例的时候，如果有参数传进来就将参数赋值给songList，如果没有就给一个空数组 this.songList = songs || []; this._init(); } MP3.prototype = { ////由于是替换原型对象，所以constructor属性会丢失，所以需要手动设置 constructor: MP3, _init: function () { this.render(); }, //数据驱动，只要歌曲列表发生改变，就调用render方法，将页面上信息进行刷新渲染 render: function () { //获取到歌曲列表的父盒子 var listDiv = document.getElementsByClassName("songslist-main")[0]; //定义这个数组用来拼接字符串 var strArr = []; //遍历歌曲列表中所有的歌曲信息 for (var i = 0; i < this.songList.length; i++) { var song = this.songList[i]; //使用每一个歌曲信息，拼接单独的歌曲html字符串 strArr.push('<span class="songslist-single">' + '<span class="songslist-name">' + song.name + '</span>' + '<span class="songslist-singer">' + song.singer + '</span>' + '</span>'); } //将所有的歌曲信息html字符串进行组合 var str = strArr.join(""); //直接将父盒子的内容修改为已经拼接好的字符串 listDiv.innerHTML = str; }, //查询 selectSong: function (songName) { for (var i = 0; i < this.songList.length; i++) { var song = this.songList[i]; if (song.name == songName) { return song; } } return null; }, //增加 addSong: function (songName, singer) { //判断是否有传入参数，而且要判断传入参数是否为空字符串 // if(!songName||!singer){ // throw "请以正确方式添加歌曲！"; // } if (songName == undefined || singer == undefined || songName == "" || singer == "") { throw "请以正确方式添加歌曲！"; } //使用传入的参数，构建一个歌曲对象 var temp = {name: songName, singer: singer} //将歌曲对象添加到songList中 this.songList.push(temp); //在根据歌曲列表重新渲染页面 this.render(); return temp; }, //删除 removeSong: function (songName) { //调用seleteSong方法找到指定歌曲 var song = this.selectSong(songName); //获取这个歌曲在歌曲列表中索引 var index = this.songList.indexOf(song); //判断这个索引是不是为-1 也就是与没有找到 if (index != -1) { //如果直到了，就直接将其从数组中删除 this.songList.splice(index, 1); //因为数组改变了，所以再次重新渲染 this.render(); return true; } else { return false; } }, //修改 updateSong: function (songName, singer) { var song = this.selectSong(songName); if (song == null) { return null; } else { song.singer = singer; this.render(); return song; } } }; var arr = [ {name: '哎呦', singer: '石磊'}, {name: '青春之歌', singer: '石磊'}, {name: '最后一首歌', singer: '石磊'}, {name: '我把青春另存了', singer: '石磊'}, ]; var mp3 = new MP3(arr); var songName = document.getElementsByTagName('input')[0]; var songerName = document.getElementsByTagName('input')[1]; var addBtn = document.getElementsByTagName('input')[2]; var updateBtn = document.getElementsByTagName('input')[3]; var removeBtn = document.getElementsByTagName('input')[4]; console.log(addBtn); addBtn.onclick = function () { var song = songName.value; var singer = songerName.value; if (song.trim() !== "" && singer.trim() !== "") { mp3.addSong(song, singer); } } updateBtn.onclick=function () { var song = songName.value; var singer = songerName.value; if (song.trim() !== "" && singer.trim() !== "") { mp3.updateSong(song, singer); } } removeBtn.onclick = function () { var song = songName.value; if (song.trim() !== "") { mp3.removeSong(song); } } </script> </body> </html>
