弱弱的小白记录之——面向对象实现简单的歌曲管理信息

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弱弱的小白记录之——面向对象实现简单的歌曲管理信息相关的知识，希望对你有一定的参考价值。

实现简单的面向对象方法来管理歌曲信息的增删改查。

数据驱动思想，也可以理解单项数据绑定，既：数据发生变化，页面也跟着变化；

思路：

　　使用构造函数来存储数据信息；

　　使用原型来存储方法（增删改查）；

　　修改方式中方法使用到的数据，由变量转为对象的属性；

代码如下：

 

 

<!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>

以上是关于弱弱的小白记录之——面向对象实现简单的歌曲管理信息的主要内容，如果未能解决你的问题，请参考以下文章

弱弱的问一句啥是layer7

一个弱弱的LINUX系统问题：LINUX命令行下如何查看服务器配置啊~！？

弱弱的战壕

前端小白之每天学习记录----php面向对象

跪求高手看下oracle ebs 的plsql代码编程问题，很简单的几句，但我不会，弱弱的帮我看一眼

[vijos1066]弱弱的战壕