重新认识身边的前端工程师

时间:2021-04-07 作者:管理员 点击:802

编辑导语:产品经理在日常工作中会接触到多方面的同事,也会产生比较多的交流,那除了接受需求以及判断需求以外,更多的是与开发小哥“battle”;本文作者分享了关于前端开发工程师的一些工作日常,我们一起来了解一下。

今天要介绍的是产品经理的小伙伴之一:前端开发工程师,虽然天天和他们打交道,但是想必大家都没有好好的“关心”过他们,今天我们一起来看看天天接触的前端工程师到底在忙些什么。

现在移动互联网发展的这么快,前端开发领域也越来越广,前端早已经告别了切图崽的时代,在web端、移动端(安卓、IOS)、Watch、小程序、公众号开发、混合app开发都能看到前端开发工程师的影子。

从狭义上讲,前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,处理视觉和交互问题。

从广义上来讲,所有用户终端产品与视觉和交互有关的部分,都是前端工程师的专业领域。

简单的说,前端开发工程师日常工作是创建Web页面或移动页面等前端界面呈现给用户的过程,通过前端三大件HTML、CSS、JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 。

用户看到的每一个网页主要由三部分组成:结构( Structure) 、 表现( Presentation) 和行为( Behavior)。

HTML —— 结构, 决定网页的结构和内容(“是什么”);

CSS —— 表现( 样式) , 设定网页的表现样式(“什么样子”);

JavaScript —— 行为, 控制网页的行为(“做什么”);

HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能;前端开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。接下来我们好好聊聊这三大件,知己知彼。

一、HTML是什么?

可以把HTML结构想象成一个没穿衣服的人。

HTML指超文本标记语言(HyperText Markup Language),“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素;前端开发利用HTML标签(Tag)来标记(Markup)网页中的文字。

上述代码是一个最基础HTML结构,一个网页的结构往往包括“头”和“主体”,头部的内容使用header标签标记,主要存放一些网页信息,例如网页标题、内容摘要、关键词等,头部内容也是SEO优化的重要对象。

主体部分用标签body标签标记,网页的内容全部放在body标签下,其内部又包含了很多代表不同含义的标签(如下表所示,只展示部分常用的)。

这些形形色色的标签就构成了页面的内容,要注意的是整个网页的内容都要放在一个顶层标签html标签下。

例如:我们点击某个链接,然后自动跳转一个新的页面,这过程都是a标签在起作用;还有看到的图片,就是img标签承载图片的数据源。

最后,告诉大家两个查看HTML源码的方法,好奇的伙伴可以去试试。

打开浏览器,鼠标在页面上右击,然后点击“查看页面源码”;

打开浏览器,按 “F12” 键;

二、CSS是什么?

可以把CSS想象成给一个没穿衣服的人(HTML结构)化妆、穿衣服等,作用是让它变得美美的 。

CSS 指层叠样式表(Cascading Style Sheets),是一种将网页内容与网页样式分离的技术。

我们经常会对一个网站评价道:这网站页面怎么这么乱、这网站看起来真大气——这背后都是受CSS影响。

CSS可以做什么?

1)CSS主要用来设计网页的样式,美化网页;它不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化;比如一开始文字显示是红色,我点击某个按钮后文字变黑色了。

2)你可以轻松地控制页面的布局,CSS 能够对网页中元素位置的排版进行像素级精确控制,因此我们能看到各式各样的布局风格。

3)在页面制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制;例如通过文本属性,可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进等等。

4)你可以将许多网页的风格格式同时更新,不用再一页一页地更新了;你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。

5)CSS在几乎所有的浏览器上都可以使用。

三、JS是什么?

JS能够让HTML结构这个人“跳舞”、“跑步”等动作,主要目的是让“人”动起来。

JS(JavaScript)是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果;通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

js可以做什么:

使网页具有交互性,例如,banner轮播效果、手动Tab切换等效果;

可以处理表单,检验用户的输入,并提供及时反馈节省用户时间。例如,表单中要你输入电子邮箱而你却输入一个手机号,那么应该给你一个错误提醒。

还可以根据用户的操作,动态的创建页面。例如,发邮件时,添加附件操作。

设置cookie,cookie是存储在浏览器上的一些临时信息,例如你浏览过的网站地址,使用过的用户名。

跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

……


JS代码示例

前端三大件到此介绍完毕,不过现在有些其他语言的程序猿在讨论HTML、CSS、JS倒是算不算编程语言。

四、全栈工程师

前端开发工程师在精进一步可以发展为全栈工程师,向T型人才或者π型人才发展。

全栈工程师熟悉多种开发语言,同时具备前端和后台开发能力,既能做前端(需要熟悉前端三大件以及Vue等各种前端技术),又能做后端(需要熟悉Node.js或Java或ASP.net或php或Go等),可以独自完成一个产品的前、后台开发工作。

简单了解下全栈工程师的技术栈有哪些:

前端技术:HTML/HTML5、CSS/CSS3、LESS/Javascript、jQuery、RequireJS、AngularJS、Vue等;

后端技术:node.js或Java、php、.net等;

中间件:Nginx或Dubbo;

数据库:MySQL或MongoDB;

代码管理:git、svn;

构建工具:webpack、gulp、Jenkins;

……

我们可以看到,对于全栈工程师来说,要活到老,学到老,其中最重要的属性,就是不同的思维方式和强大的学习能力。
返回列表
在线沟通

Are you interested in ?

感兴趣吗?

有关我们服务的更多信息,请联系

136 7365 2363(同微信) 13140187702

郑州网站建设郑州网站设计郑州网站制作郑州建站公司郑州网站优化--联系索腾

与我们合作

郑州网站建设郑州网站设计郑州网站制作郑州建站公司郑州网站优化--与索腾合作,您将会得到更成熟、专业的网络建设服务。我们以客户至上,同时也相互挑战,力求呈现最好的品牌建设成果。

业务咨询热线:

136 7365 2363

TOP

QQ客服

在线留言