一个合格的web前端需要掌握哪些技术?
前端三大基础技能HTML、CSS、JS自不必说,这是前端吃饭的东西。
TCP/IP、浏览器渲染原理、前端性能优化兼容、PC/M端开发、DOM、BOM、计算机原理(基础,一般软件或计算机出身的都知道)等。
就目前社会上需要的而言,除了基础之外,会要求掌握Vue、react、ng、node等一个或多个知识。隐约已经成为了一个事实的标准,但这些知识你可以看出,都是JS,没错都是JS,所以说JS的掌握程度越高,你学习这些框架越轻松,毕竟这些都是API嘛。
还有就是一些npm、yarn、gulp、webpack等工具的使用。
大部分要求是这样的了,团队的技术栈也是围绕着这些。但是对于应届生其实没这么高的要求,基础掌握大致就是不错的了。毕竟应届生大概是什么水平团队都是知道的。能有个工作三五年的老司机有经验吗?可能性不大,毕竟很多东西是需要项目来淬炼的。
谢邀,我来分享作为BAT的web工程师看到的,一个合格的web前端需要掌握哪些技术。
三驾马车
最基础的自然是JavaScript,HTML和css这三种语言。
首先了解下它们到底是什么。
HTML是用户看到的网页的骨架,比如你会发现当前页面分为左中右三个部分,其中还填充了不同的文字和图片;每个子部分还会继续细分,比如当前页面的中间部分下方有输入框等等。
CSS是网页展示的细节控制,比如你会发现有的文字是红底白色,有的子部分占了页面的二分之一宽,有的只占六分之一,有些部分需要用户进行某些操作(如点击,滑动)才会出现等等,这些就是有CSS来控制。
JavaScript是负责捕捉用户在浏览器上的操作,并与后端服务器进行数据交换的脚本语言。当用户在前端进行点击,输入等操作的时候,会触动绑定了该动作的JavaScript脚本,然后JavaScript收集数据,调用后端的api接口,再将后端返回的数据交给HTML和CSS渲染出来。
一个网页的HTML代码和CSS代码是可以直接在浏览器中查看的,你可以直接按F12,就能看到下图右侧的模块,左右侧红框就是代码与实际页面的对应关系。因此如果你看到某个网站的布局很不错,不妨点击F12,进行学习。
前端框架
然而,实际应用中,已经很少有正规的项目组直接用上述三种语言进行web 前端开发了,而是使用很多封装了这三种语言的框架,比如
Vue.js
,angular,react native等等。它们是来自谷歌和Facebook的大神项目组,基于自己的经验,封装了原生前端语言,实现了更多更复杂更酷炫的功能。因此,可以说,学会使用这些框架,能达到事半功倍的效果。比如用了vue,它是自底向上增量开发的设计,其核心只关心图层,而且还可以与其他库或已存项目融合,学习门槛极其友好;另一方面,vue可以驱动单文件组件和vue生态系统支持的库开发的复杂单页应用。有了这个生态系统,可以说,vue是处在一个不断壮大,不断完善的欣欣向荣的状态。
网络通信协议
由于前后端分离的趋势,前端还需要了解很多网络通信协议的知识,这里不局限于http协议,因为据我的经验,有时候我们还会用到websocket等协议。因此,前端需要简单了解不同协议的特点以及使用方式,但是好消息是不用像学习计算机网络课程一样对每种协议的原理都了解的特别透彻,只要学会如何用前端语言发送这种协议的请求就够了。
以上,如果对你有帮助,欢迎点赞或者留言~
我是苏苏思量,来自BAT的Java开发工程师,每日分享科技类见闻,欢迎关注我,与我共同进步。
前端是近期逐渐火起来的一个职业,目前呢前端的划分比较的宽泛,写页面算前端,做全站的也可以算前端,也是五花八门,要啥有啥。这里说下各个阶段你的前端你需要掌握什么知识。
1、初级前端
掌握HTML、CSS、JS、jQuery基础,能够熟练的运用完成静态页面的制作以及页面中轮播图、弹出层、瀑布流、楼层导航、固定导航等特效的制作。
2、中级前端
掌握HTML5、CSS3、移动基础、ajax、bootstrap、less、vue等框架以及技术,能够熟练的完成网页交互处理,前台页面的渲染,优化网页动画设计,提高网站的性能,快速搭建交互式网页。
3、高级前端
全栈工程师,从前端语言的开发到后台程序的编写无不精通,具有独立完成整个项目制作的能力。整个公司的核心领队人物。
欢迎关注我,一个程序员老司机,和你分享编程、运营、需求等等经验和趣事。
自己经常与前端程序员接触,下面就来聊聊一个合格的WEB前端都需要具备些什么?
响应式页面布局
既然是前端,那么难免经常做页面,有PC的页面、有APP的页面、还有手机端的页面,还有PC和手机端共用的页面,也就是响应式页面,因为很多时候,为了节约各种成本,必须要实现一套能够兼容PC和手机端的页面,而这个也成为了WEB前端必须要具备的基本功底。
对接API接口
现在很多互联网公司都是采用了前端和后端分离的开发模式,也即是前端通过后端的API接口请求获取数据,然后前端的代码自己去解析这些数据,生成想要的页面,而这个API接口一般返回的是JSON或者XML数据,所以解析JSON和XML的数据是WEB前端程序员必须会做的事情。
快速上手框架
前端框架有很多,并且更新很快,比如JavaScript框架就有jQuery、react、angular和Vue等等,而CSS框架就有MUI、bootstrap等等,所以作为WEB前端程序员,你虽然可以不用一下会这么多的框架,但是必须具备快速上手的能力,能够在两三天或者一周内甚至拿来即用。
希望能够帮助到你。
怎么把轮播图的图片改成用ajax请求的?
首先,你会用js写轮播图,这就好办了。用js实现的轮播图应该有两种形式:
1. 一个是html里把轮播的图片都组织好,放置在<img>标签中,div包裹好,之后js调用轮播图初始化渲染方法,将这个div中组织好的img标签渲染成轮播图;
2. 另一个是在html里只放置一个标记有ID的div标签,图片的信息都放置在js的数组里,js调用轮播图初始化渲染方法,将这个标记ID的div渲染成轮播图。
那不管是上面的哪种形式,改成ajax的请求方式后,由于请求数据是异步的,首先要想到用户体验,轮播图区域在等待数据填充的时候,先放置一个loading状态图标;同时,发起ajax请求到后端等待返回数据,这里可以使用jQuery提供的ajax请求方法,get或者post方法,如下所示:
$.get("demo.json", function(result){ 这里写轮播图创建方法 }); });
$.post("demo.json",{suggest:txt},function(result){ 这里写轮播图创建方法 }); });
当数据正常返回后:
1. 如果是第一个形式,请将页面里的<img>区块用返回的数据动态创建出来,之后再调用轮播图创建方法;
2. 如果是第二个形式,直接将返回的数据填充到数组中,之后调用轮播图创建方法就可以了。

