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

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

　　相关功能如下：

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

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

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

 

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

　　可通过微信二维码打开：

　　

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

 

---

 

 

模块化

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

模块之间是通过命名空间或者说事件中心eventHub来进行联系的，这种联系方式的好处就是可以任意地跨模块进行信息的交流，页面中的任意模块都能与另一任意模块进行交流，只要它们绑定同样的事件就可以了。但缺点也很明显，就是事件中心是全局环境下的事件中心，如果一个事件触发了两个模块来发布相同的事件，那就会不可避免地产生冲突，这个时候只能通过改变其中一个模块的发布事件的事件名来消除这种冲突，这显然并不是一种理想的解决办法，因为本质上他们就是相同的事件，给相同的事件不同的命名的做法并不恰当，因此这也是我认为的MVC模块交流方式的缺点。

 

---

 

以下是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）