今天是週日，今天晚上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結構設計、業務邏輯梳理的方向傾斜。有意參加的同學，請點擊下面的鏈接/。