前端技术总结（前端技术地图）

了解到的前端新技术总结

在最近的一个月内，快速的了解一下。

不要求都精通（不可能），但要全部了解一下。

然后找其中一个深入学习一下。

本文对整个前端包括node端涉及到的技术进行一个梳理，对各个知识点进行准确定位。 

 

 

一、前端模块化

随着前端需求复杂度不断增加，一个公司内的前端开发人员也迅速增加，前端需要和后端开发一样的模块化支持，来方便的引用外部的开源的js代码，团队之间的配合。因此前端模块化悄然滋生，无奈js天生不健全，不支持继承，不支持接口，没有类的概念。所以需要通过function模拟实现。而这种实现方案也是百家争鸣，现在总算有了比较统一的标准规范了。

（es6中，这些都不是问题了）

commonJS模块规范

cmd和amd

require.js sea.js

nodejs中的模块化方案

 

二、前端工程化

前端需求复杂了，前端这个工程也是一个大工程了。但很多前端的重复性的工作还需要人来手动完成，比如压缩合并js、css，编译sass、less，合并精灵图等，现在利用nodejs这个平台的js可以操作文件，一系列的前端构建工具也在npm平台应运而生。

已归类：

构建工具

grunt 

gulp

……

前端模块化管理工具（包管理工具）

bower

npm 现在定位是JavaScript模块管理工具（包管理工具）。开始主要针对node.js平台，现在越来越多开发者把它用于前端。

……

淘宝前端模块化管理工具 spm

前端工具包（工具集 utilities）：

webpack

fis（百度前端管理工具、方案）

未归类：

phantomjs

browserify 功能：编译js。开发者像写node.js代码一样写前端代码，然后用它编译和合并文件。

 

 

三、前端框架

前端框架是包括css js iconfont等的一整套前端开发方案，他可以用来快速的开发前端项目。

传统的前端框架，比如YUI，比如Bootstrap。不多做介绍。

这里不得不说道，js模板引擎（了解更多）

MVVM前端框架

react

angular 2.0

vue

 

四、nodejs

一个用js开发网站的后端平台

npm 

package.json

nodejs api