前端路线图-上

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

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

03-CSS

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

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

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

04-javascript

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

05-jQuery

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

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