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: ...
随机推荐
- 这段百度问答，对我相关有对啊！！！----如何获取Windows系统登陆用户名
如何获取Windows系统登陆用户名 http://zhidao.baidu.com/link?url=Hva9PkVwYZv8KSEWftSqTWe8fqM1dhoq59BurnfADmcOvFjF ...
- ms sql server 系统表详细说明
sysaltfiles 主数据库 保存数据库的文件 syscharsets 主数据库字符集与排序顺序 sysconfigures 主数据库 配置选项 syscurconfigs 主数据 ...
- Java 注解入门实例 && 注解传參
參考 概念:java提供了一种原程序中的元素关联不论什么信息和不论什么元数据的途径和方法 JDK内置系统注解: @Override 用于修饰此方法覆盖了父类的方法; @Deprecated 用于修饰已 ...
- C# DateTime.Now和DateTime.UtcNow的区别
DateTime.UtcNow.ToString()输出的是0时区的事件(通俗点就是格林威治时间的当前时间),DateTime.Now.ToString()输出的是当前时区的时间,我们中国使用的是东八 ...
- Python中range和xrange的异同之处
range 函数说明:range([start,] stop[, step]).依据start与stop指定的范围以及step设定的步长,生成一个序列. range演示样例: >> ...
- The Pragmatic Programmer 读书笔记之中的一个 DRY-Don’t Repeat Youself
The Pragmatic Programmer读书笔记之中的一个 DRY-Don't Repeat Youself 尽管自己买了非常多软件project方面的书,可是由于时间的问题.一直没有静 ...
- Xamarin nuget package update 错误
update xamarin.Forms包时出现错误: 'The specified path, file name, or both are too long. The fully qualifie ...
- 去哪网实习总结：开发定时任务（JavaWeb）
本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发.. . 只是还是比較认真的做了三个月,老师非常认同我的工作态度和成果.. . 实习立即就要结束了.总结一下几点之前没有注意过的变成习惯和问题,分 ...
- unity3D游戏开发实战原创视频讲座系列11之相扑游戏开发并公布到Win\WP8
解说文件夹 第一讲 游戏的演示和资源介绍 第二讲 场景的建设 第三讲 玩家的移动 第四讲 对手的AI(让对手动起来) 第五讲 游戏的管理(上) 第六讲 游戏的管理(下) 第七讲 公布到Win8系 ...
- ios8--加载图片
// // ViewController.m // 06-资源存放问题 #import "ViewController.h" /** 加载图片的方式: 1. imageNamed: ...