ES6 class——音乐播放器实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>模拟一个音乐播放器</title> </head> <body> <div id="app"></div> <script> class AudioPlayer{ //从无到有生成一个音乐播放器,并且获取歌单列表等等 constructor(container){ //生成完的播放器插入到container元素中 this.container = document.querySelector(container) this.songList = []; this.dom = null; //播放器dom元素 this.audio = new Audio(); //Audio对象,用于播放音频,可以读取音频资源 //类在实例化的时候,this会指向实例化对象.实例化对象会继承类中定义的方法 和属性,所以在一个方法中,是可以通过this调用另一个方法的,这相当于实例化对象调用了自己的方法. //读取歌单列表 this.getSongs(); //创建dom对象 this.createElement(); //绑定事件 this.bindEvents(); //渲染dom到页面 this.render(); } getSongs(){ //...ajax... this.songsList = [ { cover:'', url:'.mp3', singer:{}, name:'' } ]; } createElement(){ //生成dom const div = document.createElement('div') div.innerHTML = ` <div class="btn">播放按钮</div> <div>进度条</div> `; this.dom = div; } bindEvents(){ this.dom.querySelector('.btn').addEventListener('click',() => { console.log('开始播放'); }) } render(){ this.container.appendChild(this.dom); } } new AudioPlayer('#app') </script> </body> </html>