获取外链

• encodeURI 与 encodeURIComponent

  encodeURI 是用来处理整个 URI 的，它应该接受 URI 的 protocol, host, port 等部分，只对 path 和 query 进行编码。
  而 encodeURIComponent 是用来编码你准备用作 query 一部分的字符串的。
  知乎

• URI 与 URL

  URL 是 URI 的子集。任何东西，只要能够唯一地标识出来，都可以说这个标识是 URI 。如果这个标识是一个可获取到上述对象的路径，那么同时它也可以是一个 URL ；但如果这个标识不提供获取到对象的路径，那么它就必然不是 URL 。

HTML 结构

CSS 布局

模块化、MVC

EventHub

• 发布/订阅模式
• 深拷贝 JSON.parse(JSON.stringify(object))

step 3

• 监听 upload
• 监听 form submit
• 获取歌曲列表
• select songList songItem active, 取消 新建歌曲 active
• 选中歌曲后在表单展示歌曲信息
• 新建时清空数据
• 新建和编辑状态切换
• 更新数据后刷新视图
• 修复各种 bug

step 4

• 添加 loading
• 上传加锁
• 首页tab切换
  • 引入模块
  • 获取最新歌曲
• 播放页获取歌曲信息
  • 播放和暂停（先尝试下）
  • 播放时动画

step 5

• 歌曲播放
• 歌词滚动

step 6

• 手机端调试

手机页面如何调试

1. 使用alert

// 手机页面调试，定位错误代码
window.onerror = function(error, file, row){
  alert(error)
  alert(file)
  alert(row)
}
``
2. 重写console或者使用库（vconsole）


# API
- jQuery
  + [.find()](https://www.jquery123.com/find/)
  + [.empty()](https://www.jquery123.com/empty/)
  + [.val()](https://www.jquery123.com/val/)
  + [.text()](https://www.jquery123.com/text/)
  + [.attr()](https://www.jquery123.com/attr/)
- css
  + [pointer-events](https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events)
- dom
  + [Element.getBoundingClientRect()](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect)