2018-05-12 奕泽音乐

1. 本地服务器

server.js的作用是访问到qiniu-key.json文件里的key，将key包装为uploader返回出来，admin.html就得到uploader来连接到七牛

2. 注意事项

1. 记得改domain，改成七牛仓库的默认域名
2. let {songs} = data;es6语法，这样才能获得到data.songs的数据
3. window.location.search可以获取这个页面的查询参数，就是?疑问号后面的东西
4. let string = search.substring(1)获得search第一项之后的字符串
5. let array = search.split('&').filter(v=>v)将&作为分隔符存进数组里，并过滤掉空字符串（防止有两个&&的清空）,filter(v=>v)意思是v是真值就返回，假值就不返回
6. 用jquery的时候$.find()返回的是一个数组，所以应该这样写

$.find()[0]

3. 发布/订阅模式（解耦合）

发布/订阅模式

所有模块通过eventHub互相交流

• 发布事件new

  window.eventHub.emit('new');
  

  emit就是发布
• 监听事件

  window.eventHub.on('new',()=>{
    console.log('一旦监听到上面发布事件执行，就运行这个函数')
  });
  

4. 思想

每个模块用MVC思想，模块之间用eventHub（发布/订阅）思想

5. 深拷贝与浅拷贝

1. 深拷贝

   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)));
   

2. 浅拷贝

   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. 回顾

1. 点击新建歌曲会激活自己，并触发'new'事件
2. 点击歌曲列表，触发'select'事件，并激活自己，还会监听'update'事件，若有更新它就会自己render自己
3. 上传模块，触发'new'事件，'new'会带一个参数就是name和url
4. 编辑歌曲模块，监听'new'事件，若是'new'就会展示没有id的数据，还会监听'select'事件，若选中歌曲就会显示对应的内容，点保存还会触发update
5. DOM API:元素.getBoundingClientRect()，这个API可以获得当前元素的x、y位置、width和到顶部的距离
6. 拿到歌词后把每句歌词变成一个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

10. 手机上调试

1. alert调试大法
2. 在html页面引用js文件的第一行写

可以打印出错误信息，错误的文件，错误的行数

3. 安装vconsole