需要注意的问题：
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>JS高级——面向对戏方式解决歌曲管理问题
原文地址：https://www.cnblogs.com/wuqiuxue/p/8366454.html