前端知识体系

前端知识

• 前言：这是一篇介绍前端知识体系的文章，如果介绍不全还请斧正
  下面这张前端指示图是从github搬移而来
  
  image

图片的形式具有诸多的不便。缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变，但是这张图上的技术仍然活跃在前端的各个角落。

切页面

可能我们最熟悉的就是切页面，也就是我们最常说的"切片"。什么是切片呢，简单来说切片就是将一张静态的设计图还原成一个静态的HTML文件。切片通常会带有一些页面静态效果，比如选项卡、轮播等，静态的HTML通常不会与后端交互，简单来说就是不会使用ajax或者置标等功能。
从图中来看切页面需要HTML、CSS、PhotoShop等技能，PS用来测量、获取图标，HTML用来完成页面骨架，CSS用来绘制页面的皮肤。其实图中少了Javascript，因为无论多简单的效果都需要JS的支持。

编程语言

对于前端来说最重要的编程语言就是HTML、CSS和JavaScript。目前很火热的VUE、Angular、React等都是JS的扩展框架；ES6是JS的下一代语言标准；TypeScript是JS的超集这些是目前来说对于JS比较火的概念。对于CSS来说老牌的BootStrap是其最著名的框架，CSS3是CSS的新一代标准，LESS和SASS是对于CSS的预处理语言，它们可以让写CSS有种写“程序”的感觉。H5是HTML的下一代标准，也是对于HTML最火的概念。
前端的发展越来越面向对象，新的框架、标准引入了很多后端的理念（类、泛型等等），图中显示的NodeJS是在服务端运行的JavaScript。

测试工具

截止目前，个人觉得最好的调试工具就是浏览器的控制台。上图中罗列到的工具使用过Firebug（一个火狐浏览器的扩展程序，目前已经停止更新，已经被Firefox 内置工具 devtools替代）和IETester（用来模拟低版本IE浏览器兼容问题的软件），其他罗列的调试工具由于没有用到过这里也不做介绍

开发工具

无论是前端还是后端，很多的开发工具都是通用的。Notepad++、Ecplise、IntelliJ IDEA这些后端常用的工具都能用来开发前端。对于前端来说，现在流行的开发工具有：轻量的sublime Text、功能强大的webStrom、写代码和弹钢琴一样的Atom、微软的Visual Studio等等（还有很多没用过的编辑工具就不在这里介绍了）。电脑好的推荐使用webStrom，电脑一般的使用其他三个都可以。。

前端标准/规范

在上文中已经提到了前端规范有ES6、HTML5和CSS3都是前端最新的标准，W3C提供了前端的HTML/XHTML、 CSS、XML、DOM、BOM等标准。单独把DOM和BOM附上介绍链接是因为它们两与ECMASCRIPT共同组成了JS。
Commonjs是为了前端缺少模块化的概念而应运而生的，它希望js可以在任何地方运行，不只是浏览器中；AMD规范也是为javascript模块化加载而生的。
HTTP标准这里就不多做介绍了。

性能

性能这块了解的不是很多，只用过HttpWatch抓过包，可能是因为目前做的系统并发量并不高，代码里没有死循环或者堆栈溢出就能满足需求了，这里就不多做介绍了。

编程知识储备

上文中说过，现在前端框架发展借鉴了越来越多的后端技术，越来越面向对象，图中的设计模式与编程模式等由于本人水平也无法很清楚的解释，这里就不多做介绍了。

浏览器兼容性

浏览器兼容性也是一个困扰前端工程师的问题，所谓兼容性问题大部分都是出在页面样式上，而出现问题最多的也是IE浏览器。这里有些段子都是调侃IE浏览器的。因为现在很多的机关单位电脑老旧，而他们又是我们主要服务的客户，那么调试浏览器兼容性也是一个必备的技能。对于低版本的IE浏览器可以用CSS的Hack来解决，对于其他浏览器有针对其内核的特殊写法。

前端框架/库

现在的前端框架/库如雨后春笋般欣欣向荣，上图中的大部分框架都是以前的老牌框架，现在也不是很推荐再去接触（除了jQuery）。现在比较火的框架已经在上文中提到了，VUE、Angular、React等，发展历程也从MVC模式发展到MVVM模式。。。

剩下的内容

上图中剩下的几大部分，我个人不能很好地介绍，这些东西如果有兴趣大家可以自己去查询一下。前端在这几年发展的十分迅速，很多程序员也想转行做前端，对于前端来说入门很简单，做到优秀却很难，前端是一个比较"细"的工种。上文是基于个人理解做出的一点解释，希望能有所帮助。