一名大专程序员的前端转型之路( 三 ) 作者|张旭乾责编|梦依丹出品

真正让我对前端产生兴趣，是2016年去留学之后。在2017年第一个学期，有同学问我React的问题，我不太会，于是就上网帮同学查，查着查着，就发现前端已经独立作为一个职业了，再接着从React文档找问题的解决方案时，发现之前我用jQuery的问题在React中全部都解决了，可以不用手动维护数据和UI之间的同步了，这让我感到很欣慰，发誓等这学期放暑假，就深入学习一下。
很快，暑假就到了，要兑现承诺开始学前端。当时室友学了高级Web编程，主要讲的是React ， React在那个时候还非常难用，应该还是React15 ，需要手动配置好多东西：Babel、Bower.js之类的。看着室友遇到一个组件显示不出来，经过一天的搜索解决方案，才发现是组件名大小写不一致导致的，这个让我有点对React好感度降低，不想学了。
后来我就研究了一下Vue ，发现普遍的说法是：功能和React类似，但是国内用Vue的多，国外用React的多。看了下Vue是华人尤雨溪开发的，很佩服，据说上手比较容易，于是就决定先看看Vue?
在把Vue官方文档基础部分看完之后，结合YouTube的一些视频所教授的开发方法，大概一周的时间，觉得可以上手了，就想了一下练习项目。当时了解到Vue适合开发单页应用，看了一下单页应用的特点，发现似乎就是网页版App的概念?于是，我就想着把当时我用的最多的网易云音乐模仿一下。花了一周多的时间，实现了首页UI、添加歌曲，播放、暂停、快进、快退等功能，期间学会了CSSflex布局。

文章图片
使用Vue仿网易云音乐（左）的最终界面（右）
后来发现网页版的功能局限性比较大，想着能不能做成桌面端的。当时室友在学校的课里学Electron ，一个跨平台的桌面开发框架，只用编写HTML?CSS和JavaScript ，就可以生成在Mac、Windows、Linux操作系统都能运行的应用。于是我又把应用迁到了Electron上面。
从Electron这里也了解到了， Node.js到底和浏览器JS运行时到底有什么不同：在Node.js的环境下，可以访问更底层的操作系统级API ，例如访问本地文件，这样可以方便用户自行添加音乐。
做这个项目的时候，也遇到了很多问题：
不知道什么时候需要定义成组件。刚刚接受这种组件化开发的方式之后，最大的难题就是怎么才知道该不该把一部分UI定义成组件。当时的思路就是，我先把所有的页面代码都写在入口组件里，后面再根据页面的布局，把这个组件拆分成各个部分，例如侧边栏、播放列表、播放控制器等，这样的分法似乎很合乎逻辑，不过这也带来了一个问题。
组件和数据杂糅到了一起。项目当时使用了Vuex ，应用的数据全部交给了它去管理，对于项目的功能逻辑，都是直接在相关的UI中实现的，并绑定了vuex的数据。例如播放进度条，它和歌曲的播放时间数据绑定了，后面要实现音量进度条的时候，发现这个组件无法复用。因此，我又把UI和数据分离了出来，这样的组件，可以在各处复用，之后再实现对应的逻辑就好了。
CSSFlex布局遇到坑。这个项目使用了当时开始流行的CSSFlex布局，本着学习的态度使用它，遇到了很多问题，例如父容器对flex缩放的影响，如何让flex元素占满容器，又或是如何让flex不占满容器等等，这些在看了MDN文档的介绍，了解了flex、align-items和justify-content各个属性值的作用和含义之后，就清楚了元素的缩放逻辑。