骑马逛前端

摘要:关于web前端所必备的知识、晋升等级、就业趋势、薪资等在网上可是众说纷纭,聊得火热。很多刚毕业的大学生跨专业转前端、在其他行业从事者在跨行业转前端、后台开发转前端等等。确实,前端开发是一份可持续发展的工作。但对于前端开发真实的工作流和方式,很多人都是一知半解。本文结合HIS5项目开发过程,重点阐述前端的真实工作流程,以及在开发过程中的一些思考与分析,以便其他开发人员借鉴。

关键词:前端开发 分析 优化

个人从2017年3月开始参与HIS5项目,至今七月有余,从起初对前端开发流程的一知半解,到目前的熟悉,对前端的真实工作流程和方式也有一些自己的理解。以下结合HIS5详细阐述前端真实开发过程,希望可以给大家提供一些可借鉴的思路与方法。

1. UI、前端、后端分别是做什么

关于UI、前端、后端的工作内容(外界很多人都是模棱两可,主要的原因是考虑的角度不一样,这里也仅代表个人想法,并不是绝对的)从开发技术的角度上来讲:

UI:UI设计人员根据项目的需求设计原型图,即前端开发时参照图。包括自己创作(在素材基础上修改图片),布局(不需要HTML/CSS),切图。主要是用Photoshop来制作。

前端:前端从应用的角度大致分为两种,一种是针对业务型的,针对专门的业务,一种是多极化发展的,如针对不同业务需求封装好的可以共用的框架,或者设计模式(MVC)、工程化/TDD Node/MongDB。HIS是针对医疗管理和医疗活动中心的,属于前者。前端开发主要是对视图层进行操作,即用户所能看到的画面。HIS5的前端开发也毫不例外,开发流程大致分为三部分:

对UI人员设计的原型图进行重构,首先是布局(主要用HTML+CSS来实现,其中HTML是超文本标记语言,用来创建页面,CSS是修饰页面的作用,用来写页面的样式),其次,根据需求可以把页面做成具有响应式(根据页面的大小自动变换适应整个屏幕,主要应用CSS、封装好的插件或者框架来实现)的PC端。最后,通过js实现页面一些动画效果。如在HIS5中将常遇到的鼠标点击表格的某一行,该行的背景颜色显示为蓝色。或者其他业务上的闪光效果等。

进行数据交互,通过ajax来请求后端编写好的接口,使得页面上的数据具有真实性,用户通过对页面上一些按钮点击的操作,实时显示有效的数据。这过程主要是根据业务的需求用js编写简单的逻辑来实现,如循环、分支等,以及更深入的利于逻辑,如闭包、作用域链,代码重构、封装、复用等。

后端:如果说前端开发就是人的躯体,UI设计是穿在身上的衣裳和所化的妆容,那后端开发就是人的灵魂。从跟前端交接来说,后端主要是为前端提供接口。从工作内容来说,后端主要是对数据逻辑的处理和整个流程框架的构建。是对控制层、服务层、数据层进行操作。HIS5项目是运用三层架构模式(SSM框架,String + StringMvc + MyBaties)、Java 、Oracle(数据库)、Tomcat、gitHub(版本库管理)等相关知识,来控制着整个系统的运作。

2. 怎样分析项目需求和UI设计图

了解业务需求是必要的。在开发之前,应该大致浏览一下详细设计文档,知道整个开发流程的走向,结合实际应用,提出合理性要求,尽可能避免不合理需求,即时补缺补漏,减少开发过程中的变更几率对于整个业务的开发非常重要,对于业务需求不了解的人员,要及时跟设计等相关人员沟通、咨询。

盲目切图是大忌。首先,应该先分析一个模块、一个页面,甚至某个功能,哪些地方相似度高,可以抽离出来,根据不同的变量标识,封装成一个方法,然后在需要时进行调用,这样不仅提高代码的利用率,而且减少代码的冗余度。

对于前端页面的布局,其布局方式因人而异,每个前端开发人员各有不同,在切图之前应该根据详细设计文档,思考页面布局方式,如图,HIS5项目的排班管理的界面:

排班管理页面图

该界面可以table表格标签来布局,也可以用ul跟li标签布局,或者用div标签及其属性display来布局,设置其属性display:table,该界面的医生排班根据业务需求以及用户习惯按日期、科室来切换分类,虽然是一个很普通的页面,但该页面在布局之前需要慎重考虑。

与后端结合,一些层次较多,可根据后端返回的数据格式布局。如HIS5项目的排版模板维护页面,如下图:

排班模板维护页面图

该界面返回的数据格式,不同后端开发人员各有不同。有可能是根据星期、班次,医生、科室这样一层一层的数据包裹返回给前端,也有可能是通过如星期、班次、医生、科室这样同级形式的数据返回等,后端返回的数据格式,有可能不适合我们已经切好的图,所以在切图前跟后端的沟通也是有必要的。

3. 组织项目的目录结构

项目的创建是正在开发过程中的第一步,目录的搭建在团队开发中至关重要。如果只是平常自己学习中写的一些测试,直接搭建一个.html,.css,.js文件就可以了编写你的代码。但是平常项目的目录搭建一般是通过模块化的,通过比如用脚手架搭建快速搭建一个vue目录,如图:

脚手架搭建的目录图

脚手架搭建快速搭建的目录,相对于HIS5项目来说还是有所欠缺,但是其中心思想差异不大,HIS5搭建的目录如图:

HIS5目录图

HIS5搭建的目录层级分化更加明显,对于项目中的每个模块都会独立分开,这样不仅便于团队间的开发协作,同时也能减少各个模块在开发过程中的耦合度,避免一处错,处处错的。

4. 优化及调试

关于前端开发过程中的优化准则,百度上比比皆是,这里主要结合his5开发做一些相对的整理。开发过程中,应尽量避免代码冗余,通过变量标识,抽离相似的的代码,封装耦合度高模块。能用CSS解决的不要用JS,比如响应式设计,通常用CSS的盒子属性box-sizing:border-box以及calc()计算,就可以解决,像鼠标经过时的样式之类的,没必要JS来实现,当然具体问题具体分析。编码的一些优化细节也要注意,因为性能的提升就是靠这些点点滴滴积累而成。如:

1) 用简单的判断三元代替if,ex:let a = flag==1?”a”:”b;

2) 多个判断时if,else配合使用,减少不必要的判断;

3) for循环,是否找到想要的后,有没break 阻止继续遍历;

4) 变量替代,对于多次使用到的地方,可以通过变量复制,来减少性能消耗,比如在开发过程中经常用到的for循环,for(let I =0 ;l

开发过程中,难免会遇到各种bug,此时调试则显得尤为重要。曾经的前端没有调试工具,只能通过alert来检测,很多开发人员因此而放弃了前端。现如今,所有的浏览器都有F12(调试工具)。通过它,我们可以快速定位页面布局样式的问题所在,可以设置断点查看当前的数据情况,从而检测前端数据交互哪个环节出错,还可以通过在控制台打印数据来确定问题所在点。如果连调试都不会,请不要告诉别人自己是程序员。它是我们必备技能。

5. 总结

通过参与HIS5项目的开发过程中,让我明白并学会了以下几个道理。

工欲善其事必先利其器。业务知识对于业务开发人员来说至关重要,有了一定的业务知识才能少走弯路,在开发之前应该要先去了解相关的业务。没有人天生就懂业务,靠的是平时的学习和积累。

沟通是关键。在开发过程中,难免会遇到各种问题,都要及时提出并进行沟通。沟通不仅能有效的帮助处理问题,少走弯路。还能提高开发效率促进团队间的协作,团队协作的重要性相信参与HIS5项目的每个人都知道,这里不再重复。

不积跬步无以至千里,前端是一份可持续发展的工作,也是一个不断学习的过程,其实不管在哪个行业都是一样的,唯有不断学习,才能不落后。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180206G083IS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券