小课堂(web开发)

web开发步骤:理解分析需求,UI界面结构拆解,功能逻辑分析实现

需求分析理解:

  1. 拿到新需求后,整体层面上去理解掌握所需开发界面跟功能。
  2. 一次版本迭代,无论需求多与少,都当成一个完整的项目,要对web端的当前版本的需求有全局的理解跟把控。首先要知道有哪些页面,哪些功能要开发的;其次,这次需求采用什么架构去实现,页面适配跟网络请求以及项目结构应该怎么处理;然后,考虑界面功能之间有什么关联,可以以什么样的形式进行界面功能之间的数据传递或者关联;

界面分析拆解

拿到UI设计图后,在开发之前,可以现在对界面的结构进行拆解分析,即将UI界面在脑中进行一次标签化,将界面转换成对应的标签结构以及布局实现,这样可以做到在开发的时候,对界面有准确的把握。因为事先已经分析过了如何将界面转换成对应的标签跟布局,所以在开发的时候,基本上是只需要调整部分细节即可,可以明显的提高开发的效率。

需要注意的是:

  1. 在进行界面拆解的时候,结构要合理,避免过多的嵌套跟浮动。尽量在自己的能力范围内缩减到最精简,但是如果是必要的嵌套则不用刻意去精简,从而增加布局难度。
  2. 在转换成标签的时候也要考虑布局,转换成标签后,下一步就是对布局样式的分析跟实现。
  3. 要做到在开发的时候,对于布局的实现已经事先掌握了具体的样式,代码编写完成后基本上的布局已经完成,只需要调整部分细节即可,而不是在开发的时候再去一个个的尝试。
  4. 其实就是要实现在心中运行一次代码,而这次代码的运行是基于自身对布局样式的理解,可以有效的提高对布局样式的理解跟开发效率。

注:在布局上面,浮动,定位,弹性布局等都能按照需要去使用。可以多思考相同布局的不同实现方式,多对比不同实现方式的代码情况跟兼容情况,可以灵活的去使用。

如:像这样子的一个组件我们应该怎么去分析跟拆解?


TIM截图20180918104611.png

功能逻辑分析

在界面布局静态实现后,我们开始接入js去调用接口,添加事件,增加交互逻辑等工作。

最先可以先实现交互逻辑,因为交互逻辑可以跟接口数据进行解耦,所以在接口未完成的情况下可以先完成交互这一部分。

交互这一块主要需要考虑如何实现交互效果跟数据之间的传递。
最简单的例子就是点击列表中的某一项进行页面跳转,此时我们需要考虑,点击事件的绑定是要通过什么方式去实现,是onClick还是addEventListener或者以事件委托的形式。然后再结合数据的加载情况,是仅加载一次的有限项列表还是可多次加载的有限项列表。再结合列表项的渲染方式,是通过string的拼接然后渲染到对应的父标签中,还是基于数据绑定的形式,或者其他方式。还有就是事件调用时,是否需要传递参数以及参数应该通过什么样的形式去传递,是直接在onClick方法中去绑定参数还是说以属性的形式绑定在对应的标签上,然后在调用的时候去获取。最后就是点击事件的绑定范围,应该将事件绑定在哪一个标签上才合适,这个就取决于可点击范围的大小,是整项都可以点击还是其中的某个标签才可以点击。

复杂一点的就是,点击某一项会改变其他组件的状态(显示,数据)。除了上面提及到的部分,还需要考虑组件显示隐藏,是通过jqueryhide or show方法去实现,还是通过切换class去实现。如果组件的displayflex等布局的话,不可以简单的使用hide or show。应该结合隐藏显示的方法跟组件布局去做合适的选择。其次就是数据部分,非父子关系的组件在进行数据交叉改动的时候,应该确保改动只针对所需要的数据源,不会改动到其他数据源。然后数据的获取,修改,重新渲染的过程要保证准确无误,使用恰当的方法去处理对应的数据。要求应该对number,array,string,object的方法有个全面的理解,应该知道有哪些方法可以选择,采用最恰当的方法去实现。除去js本身的API的部分,在逻辑方面也应该多加锻炼跟思考总结。对于常见需求的应该有自己的总结跟处理逻辑。再基于这些去优化跟增加自己手上的方案跟套路。形象点说就是要知道并且拥有自己的武器,在对付不同需求的时候可以有得选择,并且不断地去增加跟优化自己的武器。

然后就是接口部分,接口调用后的处理也是要养成一个习惯,要对成功跟失败的情况都做了对应的处理。然后就是在数据处理部分,常见就是返回的数据是个数组或者对象,然后要基于数组去遍历或者获取对象中的某个值,渲染对应的数据到对应的标签中。在处理数据方面应该多想想应该怎么去做,其实也就逻辑思维要多去强化,可以网上做一些逻辑思维的题目锻炼下。然后就是处理完的数据要渲染到标签中,是只渲染文本节点还是整个标签包括文本节点都去渲染,选择合适并且简单的方式去做。

总结

加强逻辑思维,打造自己的武器,转换思维,要把自己当成项目负责人去做项目,虽然不是全部模块都是开发,但是应该知道整体项目是怎么样的,不要等需求分配下来,多思考,多总结,要对项目有整体的把握,以及开发前进行分析,选择合适的方式去开发,提高开发效率,把握开发进度跟时间,争取提前完成,剩下的时间做测试跟优化。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容