今天是周日，今天晚上20：00的时候，咱们进行了每周日都会有的先行者视频直播课程，主要内容是，通过一个实例，怎么去分析它的需求、设计它的js的结构。
因为这是收费的课程，所以下面文是今晚的学习笔记的节选，配的图片也是小图。
<!-- -->
咱们设计一个结构，一定是先从整体去考虑，然后再去细化每一个局部的细节。
不要一开始就集中在细节上，
我一定要先设计好一个细节，
然后再下一个细节，这样会缺乏整体的思考 。
在设计前端demo、项目的前端架构的时候，
先罗列它的需求、功能点。
在做这个事情的时候，要先确定“交互操作”的逻辑顺序。
<!-- 直白点讲，“就是点击操作的顺序”。例如，你要先登录，才能看邮件... -->
因为业务逻辑，它决定了需求、功能点的操作顺序。
在一定程度上，也决定了前端数据json它们的流向、顺序。
例如，你先要登录，那么输入用户名、密码，再点击登录按钮，
肯定是先发送name、password了，这是第一个数据；
然后服务端给你返回结果 ，这是第二个数据；
那么你在写js的时候，登录和它的结果的处理，肯定是有一个先后的关系。
那这个先后的关系，很大程度上，它就可能是一个“回调”。
<!-- -->
列出项目的需求点、功能点，最常用的方式就是“树状结构”，
很好的分辨别类嘛。
<!-- 思维导图我使用xMind，这东西免费的，网上查一下就有了 -->
播放器，它的结构，咱们怎么分析一下呀，
<!-- 第一步 -->
<!-- 看，20181014_播放器-需求分析.xmind -->
图片.略
思维导图中的每一个点，都相当于是给js当中的代码起了一个别名。
因为你现在没有js。
然后你要把它这些东西，嵌入到前端结构当中去，
那么整个的结构就出来了。
<!-- -->
说“嵌入到前端结构当中去”，前端结构在哪？
<!-- 第二步 -->
<!-- 看，20181014_播放器-代码实现（伪）.xmind -->
图片.略
为什么叫“伪”？
因为你毕竟不是真实的js代码。
这一步，要把需求分析的那些环节，
放到代码实现的这个场景中，
<!-- 第三步， -->
<!-- 把第二步的东西，给翻译成js -->
<!-- 我这写的肯定是伪代码，只是为了表明思路 -->
<script type="text/javascript">
// 播放器对象
function PlayObj(){
// 歌曲的索引，初始为0
this.songInx = 0;
}
// 原型模式
PlayObj.prototype = {
/*补全原型链*/
constructor : PlayObj,
init(){
// 初始化方法
getAjax();
},
getAjax(){
// 请求各个接口
createDom()
},
createDom(){
// 生成dom节点
eventPlayBtn();
eventPrevSongBtn();
eventNextSongBtn();
},
eventPlayBtn(){
// 播放第一首歌
},
eventPrevSongBtn(){
// 上一首，这是思路，不是具体的代码实现，
// 通过 和--的类似操作，来实现歌曲列表索引的跳转。
this.songInx--
},
eventNextSongBtn(){
// 下一首，这是思路，不是具体的代码实现，
// 通过 和--的类似操作，来实现歌曲列表索引的跳转。
this.songInx
},
// 进度条，下次再说，
}
</script>
上面是播放器demo的整体的考虑，
然后再去细化每一个方法函数的细节。
这样搞下来，思路不会乱，结构也会很工整。
今晚的整个的课程视频已经上传到了百度网盘，不能参加的同学可以自行下载观看。
以后的课程方向、重点，都向需求分析、前端js结构设计、业务逻辑梳理的方向倾斜。有意参加的同学，请点击下面的链接/。
