[项目] 网易云音乐项目总结

　　最近准备把之前做的一个仿网易云音乐的自制音乐网页播放器项目做一个总结。

　　相关功能如下：

1.     通过后台页面上传歌曲、编辑歌曲功能。

2.     前端页面自动更新播放热度高的歌曲

3.     在线听歌、查看歌词。且配有相应的播放动画。

 

　　预览链接：https://leonardo-zyh.github.io/163-music-demo/src/index.html

　　可通过微信二维码打开：

　　

 　　该项目主要是使用了jQuery以及MVC模块化的思想来完成的移动端音乐会播放器，因此在介绍这个应用的制作思路和流程之前，我想重新总结一下对模块化和MVC的理解。

 

---

 

 

模块化

我的认识中模块化是通过MVC的V，也就是View来划分的，把页面中看得见的区域进行功能划分，每一个功能不同的区域就是一个分开的模块，

---

 

以下是eventHub的代码：

window.eventHub={
    events:{},
    emit(eventName,data){
        for(let key in this.events){
            if (key===eventName){
                let fnList=this.events[key]
                fnList.map((fn)=>{
                    fn.call(undefined,data)
                })
            }
        }
    },
    on(eventName,fn){
        if (this.events[eventName]===undefined){
            this.events[eventName]=[]
        }
        this.events[eventName].push(fn)
    }
}

 

---

 

MVC模式

　　MVC模式（Model-View-Controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：
　　模型（Model）、视图（View）和控制器（Controller）

• 模型（Model）
  模型层：数据保存，可以简单理解就是数据层，用于提供数据。在项目中，（简单理解）一般把数据访问和操作，比如将对象关系映射这样的代码作为Model层，也就是对数据库的操作这一些列的代码作为Model层。比如代码中我们会写DAO和DTO类型的代码，那这个DAO和DTO我们可以理解为是属于Model层的代码。
• 视图（View）
  视图层：用户界面，就是UI界面，用于跟用户进行交互。一般所有的JSP、Html等页面就是View层。
• 控制器（Controller）
  控制层：业务逻辑，Controller层的功能就是将Model和View层进行关联。比如View主要是显示数据的，但是数据又需要Model去访问，这样的话，View会先告诉Controller，然后Controller再告诉Model，Model请求完数据之后，再告诉View。这样View就可以显示数据了