这是我参与「第四届青训营 」笔记创作活动的的第三天
感悟摘要
在第三天的js学习中，月影老师给我们讲述了几个小时的前端编程，更准确一点来说更应该是编程。老师传递的思想庞大且成体系。在其中我了解一个好的前端开发不应该是天天揣着demo去写简单的需求，更应该要知道去拓展。将程序结构化、模块化，使其拓展性、维护性、可读性达到最高。这里我引用我在接触ji高级语法时候做的一个前端游戏-别踩白块儿。借助这个例子来展示程序的模块化。
写好JS的原则
-
各司其责
能让HTML、CSS和JavaScript职能分离
-
组件封装
好的UI组件具备封装性、正确性、扩展性、复用性
-
结构设计
-
展现效果
-
行为设计
API (功能)
Event (控制流)
完成需求后反复思考：这个组件，还有什么改进空间？
-
-
过程抽象
应用函数式编程思想
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
写代码最应该关注什么？
使用场景
按照上述规则，我们一步步实现它。
设计思路：将游戏内容使用Block类封装起来，一切游戏行为由Block类来实现。
这一整个Block就是一个游戏模块。体现编程的模块化
这里思考游戏Block主题的特有属性：
constructor(container) {
this.container = container; //游戏容器
this.timer = null; //计时器
this.state = false; //游戏状态
this.speed = 2; //游戏速度
this.sum = 0; //游戏分数
this.top = -150; //容器顶部
this.lastRowChilds = null; //最后一行
}
结构设计
行为设计
- // start() 游戏开始，创建游戏初始状态，开始监听全局
- // createRow() 创建新行，先创建一行，然后将行添加到container的首子节点，随机生成黑块
- // move() container移动，通过top控制整个container，使用speed来改变top的值
- // judge() 判断游戏状态，显示得分;当container到达底部时判断是否存在黑块，是则游戏结束，否则 删除末尾行
- // flash() 显示得分，在页面中插入分数
- // clickEvent() 点击监听，监听container容器的点击，在script中调用。
- // gameOver() 游戏结束，清除定时器，更改游戏状态
- // again() 重新开始，重置类，同时调用start()
至此整个游戏设计完毕，接下来就是进行行为方法的代码填充，具体实现方法多样。当我们需要更改和阅读游戏主题的代码时，可以直接阅读Block的构造方法，大大提高了代码的可读性，当我们需要更改游戏细节时，可以精准定位到需要更改的位置。
