这几年，很多工作 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 的一些舒服的命令，可以让我们快速构建大量重复的模块
• 棋盘的拐角点和棋子的落子位，需要做一个棋盘覆盖