前端开发就是这样,“看似简单的东西,反而会很复杂。”

今天的零基础前端课讲到了一个tab地址切换的菜单,就下面这个东西,

第一眼看起来超级简单,无非是点击上面的title显示下面的菜单,然后点省市区把内容选上去而已。但就是这么个看似简单的东西,今天边讲边写,足足搞了一天。

为什么会这样呢?因为前端就是这样,它的复杂度不在于ui图设计的有多复杂,而在于ui的交互有多么复杂。

////////

开始的时候,我给他们讲,还是先按属性,方法,事件的这三个角度来分析这个需求,做为开发的起点,就画出下面这个东西,以做为思路的开端,

然后依然是按着工厂模式来做,先搞一个构造器,再在prototype上添加方法(我总觉得先用熟练一种设计模式会比较好),然后再相互调用它们。

刚开始的时候,只是dom的生成和一些交互事件的绑定而已,调用一些自己封装的公共方法,代码很简单,

////////

复杂的地方在于,后期的不同情况的操作,

当你选好了地址之后,想要修改地址的时候,你会有三个修改的入口,1,是从省直接重新选择地址;2,是从市开始选;3,是从区开始选。

这时就有一个地址title重新生成的问题了,因为title中的地址是[省,市,区]的一个数组构成的,然后通过循环这个数组生成title中的地址。当你从省、市、区分别修改地址的时候,事实上是在修改保存着地址的数组,...这里算是一个难点。

因为这个地方可以做的非常复杂。此地址“能否配送?有没有货?配送时间多久?这个地方是什么配送公司?。。。”,当然了,在这个例子里,只是地址的修改,但开发思路都是相通的,就看你以后怎么扩展。

////////

还有一些交互上要尽量做到“严密”,例如,

当你修改地址的时候,你选中了某省之后显示城市的列表,那么“区”的tab菜单按钮应该消失,免得你不选“市”而直接去选“区”,这些细节都是属于不实际开发就不会有感受的东西。

所以说,实际的开发比单纯的学js技术要重要的多。而这个东西最终做完的时候,它的js结构变成了这样,

这还是写的比较“啰嗦”的代码,里面还有些细节可以再提炼,但从对前端新人的易读性上来考虑,就先写成这样吧。

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

原文发表时间:2017-06-02

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

事件流处理框架NEsper for .NET

复合事件处理(Complex Event Processing)介绍提到了开源的Esper,NEsper 是一个事件流处理(Event Stream Proce...

25260
来自专栏Python学习心得

​Python爬虫--- 1.5 爬虫实践: 获取百度贴吧内容

原文链接:https://www.fkomm.cn/article/2018/7/22/21.html

12200
来自专栏Golang语言社区

golang websocket总结(问题贴)

因为工作的需要,接触了websocket,开始的一些很简单的代码,都不知道该怎样运行起来,所以,总是有一层神秘感,却没有太多的兴趣去研究它。不过,还是免不了要了...

43070
来自专栏岑玉海

RavenDb学习(一)设计模式介绍

RavenDb是一个文档型的数据库,和芒果Db是一个类型的东西,但是公司选择了它,主要是因为它对事务的支持比较好,芒果Db在事务方面有问题。 下面有一个例子...

45770
来自专栏腾讯移动品质中心TMQ的专栏

基于 hook 和 gmock 开展单元测试

单元测试又称为模块测试,是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中,一个单元就是单个程序、函...

95220
来自专栏Keegan小钢

App架构经验总结(一)

原文链接:http://keeganlee.me/post/architecture/20160303 版权声明:本文刊载在《程序员》杂志2016年3期,版权归...

24340
来自专栏杨建荣的学习笔记

初探Redis

大概在2010年的时候,有一次和一个同事聊天,那个时候知道了Redis,对于技术的追随至今,还没有下载一个Redis版本玩玩, 只有1万多行代码,以性...

45290
来自专栏SeanCheney的专栏

深入理解Python异步编程(上)

彻底理解异步编程是什么、为什么、怎么样。深入学习asyncio的基本原理和原型,了解生成器、协程在Python异步编程中是如何发展的。

85920
来自专栏逍遥剑客的游戏开发

GameEngineArchitecture读书笔记(二)

16750
来自专栏aCloudDeveloper

python学习笔记一

之前看过一本100多页的《python简明教程》,都是些非常简单的语法,现在到真正用的时候根本无从下手,所以,重新捧起一本《python学习手册》,1000多页...

24370

扫码关注云+社区

领取腾讯云代金券