1. 本地服务器
server.js的作用是访问到qiniu-key.json文件里的key，将key包装为uploader返回出来，admin.html就得到uploader来连接到七牛
2. 注意事项
- 记得改domain，改成七牛仓库的默认域名
-
let {songs} = data;es6语法，这样才能获得到data.songs的数据 -
window.location.search可以获取这个页面的查询参数，就是?疑问号后面的东西 -
let string = search.substring(1)获得search第一项之后的字符串 -
let array = search.split('&').filter(v=>v)将&作为分隔符存进数组里，并过滤掉空字符串（防止有两个&&的清空）,filter(v=>v)意思是v是真值就返回，假值就不返回 - 用jquery的时候$.find()返回的是一个数组，所以应该这样写
$.find()[0]
3. 发布/订阅模式（解耦合）
发布/订阅模式
所有模块通过eventHub互相交流
- 发布事件new
emit就是发布window.eventHub.emit('new'); - 监听事件
window.eventHub.on('new',()=>{ console.log('一旦监听到上面发布事件执行，就运行这个函数') });
4. 思想
每个模块用MVC思想，模块之间用eventHub（发布/订阅）思想
5. 深拷贝与浅拷贝
-
深拷贝
let string = JSON.stringify(this.model.data); let object = JSON.parse(string); let data = object;简写
let data = JSON.parse(JSON.stringify(this.model.data))每次发布的时候，都要用深拷贝传，因为如果直接传数据的话，像这样
window.eventHub.emit('select',data);那其他人在监听'select'的时候，若改动数据，则会直接修改这个data地址上的数据，有可能引起bug，所以要这样传
window.eventHub.emit('select',JSON.parse(JSON.stringify(data))); -
浅拷贝
let s1= {name:'pyz'} //ES6语法 let s2 = Object.assign({},s1); //s2.name === s1.name true
6. 在事件监听的函数里用this的时候，要用bind绑定this，不然有bug
$(this.view.el).on('click',this.active.bind(this));
7. 回顾
- 点击新建歌曲会激活自己，并触发'new'事件
- 点击歌曲列表，触发'select'事件，并激活自己，还会监听'update'事件，若有更新它就会自己render自己
- 上传模块，触发'new'事件，'new'会带一个参数就是name和url
- 编辑歌曲模块，监听'new'事件，若是'new'就会展示没有id的数据，还会监听'select'事件，若选中歌曲就会显示对应的内容，点保存还会触发update
- DOM API:
元素.getBoundingClientRect()，这个API可以获得当前元素的x、y位置、width和到顶部的距离 - 拿到歌词后把每句歌词变成一个p标签，用正则弄出播放歌词的时间，然后获取timeUpdate时间，
8. 怎么和后台合作
看每个请求和参数，上传文件、新建歌曲
9. 从查询字符串里找到你要的key对应的value的算法
{
let search = window.location.search;
if(search.indexOf('?') === 0 ){
search = search.substring(1)
}
let array = search.split('&').filter(v=>v);
let id = ''
for(let i=0;i<array.length;i++){
let kv = array[i].split('=');
let key = kv[0];
let value = kv[1];
if(key === 'id'){
id = value;
break;
}
}
console.log(id)
}
10. 手机上调试
- alert调试大法
- 在html页面引用js文件的第一行写
<script>
window.onerror = function(message,file,row){
alert(message)
alert(file)
alert(row)
}
</script>
可以打印出错误信息，错误的文件，错误的行数
- 安装vconsole
