JS高级——面向对象方式解决歌曲管理问题
需要注意的问题：
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高级——面向对象方式解决歌曲管理问题的更多相关文章
- JS高级——面向对象方式解决tab栏切换问题
注意事项 1.给li元素注册事件,函数里面的this指的li元素,那么我们可以在注册事件之前将Tab对象用that=this进行保存 2.使用沙箱模式,所以暴露给外面的变量使用的是window.tab ...
- js高级-面向对象继承
一.工厂模式创建对象及优缺点 继承就是把公共的部分抽象出来作为父类,基类.吃饭,跑步等 var a = {}; //批量创建不方便,不能重复设置公共属性的代码 //工厂模式出现了,创建10个Cat对象 ...
- JS高级 - 面向对象1（this，Object ，工厂方式，new ）
面向对象三要素: 封装 继承 多态 1.this 详解,事件处理中this的本质 window this -- 函数属于谁 <script type="text/javascript& ...
- JS高级 - 面向对象4（json方式面向对象）
把方法包在一个Json里 var p1 = { name: "唐三", sex: "男", dreamdu: { URL: "www.dreamdu. ...
- JS高级 - 面向对象5（继承，引用）
<script type="text/javascript"> //------------------Person类 //(Person)的构造函数 function ...
- JS高级 - 面向对象3（面向过程改写面向对象）
改写: 1.前提:所有东西都在 onload 里 2.改写:不能有函数嵌套,可以有全局变量 onload --> 构造函数 全局变量 --> 属性 函数 --> 方法 4.改错: t ...
- JS高级---面向对象的编程思想（贪吃蛇梳理）
面向对象的编程思想(贪吃蛇梳理) 模拟贪吃蛇游戏,做的项目 地图: 宽,高,背景颜色,因为小蛇和食物都是相对于地图显示的, 这里小蛇和食物都是地图的子元素, 随机位置显示, 脱离文档流的, 地图也需要 ...
- JS高级 - 面向对象2（prototype定义）
定义和用法 prototype 属性允许您向对象添加属性和方法 注意: Prototype 是全局属性,适用于所有的Javascript对象. 语法 object.prototype.name=val ...
- JS高级. 04 增删改查面向对象版歌曲管理、递归、
增 数组.push() 删 数组.splice(开始删除索引,删除几个) 在当前对象中调用当前对象的方法中和属性,必须用this调用 nodeType判断节点类型 节点.nodeType == 1: ...
随机推荐
- 转载 - C++ - placement new
出处:http://www.cnblogs.com/wanghetao/archive/2011/11/21/2257403.html 有关placement new ...
- [bzoj1492][NOI2007]Cash[CDQ分治；dp；斜率优化]
首先,设f[x]表示x天能获得的A券最大值,有动规方程: $f[i]=max\{f[j]*A[i]+f[j]*B[i]/R[j]\}*R[i]/(R[i]*A[i]+B[i])$, 设 $j<k ...
- vue2的简单Popup (Confirm,Alert)组件
github: https://github.com/longfei59418888/vui (记得给一个 start,以后有一起讨论,各种好组件) demo :http://60.205.20 ...
- Linux: 查找使用中的port
找出所有使用中的port netstat -tulpn 输出 Active Internet connections (only servers) Proto Recv-Q Send-Q Local ...
- centos忘了root用户密码
centos5.5启动时,按“空格”,到出现系统菜单GNU GRUB 第二步:按“e”进入编辑此GRUB界面 第三步:选择“rhgb quiet”此行,再按“e”进入编辑界面,在rhgb quiet后 ...
- MySQL 入门（九）—— 查询数据
查询数据就是从数据库中获取所须要的数据. 1.基本查询语句 即Select语句 当中.属性列表表示要查询的字段名.表名和视图列表表示从此处指定的表或者视图中查询数据.能够有多个:条件表达式1制定了查询 ...
- 5分钟Serverless实践 | 构建无服务器的敏感词过滤后端系统
前言 在上一篇“5分钟Serverless实践”系列文章中,我们介绍了什么是Serverless,以及如何构建一个无服务器的图片鉴黄Web应用,本文将延续这个话题,以敏感词过滤为例,介绍如何构建一个无 ...
- Android中相机拍照
Android中调用系统相机的api接口在android.hardware包中.包里面类主要用到了Camera类.该类里面包含几个内部类:Camera.Parameters.Camera.Camera ...
- BestCoder Round #61 (div.2) C.Subtrees dfs
Subtrees 问题描述 一棵有N个节点的完全二叉树,问有多少种子树所包含的节点数量不同. 输入描述 输入有多组数据,不超过1000组. 每组数据输入一行包含一个整数N.(1\leq N\leq ...
- bzoj3105 [cqoi2013]新Nim游戏——贪心+线性基
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3105 首先,要先手必胜,就不能取后让剩下的火柴中存在异或和为0的子集,否则对方可以取成异或和 ...