技能一:绘制原型图,实现效果图
优秀的前端开发人员必然熟练掌握一种原型图设计工具,能够将构思通过工具绘制成原型图。同时能够将设计做出的视觉稿通过页面代码的方式表现出来。比如目前最流行,便捷的原型图工具Mockplus,历史悠久的Axure等。能完成这两个内容就可以初步进入页面前端的从业者行列了,但这就代表着我们可以胜任页面开发的工作了?不,才刚刚开始!
技能二:与设计师的沟通和项目的参与
各行各业沟通很重要,作为前端开发人员,接触到的最主要的“客户”就是项目设计师。设计师根据原型图出视觉稿,在这个过程中,前端开发人员需要和设计师进行某些效果实现的探讨,比如对低端浏览器渲染效率影响,是否可以通过CSS3实现从而使结构更加清晰,是否能在视觉效果和代码实现中寻求平衡。前端开发有义务对开发出来的页面稳定性和渲染效率负责。在很多情况下,项目进度要求设计与前端开发同步进行,这种情况下就必须尽可能多的参与到项目沟通。
技能三:搭建良好的页面结构
在前端开发中页面结构的编写好比盖房时的打地基,结构的好坏会直接影响到代码的质量、JS开发、后端的开发以及以后页面的扩展、调整和迭代。当拿到设计稿之后不要急于开工,多观察思考。先分析布局,划分框架,然后规划结构,编写代码。
技能四:优美的代码
随着web项目功能越来越复杂,带来的直接后果就是代码的体量变得很庞大。如何进行协同开发和代码的维护是从前端开发开始就要思考的问题。这种情形下需要考虑完善,统一规划,养成一个良好的代码开发习惯。比如:合理的使用标签、良好的注释、清晰的代码结构、准确使用CSS等。优美的代码,清晰的结构能够为下游开发和协同开发降低了不小的沟通成本。
技能五:保障效率
作为项目开发中靠前的一环,前端开发人员一定要有一个认识:尽早完成为项目后续进展争取更多的时间。“工欲善其事,必先利其器”,除了实战经验和代码习惯的形成可以帮助我们提高效率外,想要提高对自己开发的进度掌控能力,还需要学会使用辅助工具帮助提高页面开发的效率,比如使用Less 或 Sass 可以帮助我们拓展和组织CSS,大大提高 CSS的编写效率增加了可维护性。多多发掘一定会找到最合适自己使用的工具。
技能六:针对服务器的优化
页面开发也需要了解服务器的优化,尽量减小服务器负担。比如css sprit
项目经验(案例一)
项目时间:2017-03 - 2017-07
项目名称:储运管理系统(改版) | 项目工具:Windows
项目描述:
项目介绍
1、项目技术Java、bootstrap、bootstrap-table、echarts、百度地图、jQuery、JavaScript、ajax
2、开发工具myeclipse、Hbuilder
3、采用bootstrap对系统进行改版重构
我的职责
1、与ui沟通协作完成设计稿效果
2、实现设计稿前端界面的布局及动态交互效果
3、bootstrap-table完成系统表格重制作
4、测试系统功能并提出改善意见
5、解决浏览器兼容性问题
项目经验(案例二)
项目时间:2016-03 - 2016-06
项目名称:丝集网
项目描述:
项目介绍
丝集网是丝绸行业的电商。
我的职责
1、运用HTML5、CSS3、Javascript/Zepto完成页面实现及响应式布局;
2、使用了ui-router来进行页面的路由控制;;
3、结合自定义指令以及自定义服务完成页面的交互效果。
4、与后端配合,运用ajax请求接口数据,异步更新页面;
5、与设计师、产品合作,实现产品UI和交互方面的开发需求,确保产品具有优质的用户使用体验。
6、负责后期页面的的维护工作以及fixbug。
项目经验(案例三)
项目时间:2015-11 - 2016-05
项目名称:伊艾博网
项目描述:
项目介绍
武汉伊艾博科技有限公司项目,页面由网站首页、产品目录、最新消息、联系我们等模块;
我的职责
1.利用BootStrap进行页面布局以及进行响应式处理;
2.利用bootstrap-module添加页面组件;
3.利用bootstrap-plug-in制作轮播图,nav等插件;
4.利用H5完成表单验证;
5. 利用Ajax异步向后台发送请求;
6. 与后台开发人员配合完成产品的调试,接口调用等;
项目经验(案例四)
项目时间:2016-03 - 2016-07
项目名称:绿野(App)
项目描述:
项目介绍
旅游到我家 -- 有温度的旅行!
旅游到我家 -- 找导游、定制游、搭伴游、导游直播、旅游社交、旅行社交、订机票、选酒店...
我的职责
1.通过Html+CSS对页面进行搭建,利用sass预编译语言进行布局
2.使用JavaScript等技术,实现产品所需的交互效果;
3.vue-axios进行数据渲染
4.使用vue路由实现页面内容的切换
5.vue-lazyload实现图片的懒加载
6.vue-cli搭建项目