JS高级——面向对戏方式解决歌曲管理问题

Posted 站错队了同志

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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">&nbsp;&nbsp;&nbsp;&nbsp;
        歌手名:<input type="text">&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="添加">&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="修改">&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="删除">&nbsp;&nbsp;&nbsp;&nbsp;
    </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高级——歌曲管理

JS高级——面向对象方式解决tab栏切换问题

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

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

JS高级---复习