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
```
window.eventHub.emit('new');
```
emit就是发布

监听事件

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

2018-05-12 奕泽音乐