2019年第三周周总结

09年1月14日 周一 ---- 四、热门歌单推荐

由于第二周未写周总结，于是有些唐突。直接来到了第四章。
本文背景：Vue2.0开发企业级移动音乐APP--导学
在年终计划列表中，有一项关于课程的学习，这是第四章文章内容。

这一节主要完成的内容是网站首页--热门歌单推荐组件的代码学习。
使用到的知识点技术有：
axios----抓取扣扣官网数据
flex----布局采用双flex布局
better-scroll----直接使用，还未来得及学习，移动端滑动效果的良好实现。
vue-lazyload----网站图片懒加载

小结：
1.Flex布局曾无数次写到，也无数次的进行学习，但是项目上代码实战还是很少，虽然只有父元素与子元素的几个属性，但是熟练的掌握还是需要一些实践。----Flex布局篇
2.该项目中better-scroll使用步骤：
①、npm install better-scroll
②、在使用better-scorll的组件中：import BScroll from 'better-scroll'
③、参考官网文档调用BScroll实例。

this.scroll = new BScroll(this.$refs.wrapper, {
       probeType: this.probeType,
      click: this.click
  })

3.该项目中vue-lazyload使用步骤
①、npm install vue-lazyload
②、main.js中调用：

import VueLazyload from 'vue-lazyload'
……
Vue.use(VueLazyload, {
loading: require('common/image/default.png')
})

③、在使用懒加载组件的中img标签中，将:src替换为v-lazy即可。

09年1月15日 周二 ---- 五、歌手页面开发（一）

1.本节内容首先是通过jsonp从扣扣官网抓取singer的数据。
2.然后将抓取的数据进行二次处理--（这部分让我在工作项目开发中也有所受益，关于从后台拿到的数据在前端展示不合理情况下的二次处理能力还是很重要的，也对个人的js操作数据能力有很好的锻炼。）
从官网获取到的list数据是这样的：

singer-list.png

对数据进行二次封装代码如下：

 _normalizeSinger(list) {
        let map ={
          hot: {
            title:HOT_NAME,
            items:[]
          }
        }
        list.forEach((item,index) => {
          if(index <HOT_SINGER_LEN){
            map.hot.items.push(new Singer({
              name: item.Fsinger_name,
              id: item.Fsinger_mid
            }))
          }
          const key = item.Findex
          if (!map[key]) {
            map[key] = {
              title: key,
              items: []
            }
          }
          map[key].items.push(new Singer({
            name: item.Fsinger_name,
            id: item.Fsinger_mid
          }))
        });
        // 为了得到有序列表，我们需要处理 map
        let ret = []
        let hot = []
        for (let key in map) {
          let val = map[key]
          if (val.title.match(/[a-zA-Z]/)) {
            ret.push(val)
          } else if (val.title === HOT_NAME) {
            hot.push(val)
          }
        }
        ret.sort((a, b) => {
          return a.title.charCodeAt(0) - b.title.charCodeAt(0)
        })
        return hot.concat(ret)
      }

09年1月16日 周三 ---- Vue2.0开发企业级移动音乐APP-目录

偷了个懒，为了日更写了一个改系列的文章目录。

09年1月17日 周四 ---- 六、歌手页面开发（二）

开发listview组件，将封装好的singers数据传入到list-view组件中去。
关于listview组件设计计算较多，比较有难度，在学习过程中也是略过了大部分。

09年1月18日 周五 ---- 赵紫阳

关于简书删文后，为保持日更而叨逼叨的一点杂感。

09年1月19日 周六 ---- 七、歌手详情页面--Vuex存储歌手数据

关于Vuex这块，对官方进行了一些简单学习后，开发实战项目中使用的Vuex实例。
并且项目代码中用到了ES6的Class，并进行了一个简单且重复的学习。

09年1月20日 周日 ---- ES6之Class

关于ES6语法的学习也有过一些经历，在进行项目开发过程中，对一些知识的学习更能起到一个好的理解，还是感觉些项目的过程对一些涉及到的知识进行学习是一个很好的feel。