实现简单的面向对象方法来管理歌曲信息的增删改查。
数据驱动思想，也可以理解单项数据绑定，既：数据发生变化，页面也跟着变化；
思路：
使用构造函数来存储数据信息；
使用原型来存储方法（增删改查）；
修改方式中方法使用到的数据，由变量转为对象的属性；
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container {
margin: 100px auto;
width: 850px;
border: 1px solid #dad8d8;
/*height: 100%;*/
}
.songslist-main, .songslist-header {
position: relative;
width: 100%;
text-align: center;
}
.songslist-header {
height: 30px;
border-bottom: 1px solid #dad8d8;
line-height: 30px;
background-color: #def;
}
.songslist-name {
position: absolute;
width: 40%;
height: 100%;
border-right: 1px solid #dad8d8;
}
.songslist-singer {
position: absolute;
left: 40%;
width: 50%;
height: 100%;
border-right: 1px solid #dad8d8;
}
.songslist-option {
position: absolute;
left: 90%;
width: 10%;
height: 100%;
}
.songslist-main {
background-color: #fff;
height: 100%;
}
.songslist-main .songslist-name{
height: 50px;
line-height: 50px;
border: 0;
}
.songslist-main .songslist-singer{
height: 50px;
line-height: 50px;
border: 0;
}
.songslist-single {
height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="songslist-op">
<label for="txtAddSName">歌曲名:</label><input type="text" id="txtAddSName" />
<label for="txtAddSinger">歌手:</label><input type="text" id="txtAddSinger" />
<button id="btnAdd">添加</button>
<button id="btnRemove">删除</button>
</div>
<div class="songslist-header">
<div class="songslist-name">歌曲名称</div>
<div class="songslist-singer">歌手</div>
<div class="songslist-option">操作</div>
</div>
<div class="songslist-main" id="c">
<div class="songslist-single">
<div class="songslist-name">歌曲名称</div>
<div class="songslist-singer">歌手</div>
</div>
<div class="songslist-single">
<div class="songslist-name">歌曲名称</div>
<div class="songslist-singer">歌手</div>
</div>
<div class="songslist-single">
<div class="songslist-name">歌曲名称</div>
<div class="songslist-singer">歌手</div>
</div>
<div class="songslist-single">
<div class="songslist-name">歌曲名称</div>
<div class="songslist-singer">歌手</div>
</div>
</div>
</div>
<script type="text/javascript">
var SongsMagList=function(list){
this.SongsList=list||[];
this.render();
}
SongsMagList.prototype={
add:function(songInfo){
this.SongsList.push(songInfo);
this.render();
},
del:function(sName){
var SongsList=this.SongsList;
for(var i=0;i<SongsList.length;i++){
if (SongsList[i].sName===sName) {
SongsList.splice(i,1);
break;
};
}
this.render();
},
update:function(sName,newName){
var SongsList=this.SongsList;
for(var i=0;i<SongsList.length;i++){
if (SongsList[i].sName===sName) {
SongsList[i].sSinger=newName;
break;
};
}
this.render();
},
select:function(sName){
var SongsList=this.SongsList,msg=null;
for(var i=0;i<SongsList.length;i++){
if (SongsList[i].sName===sName) {
msg=SongsList[i].sSinger;
break;
};
}
this.render();
console.log(msg||"没有查询到该歌曲的信息");
}
}
// 给原型对象添加一个 render方法 将数据渲染 封装了一个页面渲染的方法
SongsMagList.prototype.render=function(){
// 因为操作的都是 songslist中的数据 增删改查 也是使用songslist中的数据
var SongsList=this.SongsList;
var htmlArr=[];
// 传入参数
SongsList.forEach(function(songInfo){
// songInfo 就是每一个歌曲信息对象 形参
htmlArr.push(‘<div class="songslist-single">‘);
htmlArr.push(‘<div class="songslist-name">‘+songInfo.sName+‘</div>‘);
htmlArr.push(‘<div class="songslist-singer">‘+songInfo.sSinger+‘</div>‘);
htmlArr.push(‘</div>‘);
});
document.querySelector(‘#c‘).innerHTML=htmlArr.join("");
}
// var s1 = new SongsMagList([
// {sName: "痴心绝对", sSinger: "李圣杰"},
// { sName: "南山南", sSinger: "马頔"}
// ]);
// // 测试增删改查
// s1.add({sName: "最炫民族风", sSinger: "凤凰传奇"});
// // console.log(s1);
// s1.render();
// console.log(s1);
// s1.select("南山南");
// console.log(s1);
// s1.del("南山南");
// console.log(s1);
// s1.update("南山南","madi");
// console.log(s1);
//
//
//
var s1=new SongsMagList();
// 添加 新增歌曲事件
document.querySelector("#btnAdd").onclick=function(){
var name=document.querySelector("#txtAddSName").value;
var singet=document.querySelector("#txtAddSinger").value;
s1.add({sName: name, sSinger: singet})
}
//添加 找到歌曲信息 删除对应的问题
document.querySelector("#btnRemove").onclick=function(){
var name=document.querySelector("#txtAddSName").value;
s1.del(name);
}
</script>
</body>
</html>
时间： 2024-10-24 08:37:38