做管理页面(admin页面)
先看下七牛上上传的MP3的外链
URL规定了不能用中文
我们试着用前缀+key来试试
MP3出现了
用encode把中文转换下
要把七牛的默认外链域名填到这里
获取的是中文，要转成URL
这样就出来了
这里不能用encodeURI，因为
如果这个域名不是个网址，而是网址的一部分
var sourceLink = 'http://'+domain +'/'+ encodeURIComponent(response.key); //获取上传成功后的文件的Url
uploadStatus.textContent=sourceLink+' '+ response.key
上传成功了，把外链+文件名显示出来
接下来CSS布局
买书《写给大家的设计书》
问题：点击第二行文字上传无效
xxx就是点击区域，提升一下
需求：光标在上传区域显示不对，要变成手形
xxx{
cursor: pointer;
}
样式好了，写js
用MVC思想
左边的“新建歌曲”点击之后，应该显示新建歌曲页面
点击左边的“歌曲”，右边显示对应的歌曲信息
把右边做成一个MVC
左上角的新建歌曲也做个MVC
下面的是歌列表的MVC
所以影响了CSS（上传区域又跑到紧挨着songList了），这里要把flex-grow提升到div那一层
接下来上传区域的MVC
做个例外，不给upload-song.js的view里的template
问题：一个MVC的数据怎么通知另外一个MVC
方法一：用命名空间
在主页面admin.html里引入app.js
里面写window.app={}
让每一个模块里的部分需要的东西暴露给app
比如song-form.js模块里，写一个句 window.app.songForm=controller（把song-form.js模块里的controller暴露给了app）
比如new-song.js模块里，写一个句 window.app.newSong=controller（把new-song.js模块里的controller暴露给了app）
谁需要另外一个模块的东西，直接在代码里加window.app.xxx.xxx
其弊端：模块之间耦合了
方法二：用发布订阅模式，用来解耦合
再写一个模块事件中心
让upload-song.js来发布
new-song.js和song-form.js来订阅
es6语法
如果data为空或者为undefined，则默认执行data等于空对象
有数据更新（upload有更新）了，就通知下song-form.js更新数据
用了3个编程思想：模块化、MVC、eventHub发布订阅思想
接下来保存功能的实现
设计模式就是套路
把上传的音乐按照name singer url的形式保存下来
把得到的数据保存下来，copy代码
上传文件，然后右边显示，然后点击保存，然后右边清空，左边新增歌曲
用JSON字符串的形式显示出来，因为如果直接显示，浏览器是异步的，push之前的显示出来的是最新的（push之后的）
问题：新增加的歌曲会把以前保存的给覆盖掉，
第1次歌曲是1，第2次歌曲是2，但是在2保存的那一刻，1被改变成2了
在song-form里改动了data
改过来
内存地址问题
