中文在线免费看视频_国产成人精品亚洲日本在线观看_亚洲精品第一综合99久久_国产亚洲精品日韩综合网

這幾年，很多工作 1-3 年的前端小伙伴，經常問我一個問題：“怎么樣才算一個合格的前端程序員？”

這些小伙伴們，在日常工作中，也都能熟練使用各種框架、插件完成任務！

但是，面對涉及個人編程素養、編程思想的提高層面，很有欠缺！

坦白說，這也是初級程序員進階高級程序員的瓶頸期！

那么，如何才能有效的突破這種瓶頸呢？且聽老兵來分享一些個人成長經歷！

近些年，我也一直在探索這個問題，決心以精致的小案例，來給小伙伴們帶來大收獲，助力突破瓶頸期！

如果，喜歡的小伙伴，勞煩給老兵來點個贊來個三連！或者在彈幕打個 1，如果非常喜歡 彈幕也可以打個 2！你的支持，就是我不斷前行的動力！感謝諸位老鐵了！

夢想，起于相信！成就，源于堅持！

言歸正傳，我以為，重中之重的應該從我們的「編程思想」入手。

天下沒有完全相同的兩片樹葉，編程更是如此，完全相同的一個需求，不同的技術小伙伴都有不同的解決方案，這些方案甚至會出現驚人的差異化。

所以，每個程序員鍛煉出來的編程思維，也一定會有巨大的差異，今天我來分享一下我的「編程思想」鍛煉之道，希望能夠給諸位小伙伴起到拋磚引玉的作用。

今天，分享的主題是：小案例大收獲，100行代碼構建 Vue 圍棋棋盤效果

第一節、案例需求分析

1. 使用 Vue 基礎語法 v-for="item in 100" 構建一個正方形網格，配合 CSS3 語法 flex 彈性布局構建一個 10*10 小格子棋盤

2. 10*10 棋盤線每行會有 11 個拐角點，使用 Vue 在每個拐角點放一個黑色棋子

3. 使用 Vue 的自定義指令，讓棋子的顏色成為隨機變成紅黑色，再修改成隨機深色

4. 使用計時器，使用遞歸算法，或者使用數組移除的方式來，實現棋子一粒一粒，隨機動畫放置到頁面上的效果，配合分析其時間空間復雜度的變化

5. 在棋盤上綁定點擊事件，點擊棋盤交替落子黑白棋

第二節、初始化構建棋盤并在棋盤上放上棋子

1. 使用 CDN 引入 Vue.js 框架，并初始化

2. 使用 Vue 基礎語法 v-for="item in 100" 構建一個正方形網格，配合 CSS3 語法 flex 彈性布局構建一個 10 * 10 小格子棋盤

3. 10 * 10 小格子棋盤一共有 11 * 11 個可防止棋子的對角線，所以，需要專門額外做一個棋子專用盒子，覆蓋在棋盤上

第三節、動畫隨機擺放不同顏色棋子

1. 使用 Vue 自定義指令來實現棋子隨機紅黑顏色

2. 如果，我們希望的顏色是隨機顏色該怎么辦？

// 使用顏色方式構建多彩顏色el.style.backgroundColor = "rgba("+ ~~(Math.random() * 256) + ","  + ~~(Math.random() * 256) + ","  + ~~(Math.random() * 256) + ",1)"

3. 知識延展：這種隨機顏色效果，在日常開發中的真實使用場景是什么？

   谷歌的圖片搜索，在往下翻頁的時候，會使用到這個自定義指令來構建這樣的隨機色，讓用戶的體驗更好，但是這個隨機色有限制，需要控制在一定的區間內，同時，需要配合圖片的懶加載來實現這樣的目的，這也是我們前端業界的一個自定義指令經典案例了！

第四節、實現自動落子效果并分析多種算法解決方案

1. created 生命周期中，初始化一個用來保存棋子的數組 piecesArr，循環遍歷到頁面上

2. 配合計數器實現自動在棋盤上隨機落子效果，同步配合一個計數器來統計計算的事件復雜度

3. 使用一個映射數組來記錄落子情況，動態獲取記錄中的值，并移除當前記錄，提高程序效能，同時，計數器中的判斷也基于映射數組記錄長度來控制

第五節、技術場景拓展介紹及知識小結

1. 模擬實現按鈕下棋效果，紅黑棋子交替下棋，這里需要注意的是

點擊棋盤，交替落黑子、紅子到隨機棋盤位置上

2. 知識進階思考：

• 持續完成圍棋算法，實現一個完整的圍棋 demo；
• 基于技術模型扔骰子，配套一個「算命」的匹配庫，實現一個「算命大忽悠」小應用！

3. 知識總結

• 使用 Vue 的一些舒服的命令，可以讓我們快速構建大量重復的模塊
• 棋盤的拐角點和棋子的落子位，需要做一個棋盤覆蓋