使用思维导图,来分析与设计代码的结构

我在讲课的时候,最大的感受就是学习前端开发最大的难点,不在于Js语言本身,而在于如何把UI设计图转化为抽象的代码,也就是分析与理解设计图中的需求。我的很多学生甚至是有Js基础的,但依然跑来报名参加我的课程,就是为了把课程中的项目整个的走一遍。

今天这篇文章就跟大家聊一下如何通过思维导图来分析业务需求,在实际的课程中,我也是这么讲解的。因为篇幅所限,尽量挑主要的说了。

<!-- -->

现在我在网上随便找一张UI设计图,

这是一个很普通的转盘抽奖,也许正在读这篇文章的你, 可以很轻松的把它做出来,也许你是一个前端新人,你甚至根本不知道要如何下手。那么我建议你这样开始,

(1)先画一个思维导图,列出它所有的功能点;

(2)把(1)里面的事件的执行顺序标示出来,这个执行顺序有时也是调用顺序;

(3)写出伪代码;

现在大概的代码的逻辑就出来了;

(4)改成prototype原型模式。不会?先写伪代码,

(5)你公司使用ReactJs;依然是伪代码,演示思路嘛,

(6)你公司使用Vuejs;还是伪代码,

如果你公司使用ng,sorry,我不会ng。。不过想来大概也是这个套路,最关键的就是在思维导图上把它所有的功能点列出来,或是你在纸上用笔写出来也行,然后把它们的功能点用线连起来,就像这样,

<!-- -->

到这一步,相信你已经看出来了,无论你使用什么,原生Js、jQuery、ReactJs、VueJs...,其实它们的实现思路都差不多。

我建议同学们如果遇到想不清楚逻辑的时候,可以采取以下步骤,

1、如果有产品经理,把他叫过来再给你讲一下交互的顺序;

2、用笔在纸上来一遍它的顺序,先点哪个,再点哪个;

3、把它用伪代码,先写出来,可以是原生JS,可以是jQuery,可以是原型模式、React或其它的什么;

4、经过前三步理清思路之后,再把伪代码写为真正的可以执行的代码。

<!-- -->

这一套方法不是我一个人的,而是很多程序员都这么用。我就是这样,三天学会php,写了一个留言板之后,又在二天之内把php完全忘光。

我这么说,不是说PHP简单,更不是吹嘘我如何如何。我只是想说明,这是一套“学习方法论”,可以用于任何程序开发语言。而且在实际的讲课实践之中,这个方法被证明是确实有效的。希望也能帮助到正在看这篇文章的你。

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

原文发表时间:2018-08-06

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏领域驱动设计DDD实战进阶

领域驱动设计之关联设计

3464
来自专栏C语言及其他语言

【干货】27种主流编程语言分类及优劣

导读: 数据科学家 David Robinson 称,Python 是访问量增长最快的主流编程语言。在 Stackoverflow 上,主流编程语言如 Jav...

78310
来自专栏小白的技术客栈

如何学习Python

Python是什么 ---- Python(英语发音:/ˈpaɪθən/), 是一种面向对象、解释型计算机程序设计语言,由Guido van Rossum于1...

4336
来自专栏CDA数据分析师

帮你提升 Python 的 27 种编程语言

27 种语言 过程型编程语言: C, Rust, Cython 面向对象数据建模语言: Java, C#, Eiffel C 的面向对象衍生语言: C++, D...

2518
来自专栏CSDN技术头条

帮你提升 Python 的 27 种编程语言

【编者按】本文作者是 Python 的设计者之一 Nick Coghlan,总结了提升 Python 的 27 种编程语言,包括过程式编程、面向对象的数据模型、...

3468
来自专栏机器学习算法与Python学习

Python是如何怼翻其他编程语言而窜上宝座的

来PK啊! 谁怕谁啊! 在过去的两年间,Python一路高歌猛进,成功窜上“最火编程语言”的宝座。 ? 更可怕的是,这把火不仅仅是在程序员的圈子里越烧越旺,甚至...

4058
来自专栏coding for love

ES6常用新特性学习

说起ES6,想必大家都不陌生了。ES6 的第一个版本,在 2015 年 6 月发布,正式名称是《ECMAScript 2015 标准》(简称 ES2015)。这...

843
来自专栏何俊林

我是如何通过阿里面试的?

8732
来自专栏*坤的Blog

『电子书』分享一波码农必备编程开发类书籍[转]

3463
来自专栏CDA数据分析师

帮你提升 Python 的 27 种编程语言

作为全球最流行的编程语言联合设计者之一,我经常看到的一种令人沮丧的行为(在Python社区和其它社区都有),就是那些有影响力的人试图把“缺失”的恐惧感灌输给其它...

2365

扫码关注云+社区

领取腾讯云代金券