打开网易新闻 查看精彩图片

01-基本介绍

01-基本介绍

早期的前端,就是所谓的切图(把PSD设计稿转换成HTML页面,并把PSD中的素材图片切出来使用),顶多再加一些动画特效,那么完成这个任务,基本上靠HTML、CSS和原生javascript就可以搞定了。如果再用上jQuery就会更加简单。一般情况下,前端做好静态页面(有时是美工做的)交给后端,后端整合到动态网页中(比如PHP、JSP、ASP)即可,然后前端基本就没什么事儿了,如果再修改前端效果的话,需要去后端项目中操作,但是这个后续的维护操作一般都是后端自己做了。

但是,现在的前端早已今非昔比,自从Node.js诞生之后,前端的触角越来越长,除了做网站前端效果之外,还可以做一部分后端的工作,大有抢占后端地盘的意思,那可是Java、PHP等语言的领地;此外,也可以做App开发,美其名曰Hybrid,也就是混合开发,从而也挑战了IOS、Android移动端开发的市场份额;此外还可以做桌面程序,比如我们写代码用的VS Code、写文档用的Typora都是基于前端技术(Electron)开发的。随着Node.js生态的不断完善,Vue、React、Angular框架的日趋成熟,前端的前景可谓欣欣向荣,甚至有一种说法,将来javascript可能会一统江湖,想来也未可知。

02-HTML

02-HTML

HTML(HyperText Markup Language)超文本标记语言,虽然称之为语言,其实就是一些标签,标签包括一些属性,与真正的编程层面的语言还是简单很多的,基本稍微花几天时间就可以熟悉常用标签的用法。

03-CSS

03-CSS

CSS(Cascading Style Sheets)层叠样式表,用来实现网页的布局,界面美化,也可以做一些动画效果,入门容易,但是真正把它的背后规则体系搞清楚,还是需要下很大功夫的,并且需要一定的实践经验才能达到熟练程度,虽然有的程序员写逻辑代码很厉害,但是CSS不一定可以玩得转。

其中布局方式从早期的表格、CSS+DIV、浮动、定位布局方式,到H5新兴的Flex、Grid等布局方式,技术层面也一直在不断完善,有时还要处理页面响应式布局,应对多端适配场景,甚至在App中内嵌H5页面,需要学习的内容还是比较多的。

在前端工程化项目中,一般都会使用CSS预处理,比如less、sass或者Stylus这样的编程风格,从而使CSS更加具备编程的特性,进一步增强了样式的控制逻辑。

04-javascript

04-javascript

javascript是真正意义上的编程语言,由于历史原因,他的语法非常灵活,虽说入门容易、但是深入还是有点门槛儿的。从我们早期常用的ES3、ES5规范,到后来ES6+,语言特性也一直在不断丰富,与此同时也在不断考验着前端程序员的头发。但是作为前端工程师,学好javascript是学习后续框架的根基,基础扎实了,后续框架的学习才会更有底儿。

05-jQuery

05-jQuery

伴随着Ajax的诞生,jQuery辉煌了近十年的时间,但是自从前后端彻底分离之后,随着Angular、Vue、React市场地位的逐步稳固,jQuery开始不断走下坡路,但无可否认,jQuery曾做出了重要贡献,相比原生javascript开发来说,jQuery提供了更加方便的API,解决了很多的浏览器兼容问题,并且社区也提供了很多基于jQuery的插件,还是解放了很大的生产力。如果是历史遗留项目,还是需要熟悉jQuery的,但是新项目选择jQuery的场景还是比较局限的。

其他更多技术路线,后续继续聊!