前端知识体系梳理

从native开发转到web开发到现在也将近一年了，零零散散的学习了很多东西，但是始终没有系统化的感知，最近这段时间刻意将知识进行了一遍梳理，以更好的理解前端世界。本篇文章不会去谈论某个技术点，而是从一个宏观的视角来看前端开发。尽量从我个人开发中遇到的一些问题和困惑进行阐述（如有错误欢迎指正）。 

一、web世界的基础 

众所周知，web世界有三大基石html、css、javascript,这三块构成了web世界，而每一部分的都要很多的知识积累才能运用的游刃有余。刚开始，单纯的来看这三个的每一部分都不会太复杂，感觉看一两天就可以入手写代码了，事实上对于初级入门的人来说，通过简单的html、css、js就能构造出一个美丽的界面，确实是这样，但是随着学习的加深，以及实践工程中遇到的问题，你会发现，仅仅掌握这些远远还不够。本篇文章将会就我学习开发中遇到的疑问进行阐述。

二、主流问题的理解

1、html5到底是干啥的？

为什么感觉和移动设备紧密关联？ html的前世今生网上都可以搜得到，简单概括html5到底改变了什么？ 大概总结下：html5具有更好的语义特性、本地存储特性、设备兼容特性、网页多媒体特性、css3特性等。 在我的初始概念里面html5貌似是和移动端紧密相关的，实时上不是这样的，他同样适用于PC端，他是web的新一代开发标准。只不过h5大大提升了对移动端的支持能力。现在有些桌面浏览器对html5的支持还不健全，有些新特性不见得能生效（现代浏览器支持度较高），而移动设备上（android、ios）的浏览器（或webview）大都是webkit内核，对html5的支持度较高，所以一般在移动设备上使用不会出太大的兼容性问题。

2、javascript的标准是什么？和ECMAScript有什么关系？ 

javascript刚开始是有Netscape公司开发出来的，命名是为了跟上java这股热风（但和java毫无关系）。随后微软进入了浏览器市场，由此催生了javascript的标准化，而这个标准名称就叫ECMAScript,从此javacript正式成为一门语言。实际上，javascript是ECMAScript的超集，可以认为是和typescript一样的存在。他们都实现了ECMAScript的标准。我们现在所说的标准规范都指ECMAScript规范，当前流行的最著名的就是ES5、ES6等标准。

三、为什么现在一个web工程如此“繁杂” 

前面说到，单纯的一个web页面，只需要html、css样式、js代码就可以完成，看起来简单明了，但是为什么现在很多前端应用代码看起来已经不单单是html、css、js（甚至连html、js的影子都看不到）？为什么看不到后端工程代码了？为什么代码中出现了一些看不懂的写法（我明明已经学会了html、css和js）？为什么现在前端工程还出现了一些类似于配置的文件（如常见的webpack.js、package.json、.bablerc等等）？为什么现在前端工程看起来变得越来越“繁杂”？这些都是为什么？

一句话，这些都是为了提升效率、便于工程维护管理、优化应用性能而产生的。 我不用这些东西可以吗？可以，但是你的项目会变得很难维护和管理，而且开发效率低下。

三、这些需求都是怎么产生的？

1、前后端分离 

早期web开发一般是存在于后端工程，前后端在一个工程里面，而且开发相互依赖制约，无法做到协同开发，为此前后端分离就此产生，前端拥有自己的项目工程，更多的关注视图展示、页面渲染这一层，有后端提供渲染所需数据接口等，二者通过网络（http...）进行交互，这样前端后端实现了解耦，可以只关注自己的业务逻辑，而不相互制约。所以很多工程已经是纯前端代码，后端只提供api数据接口即可。

2、模块化开发 

模块化故名思议是化整体为局部的意思，这样不仅方便编码，而且有利于系统职责划分，使得系统结构更加清晰，更便于维护。模块化的出现能更好的管理项目的依赖和版本，且可以控制依赖的加载顺序。模块化并不是任意的划分，而是要遵循一定的标准。前端由于各种各样的原因，模块化（js）标准出了很多个，其中最有名气的就是AMD、CMD、CommonJs、ES6+等模块化标准。所以现在看前端很多库代码都有不同的模块实现方式，这些都给开发人员带来了一定的繁琐性，比如不同规范模块需要采用不同的写法。这些规范的特性这里不累述，从目前来看，各个标准共存的现状还很多，但我认为ES6模块化标准将会逐渐替代其他标准。

3、优秀的框架 

原始的web应用开发，一般会采用直接操作dom等形式，这种开发不仅会使代码变的复杂和难以维护，同样性能消耗也得不到保证。为了解决这些问题，一系列优秀框架应运而生。如react、vue、angular2等。本人在开发中使用过react、vue等框架，确实不仅能大大提升开发效率，还能更好的优化性能。

4、新语言的出现 

1、ECScript6 es6是新一代javascript标识，引入了很多新的思想，如果模块规范化、class预发、箭头函数等等，这些东西出现大大提升了开发效率。 

2、TypeScript Microsoft开发的偏向静态的语言，他是javascript的一个超集，能让开发者拥有开发静态类型检查语言的体验，减少未知性。 

3、LESS等 这一类语言是一种CSS的预处理器，主要是解决了CSS的一些痛点，比如增加些变量支持、作用域支持等，除此之外，这些语言基本和CSS写法一致。

四、还缺点什么？ 

前面提到了前端发展过程中出现的各类技术，这些技术的出现大大提升了开发效率，方便了开发人员。但是福兮祸之所倚，事物都有两面性，这些技术的出现固然解决了很多痛点，但也引入了一些需要额外处理的糟点。

1、痛点 

首先，采用这些技术写的源代码都无法直接在浏览器中运行，浏览器只识别符合自己标准的代码。比如采用es6语法写的代码无法再直接浏览器中运行（不支持），所以这就需要额外的手段来对源代码进行转换，这就引出了打包构建工具:webpack、gulp、grunt等。

由上面的探讨可知，构建要做的工作就是为了解决这一类痛点。因此，一般的构建工具会完成以下工作： 

（1）代码转换：比如将TypeScript编译成JavaScript，将less编译成css等。 

（2）模块合并：前面提到现在都是模块化开发，所以构建工具需要将多个模块合并成一个文件，这样才构建出一个可以面向用户交互的完整页面。 

（3）压缩：主要是压缩js、css、html、图片等。 

（4)其他功能支持（如预发检查等等...） 上面提到的一些构建工具或多或少都能解决这些痛点。

2、webpack是什么，为什么使用的如此广泛？ 

因为当前前端开发基本都是采用模块化（+新技术+新框架）的开发模式，而webpack是专注于构建模块化的工具，可以提供一站式解决方案，使用的非常多。webpack的默认配置文件是项目根目录下的webpack.config.js,这里会配置如何构建的描述说明，最后会按照commonjs规范（因为webpack构建是运行在node.js环境下）导出该描述对象。真对上文新技术语法，在webpack.config.js配置相关的loader即可，这些loader会对其进行转换，以运行于浏览器中。webpack的内容很多，这里不是想讨论如何使用，而是想表明它出现并繁荣的原因。

3、npm是什么

web开发中，通常所有的模块都是以包的形式存在的，而这些包是通过npm进行管理的。这里就引出了javascript世界中最有名的包管理工具-npm，npm具体能做什么有很多资料可查，简单总结就是管理各种依赖，前面说现在前端开发基本是模块化开发，而这些模块一般会以npm包的形式存在，类似于maven、gradle的概念。前端工程一般都包含一个名字为package.json的配置文件，这里会展示出项目所以来的包。 比如想使用webpack进行项目构建，就可以通过npm进行包安装，然后即可使用。

五、总结

任何一个领域要走的路都很长，从了解到熟练运用还只算入门，前端还有很一些高级特性如js原型链、新生代的一些编程思想、虚拟dom等，还有编译、执行以及渲染引擎原理过程也需要了解，继续向前~