【蒙圈】自己写的Js,自己不认识了?

最近在讲课的时候,发现一个新问题,就是许多同学面对着自己写完的代码,蒙圈了。

我是谁?我在哪里?我在做什么?这些代码是怎么出现的?

说来可能难以相信,明明是你自己写出来的代码嘛。

但是,下课之前我说,今天的作业,如何如何要求,格式什么样,标明用了多长时间,然后就有同学在学习群里问我,。。原话记不太清了,大概意思就是,自己写的看不明白了,还得再写一遍呀?

我说,要这样你何止再重写一遍啊,你得反复多写几遍才行。然后跟我说没思路,我说每个功能点,每个函数它们是如何交互、沟通的,我都给你们画思维导图呀,

。。。

。。

如此这般吧。

咱们在课上写代码的时候,能写出来主要有二个因素,

1、我刚讲完,脑子里还有印像;

2、我把代码都写好了,在视频里你们都能照着写;

写完之后,脑子里印象退散,又没有代码参考,思路又不太到位,自然再看自己的代码就蒙圈了。

在我个人看来,咱们前端新人写代码的时候,容易只顾眼前,就是很容易顾头不顾尾。所以写完之后,最好就是从头到尾再检查一遍。如果js运行没有错误,那么就把JS的格式再清理一下,

<!-- -->

那么,回到根本的问题,JS代码怎么读比较适合呢?

写东西之前,

1、分析UI设计图的功能结构;

2、根据功能、结构,理清此模块的交互顺序;

3、把各个交互的元素的id名写好;

4、根据1,2,3,先定好各自的函数方法,还有调用关系;

我又给同学们画了个思维导图,就这样式的,

如果你拿到的,是一个项目文件,并且它的文档不完整的时候,

阅读代码的我个人主观的基本方法:

1、先找入口,起点;

2、找到它定义的地方;

3、把它所有的方法、属性,都列出来;

4、找到它们之间的调用的关系;

5、各个方法之间,传递的参数;

把所有的方法里,用到的所有的参数,

谁跟谁,都理清楚。

6、就开始用中文,

描述各个函数以及它收到或返回的参数的用途。

7、把你的中文描述,再画一个图;

8、用你写出来的“中文文档”,再加上代码结构的图,回过头来,再对照着看代码。

就是,无论多么长的代码,多么复杂的代码,我个人吧,都是这么看,这么读。

尽量不要生生的硬看代码。

遇到bug,一时找不到原因,可以使用排除法,

1、大段的删除代码,查看bug是否消失;

2、不断缩小删除的代码的范围,直到定位bug;

3、排除bug;

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2018-05-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯IVWEB团队的专栏

那些年我们踩过的坑

没有一个程序员一开始就能写出高抽象,复用性高的代码,和一世人流流长,总会爱上几个人渣一样,程序员总会遇到各式各样的坑,关键是遇到坑之后是视若无睹还是努力学习改进...

6700
来自专栏敏捷开发&项目管理

TDD 一个简单的例子

我们按照 TDD的1个准备步骤+关键5步来看做一个小例子。 需求: 假设我有一个叫Dollar的class, 那它有个方法叫做Times. 我现在的目的是要实现...

3548
来自专栏小樱的经验随笔

CTF---Web入门第四题 Forms

Forms分值:10 来源: Ph0enix 难度:易 参与人数:4945人 Get Flag:2776人 答题人数:2824人 解题通过率:98% 似乎有...

31811
来自专栏CDA数据分析师

三行Python代码,让数据预处理速度提高2到6倍

Python 是机器学习领域内的首选编程语言,它易于使用,也有很多出色的库来帮助你更快处理数据。但当我们面临大量数据时,一些问题就会显现……

1684
来自专栏日常学python

爬取《The Hitchhiker’s Guide to Python!》python进阶书并制成pdf

这是日常学python的第15篇原创文章 前几篇文章我们学习了requests库和正则,还有个urllib库,我上篇文章也用了requests库来教大家去爬那些...

42317
来自专栏FreeBuf

一次编码WebShell bypass D盾的分析尝试

webshell是获得网站的控制权后方便进行之后的入侵行为的重要工具,一个好的webshell应该具备较好的隐蔽性能绕过检测,最近偶然间捕获到了一个webshe...

1052
来自专栏牛客网

蚂蚁金服暑期实习生一面总结

6382
来自专栏liuchengxu

代码健康: 减少嵌套, 降低复杂性

原文: Code Health: Reduce Nesting, Reduce Complexity

1022
来自专栏点滴积累

geotrellis使用(十)缓冲区分析以及多种类型要素栅格化

目录 前言 缓冲区分析 多种类型要素栅格化 总结 参考链接 一、前言        上两篇文章介绍了如何使用Geotrellis进行矢量数据栅格化以及栅格渲染,...

3618
来自专栏编程

Sprint测试交付物设计

交付物定义: 基于敏捷开发流程,每个Sprint周期交付内容应如下: Burndown Chat(燃尽图),例如下图所示: ? Smock Test(冒烟测试)...

2106

扫码关注云+社区