资讯专栏INFORMATION COLUMN

零基础入门前端的修炼之道

JiaXinYi / 3200人阅读

摘要:面对这些较高的要求,前端在开发环节中的作用也变得越来越重要因而近几年来前端工程师备受青睐一般水平的前端工程师平均年薪可达万元资深前端工程师年薪高达万元。这种用户体验的细节问题是否处理妥当是判断一名前端工程师是否优秀的因素。

本文是为了给那些想要了解前端开发是什么,或者刚刚打算开始学习前端的朋友们准备,希望可以帮助准备入行的你;

总所周知,目前无论是企业还是个人,都会有制作网站、博客、小程序等需求,他们希望把自己的产品或服务通过互联网展示给更多用户。在这种情况下, 对于刚刚接触这方面的新人来说,可能先需要了解一个网站的从零到有的制作过程会涉及哪些环节。

简单的来说网站的诞生过程会经历这些环节

策划 > 设计 > 前端开发 > 后端开发 > 测试发布

从这个流程来看,我们的网站开发是一个系统工程,它需是多个环节之间紧密配合来去完成的,而“前端开发”这个环节处于整个系统工程的中间部位,起到承上启下的核心作用,因此“前端开发工程师”这个职位越来越受到重视,接下来我们先和大家详细聊聊关于前端开发这些事。

前端开发是做什么的

前端开发的兴起
前端开发是从网页制作演变而来的,在国内被大家所认知并接受是在 2005 年之后。在 2005 年之前,处于1.0 时代的 Web 并没有“前端”这个概念,此时的网页内容主要就是一些文字和图片,用户使用网站的行为也以浏览为主,这样的网页使用几个网页制作软件,诸如 Photoshop+Dreamweaver+Flash 就能制作出来。所以Web1.0 时代的网页开发也叫网页制作、美工切图;

2005 年之后,互联网进入 Web2.0 时代,对网页的开发要求越来越高,比起 1.0 时代,其开发难度加大,前端开发已经不再是掌握几个制作软件就可以做好的事了,它需要专业的工程师才能做好,网页除了展示信息以外,还需要美观的设计、炫酷的交互、良好的用户体验、复杂的业务逻辑处理、跨终端的适配兼容等,开发方式也有了本质改变,因此网页开发不再叫网页制作,而是变成了前端开发。

前端开发的市场需求

随着互联网行业的发展,在这个到处都是讲究“颜值”和用户体验的时代,“高颜值”以及能与用户进行友好交互的网站会极大地吸引用户,用户会更加愿意深入地了解这样的网站,也提高网站的用户黏度。面对这些较高的要求,前端在开发环节中的作用也变得越来越重要;

因而近几年来前端工程师备受青睐,一般水平的前端工程师平均年薪可达 10 万元,资深前端工程师年薪高达 20~80 万元。但就这样的年薪,很多企业还是很难找到合适的前端工程师;

从上述企业的招聘信息来看,前端行业的就业薪资是较为可观的。
那么如何才能做好专业的前端开发呢?
就让我在接下来的日子里,为大家分享下我的前端入门学习的修炼之道吧。

前端开发人员要具备以下能力

1.复杂炫酷的页面交互设计能力

在进行前端开发时,开发人员除了要将设计图完美还原以外,还需要对交互效果进行编写。当用户打开页面的时候,如果页面风格新颖、交互炫酷,那他就会感觉你的产品技术含量很高。相反如果页面风格老旧、交互呆板,他就会觉得你的产品不行,不买你的账。因此,前端开发工程师要具备设计复杂炫酷页面的能力。

在鼠标悬停和移开时的不同效果,就体现了一种较为炫酷的交互效果;

2.良好的用户体验设计能力

用户体验是从用户的角度出发,不仅要把炫酷的视觉效果展现给用户,还要从功能上让用户有所感知。例如当用户注册微博账号时,电话号码提供错误或者没有输入密码,输入框右侧应有相应提示。这种用户体验的细节问题是否处理妥当,是判断一名前端工程师是否优秀的因素。

3.复杂的业务逻辑处理能力

现在的前端工程师不仅要制作页面,还需要配合服务端工程师一起去实现某些功能。例如,微博的文章发布、用户搜索、评论留言等内容的开发,前端开发工程师对后端数据接收是否成功、搜索结果状态以及评论留言是否合法等进行逻辑判断处理。因此,前端开发工程师要具备处理复杂业务逻辑的能力。

用户输入数据不正确时显示提示信息

4.能处理跨终端的适配兼容问题

近年来,智能手机发展迅猛,几乎人手一部,大街上随处可见“低头族”。随着手机、平板电脑等不同移动终端的普及,越来越多的人喜欢移动办公、移动学习、移动娱乐......人们经常会在不同的终端之间进行切换,因此,这就要求一个页面能实现跨终端的适配兼容——即能在不同终端中正确显示。

比如域名 www.miaov.com,在 PC 和移动端浏览器中的显示如图 1-6 所示,该示例给我们展示了该域名跨终端适配兼容的其中一种情况,这种适配兼容运用于网站内容比较复杂的情况,通过后台判断,渲染不同模板进行输出或跳转;

还有一种情况,就是各终端显示的页面内容完全一样,但页面布局等样式会根据终端屏幕的大小进行自动切换,如图所示就是响应式设计。响应式网页开发主要是基于一套代码来适配不同尺寸的终端,有关响应式网页开发技术请阅读本系列丛书的响应式开发。

综上所述的,前端开发的工作主要是开发用户操作界面,其中涉及的内容包括实现炫酷的页面交互、提供良好的用户体验、配合服务端工程师处理复杂的业务逻辑和实现 Web 的跨终端适配兼容等,这些都是一个合格前端要掌握的必备技能;

至此,我们已经大致了解了前端开发到底是做什么的。现在的问题是如何成为一名合格的前端开发工程师?怎样才能将前端 开发的各项工作做好?要成为专业的前端开发工程师、做好前端开发的各项工作,需要掌握哪些相关的技术呢?

下一期我将就这些内容进行介绍

关注本订阅号,观看《零基础入门前端的修炼之道》系列文章

公众号ID:Miaovclass
关注妙味订阅号:“妙味前端”,为您带来优质前端技术干货;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53165.html

相关文章

  • Android 研发工程师图书一览(2016年版)

    摘要:番茄工作法简约而不简单,本书亦然。在番茄工作法一个个短短的分钟内,你收获的不仅仅是效率,还会有意想不到的成就感。 @author ASCE1885的 Github 简书 微博 CSDN 知乎本文由于潜在的商业目的,不开放全文转载许可,谢谢! showImg(/img/remote/1460000007319503?w=728&h=792); 广而告之时间:我的新书《Android 高...

    MadPecker 评论0 收藏0
  • Android 研发工程师图书一览(2016年版)

    摘要:番茄工作法简约而不简单,本书亦然。在番茄工作法一个个短短的分钟内,你收获的不仅仅是效率,还会有意想不到的成就感。 @author ASCE1885的 Github 简书 微博 CSDN 知乎本文由于潜在的商业目的,不开放全文转载许可,谢谢! showImg(https://segmentfault.com/img/remote/1460000007319503?w=728&h=792...

    NoraXie 评论0 收藏0
  • 【三万粉丝终极福利】Python、C、Java三大语言学习路线和资源整理

    摘要:今天给大家带来三万粉丝三大语言学习路线和资源整理,收藏就对了。还有对数组面向对象和异常处理等。语言学习路线一基础阶段技能树掌握脚本界面编程能力数据库基本爬虫多线程多进程开发能力,可以胜任基本的开发工作。 大家好,我是辣条。 今天给大家带来三万粉丝三大语言学习路线和资源整理,收藏就对了。 目录...

    GitChat 评论0 收藏0
  • 爬虫 - 收藏集 - 掘金

    摘要:在这之前,还是有必要对一些概念超轻量级反爬虫方案后端掘金前言爬虫和反爬虫日益成为每家公司的标配系统。 爬虫修炼之道——从网页中提取结构化数据并保存(以爬取糗百文本板块所有糗事为例) - 后端 - 掘金欢迎大家关注我的专题:爬虫修炼之道 上篇 爬虫修炼之道——编写一个爬取多页面的网络爬虫主要讲解了如何使用python编写一个可以下载多页面的爬虫,如何将相对URL转为绝对URL,如何限速,...

    1fe1se 评论0 收藏0
  • JavaScript修炼之道

    摘要:它返回值是一个字符串,该字符串说明运算数的类型。结构由大括号,中括号,逗号,,冒号,双引号组成,包含的数据类型有,等。数组与对象并用数据交互创建文件类库特效开发运算符与简化写法记录参数操作正则表达示扩展内置对象 1.JavaScript基础类库 如:jQuery、jQuery.cookie等 2.创建静态对象 var obj = {}; var obj = new Object();...

    shiina 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<