国产精品色哟哟_男男激情3p互攻_色偷偷影院_和女同学厕所做了四次

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

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

但是，面對(duì)涉及個(gè)人編程素養(yǎng)、編程思想的提高層面，很有欠缺！

坦白說，這也是初級(jí)程序員進(jìn)階高級(jí)程序員的瓶頸期！

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

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

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

夢(mèng)想，起于相信！成就，源于堅(jiān)持！

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

天下沒有完全相同的兩片樹葉，編程更是如此，完全相同的一個(gè)需求，不同的技術(shù)小伙伴都有不同的解決方案，這些方案甚至?xí)霈F(xiàn)驚人的差異化。

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

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

第一節(jié)、案例需求分析

1. 使用 Vue 基礎(chǔ)語法 v-for="item in 100" 構(gòu)建一個(gè)正方形網(wǎng)格，配合 CSS3 語法 flex 彈性布局構(gòu)建一個(gè) 10*10 小格子棋盤

2. 10*10 棋盤線每行會(huì)有 11 個(gè)拐角點(diǎn)，使用 Vue 在每個(gè)拐角點(diǎn)放一個(gè)黑色棋子

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

4. 使用計(jì)時(shí)器，使用遞歸算法，或者使用數(shù)組移除的方式來，實(shí)現(xiàn)棋子一粒一粒，隨機(jī)動(dòng)畫放置到頁面上的效果，配合分析其時(shí)間空間復(fù)雜度的變化

5. 在棋盤上綁定點(diǎn)擊事件，點(diǎn)擊棋盤交替落子黑白棋

第二節(jié)、初始化構(gòu)建棋盤并在棋盤上放上棋子

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

2. 使用 Vue 基礎(chǔ)語法 v-for="item in 100" 構(gòu)建一個(gè)正方形網(wǎng)格，配合 CSS3 語法 flex 彈性布局構(gòu)建一個(gè) 10 * 10 小格子棋盤

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

第三節(jié)、動(dòng)畫隨機(jī)擺放不同顏色棋子

1. 使用 Vue 自定義指令來實(shí)現(xiàn)棋子隨機(jī)紅黑顏色

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

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

3. 知識(shí)延展：這種隨機(jī)顏色效果，在日常開發(fā)中的真實(shí)使用場(chǎng)景是什么？

   谷歌的圖片搜索，在往下翻頁的時(shí)候，會(huì)使用到這個(gè)自定義指令來構(gòu)建這樣的隨機(jī)色，讓用戶的體驗(yàn)更好，但是這個(gè)隨機(jī)色有限制，需要控制在一定的區(qū)間內(nèi)，同時(shí)，需要配合圖片的懶加載來實(shí)現(xiàn)這樣的目的，這也是我們前端業(yè)界的一個(gè)自定義指令經(jīng)典案例了！

第四節(jié)、實(shí)現(xiàn)自動(dòng)落子效果并分析多種算法解決方案

1. created 生命周期中，初始化一個(gè)用來保存棋子的數(shù)組 piecesArr，循環(huán)遍歷到頁面上

2. 配合計(jì)數(shù)器實(shí)現(xiàn)自動(dòng)在棋盤上隨機(jī)落子效果，同步配合一個(gè)計(jì)數(shù)器來統(tǒng)計(jì)計(jì)算的事件復(fù)雜度

3. 使用一個(gè)映射數(shù)組來記錄落子情況，動(dòng)態(tài)獲取記錄中的值，并移除當(dāng)前記錄，提高程序效能，同時(shí)，計(jì)數(shù)器中的判斷也基于映射數(shù)組記錄長度來控制

第五節(jié)、技術(shù)場(chǎng)景拓展介紹及知識(shí)小結(jié)

1. 模擬實(shí)現(xiàn)按鈕下棋效果，紅黑棋子交替下棋，這里需要注意的是

點(diǎn)擊棋盤，交替落黑子、紅子到隨機(jī)棋盤位置上

2. 知識(shí)進(jìn)階思考：

• 持續(xù)完成圍棋算法，實(shí)現(xiàn)一個(gè)完整的圍棋 demo；
• 基于技術(shù)模型扔骰子，配套一個(gè)「算命」的匹配庫，實(shí)現(xiàn)一個(gè)「算命大忽悠」小應(yīng)用！

3. 知識(shí)總結(jié)

• 使用 Vue 的一些舒服的命令，可以讓我們快速構(gòu)建大量重復(fù)的模塊
• 棋盤的拐角點(diǎn)和棋子的落子位，需要做一個(gè)棋盤覆蓋