学习前端出来社会上就是大概率从事写代码工作的了,如果你是一个前端初学者,你可能对前端应用在什么地方感到疑惑。除了“马里奥”“贪吃蛇”等经典游戏,其他领域好像也找不到前端的踪迹,那么前端究竟能做什么,下面详细说说。
第一,企业官方网站的开发与维护。这个应该是最简单的了,基本上是纯静态页面的展示,就算有交互模块,应该也是比较简单的那种,甚至纯 js 使用类似于 oop 的方式就能够很轻松完成,基础好的话,甚至可以不依赖 jquery 或者 zepto。
第二,门户类型网站的开发与维护。例如像搜狐一样的门户网站,但是偶不确定这种业务线是否还在招人,相对来说也不难,但是如果想开发得好,实现高可维护性和扩展性,还是很考验开发人员的抽象能力。可以留意看看,这种网站一般分成很多个模块,每个模块的展现结构是非常类似的。如何做到可复用性强,对产品需求变更迭代时更加友好,那就很考验开发人员前端三大语言的设计模式了。
第三,电商网站。例如京东和淘宝,里面不仅有对用户友好的展现方式,合乎逻辑的交互方式,还会涉及到网站、商品的色彩设计、排版设计、交互设计,虽然可能都由设计师来出方案,但是前端开发同学可以从中学到很多东西。此外,除了单纯的展现,你需要考虑更多的东西了。例如,不同端的字体展现,响应式布局,图片大小,静态资源缓存,CDN部署,ajax动态数据交互。这些还都是偏纯展现的。还会有涉及到个人信息填写、支付款项、密码输入等等,会涉及到一系列的前端安全问题,这部分也是很锻炼人的。
第四,后台管理系统。一般这个是给内部人员使用的,所以可以不用考虑太多的兼容性,直接要求统一使用谷歌浏览器或者火狐。这时候要考虑更多地是如何与后端进行数据交互的问题。小公司还好,后台基本没有精力做微服务,API的设计也不会趋近于原子粒度,基本前端需要什么数据,那就有后台的API统一提供,前端只管展现,而且将交互做得好一点就行了。如果是大公司又不一样了,如果后台做了微服务,而且API的设计粒度很小,那前端为了保持接口的统一,可能就需要加一块 node 中间层,来聚合不同接口的数据,然后统一返回给前端。还有就是会涉及到敏感权限校验、角色权限控制、接口读写权限分离与控制等等,也是一大块的学问。
第五,H5的活动营销页、红包落地页、明星投票页等等一系列与营销活动相关的移动端页面。这些需要你的 CSS 功底非常扎实,常常要写一些动态效果、动画效果,越生动越吸引用户参与。另外同样考验你对不同机型不同移动浏览器的兼容性问题,还有响应式布局。数据交互层面的话,一般不会太多,但是一定会有打点上报,用来分析页面性能。还有一些要根据不同的营销参数、渠道参数来展现不同的内容,或者上报不同的数据,这里就要对 url 、缓存的处理有相应的能力。当然了,这块页面是很注重页面白屏时间和性能的,有能力的团队会考虑SSR直出页面。
第六,移动端视频播放页面。最近短视频崛起,但是很多短视频 app 中的页面是 web 前端页面,这样做的原因是 app 过审麻烦且时间周期长,业务需要快速迭代和修复的情况下,前端责无旁贷。那么这时候考验的是你对视频的操作能力,对流式播放技术和能力的掌握。此外,视频挂件、贴纸、弹幕、互动、美颜、变老挑战等等,都是现在短视频必备的能力。
第七,微信小程序。噢,不,应该是小程序。微信、支付宝、百度等大企业,先后推出了小程序,当然身为前端开发的大家是必须掌握的一门技巧,虽然不是新的语言,但代码组织方式、调试方式、底层原理,也是值得关注和学习。
第八,造轮子写工具、写框架,搭建基础设施。公司逐渐发展壮大以后,会面临一个问题,那就是如何将前端基础设施做起来。基础设施对前端的工程搭建与发展来说,太重要了。技术的选型、代码风格的制定,代码模块的积累沉淀,项目的打包构建与部署,持续集成与持续交付,单元测试与UI自动化测试,错误日志上报与可视化,打点日志上报与可视化,成员间代码协作与代码评审等等。这些对一个业务步入正轨的公司或者团队来说,太重要了。这是前端工程的基石,业务快速迭代的奠基,必须重视起来。
每天大家打开电脑,看到各种各样的Web前端页面。你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程。在这里就为大家详细介绍一下制作一个Web前端页面的设计流程及注意事项。
一:确定网站主题
每个网站都有自身以及对用户的定位。针对网站定位确定网站的主题是整个网站运营的核心。一般从网站建设的目标、网站用户群体、网站产品内容以及企业服务四个方面确定网站主题。此外还需要注意,每个页面不但要承载整体企业的定位,同时还要侧重其中某一个特定主题。
二:网站整体规划
为了提高用户体验以及提高网站在搜索引擎收录率,在网站建设初期最好能够理清网站机构,增加不同页面之间的关联性,从而更好规划页面的布局以及网站功能。一般情况下,产品经理在设计网站初期就会提供完整的业务逻辑图,设计师和前端工程师根据业务逻辑架构完成相关页面的设计开发。需要重点考虑的内容包括:网站的功能、网站的结构、拌面布局等等。尤其在网站功能需求较多的情况下,网站整体规划更加重要。
三、整合素材
在网站整体架构完成后,就可以开始整合收集素材了。网站开发和网站内容筹备同步进行,可以大大提高网页开发的效率。主要收集的素材包括文本素材(一般由公司内容运营提供相应的文字素材,需要注意的是,这些文字素材的准确性以及版权非唯一性)、图片素材(现在很少有纯文字性的网站,往往需要大量的图片素材,甚至还有视频素材等)。
四、网站开发与动态效果
前端页面开发主要用到HTML、CSS、JavaScript技术。在确定网站结构以及页面设计图齐全的情况下,前端开发工程师就可以进行页面开发了。这个过程中主要完成页面搭建以及动态效果实现。
此外在前端页面设计过程中还需要有一些常规的注意事项:页面分辨率设置,在设计网页时,页面的宽度尽量不要超过屏幕的分辨率,否则页面可能无法完全展示;注意页面版心位置。目前比较流行的屏幕宽度分辨率一般1200PX~1920px,为了适配不同分辨率的显示器,一般设计班型宽度在1000Px~1200Px之间。
这就是为大家分享的Web前端页面制作流程以及注意事项。在不同的公司中,前端工程师的岗位职责是不同的,甚至在某些大型互联网公司中,部分前端工程师仅仅做其中一个环节,即使如此作为前端工程师还是要多多学习大前端的技术知识,才能更好的适应企业人才需求。