前端知识体系总结

 

前端技术栈

• 前端基础
  
  
  以上是前端的基本功，一些HTML5的新特性，新API还有CSS3的一些新特性，以及ES6的新语法也是比较热门的，都有涉及。

• 框架或库
    
  
  
  这是前端常用到的库和框架，包括：

1. jQuery
2. bootstrap
3. requireJs
4. echarts
5. vue
6. angularJs
7. ionic
8. react
9. ant-design
10. easyui

• 一些工具

目前用的最多的工具主要时npm模块管理工具，gulp、grunt、webpack等自动化或者模块管理工具。

---

前端的其他方面

• 性能与安全

1. 从浏览器渲染角度考虑性能（并发下载，阻塞等等）
2. 从js执行效率考虑性能
   1.避免内存泄漏
   2.避免意外全局变量
   3.避免蛮力算法
   4.减少dom操作
3. 考虑跨站点脚本攻击和跨站点伪造（不要相信任何用户输入）

• 前端延伸

1. 借助v8引擎通过nodejs向服务端延伸
2. 向桌面应用延伸

项目	1	2	3	4	5	6	7
前端基础	html5	css3	javascript	ES6
前端框架与库	jquery	bootstrap	vue	angularjs	ionic	requirejs	react
前端工具	webpack	grunt	gulp	less	sass
前端其他	性能	安全	兼容	nodejs	计算机网络

表一：前端知识库

---

前端基础–html5

html5前两年非常火，h5的主要改变有下面几点：

• 新增了一些结构元素，例如header，section，footer等等
• 新增了一些属性，例如contentEditable
• 新增一些表单类型，number，url等
• 废除了一些不那么常用或者可以通过css实现的元素
• 新增了一些好用的接口
• 与存储相关的localStroage、sessionStroage、indexedDB
• 与文件访问相关的FileSystem相关的接口
• cache接口
• canvas
• video、audio
• websocket
• webworker
• 还有新增了一些事件

更多请参考：w3school

---

前端基础–css3

不得不说css3真的很棒，尤其是他的动画，但是学好也是很难的。css3涉及的东西如下：

• 选择器的扩展
• 一些样式，例如背景、文字、边框等等
• 一些布局相关的东西，例如flex，column等等
• 一些变形，transform
• 过度效果,transition
• 基于关键帧的动画，animation

更多请参考：w3school

---

前端新知–ES6

ES6看上去怪怪的，不过挺好玩的，我比较喜欢他的函数参数默认值，模块管理，还有promise。参考阮一峰老师的那本书，ES6的要点如下：

• let 和 const 关键字
• 变量的解构赋值
• 字符串的扩展
• 正则的扩展
• 数值的扩展
• 函数的扩展
• 数组的扩展
• 对象的扩展
• Symbol
• Set 和 Map 数据结构
• Proxy
• Reflect
• Promise 对象
• Iterator 和 for…of 循环
• Generator 函数的语法
• Generator 函数的异步应用
• async 函数
• Class 的基本语法
• Class 的继承
• Decorator
• Module 的语法
• Module 的加载实现

给一段ES6的代码（是不是很怪，ps：练习代码块编写）

function bar(func = () => foo) {
  let foo = 'inner';
  console.log(func());
}

bar() // ReferenceError: foo is not defined

更多请参考：ES6标准入门

---

前端框架或库–jquery

所有学前端的不可能不知道jquery，个人认为jquery有如下特点：

• 强大的选择器，当然现在通过h5的api也可以实现
• 好用的方法
• 良好的兼容性
• 动画的支持
• 丰富的插件

更多请参考：jqury文档

---

前端框架或库–bootstrap

有了bootstrap，写几个class就可以做一个漂亮的响应式页面，而且还可以用他的相当好用的js插件。very 弯的four！

更多请参考：bootstrap中文文档

---

前端框架或库–vue

国内大神尤雨溪经典作品，让我们向这位大神致敬。这款框架非常容易学容易用。她有非常丰富的组件可用，跟angular1长得很像，非常棒！还有一点需要再次强调，国产精品！

更多请参考：vue中文文档

---

前端框架或库–angular

你走开！angular4！我已经认不得你了。他采用了typescript，具体我也不太了解。后面学习了在更几篇文章。

参考：教程

---

前端框架或库–ionic

这个我就更不熟了，据说是混合式应用必备利器。我要去学习了！不要拦我！

参考：教程

---

前端框架或库–echarts

Echarts很牛逼哦！小弟也是刚学的，通过几个简单的配置就可以画出各种图表了，nice！妈妈再也不用担心我不会画图了。

参考：官网

---

前端框架或库–requirejs

这是一个遵循AMD规范的模块管理库，我不是特熟，我是用的webpack，可以用es6的import export

参考：官网

---

前端工具简介

工具是干嘛的，帮我们偷懒的。

• grunt是一个任务执行器
• gulp是一个流式的任务执行器
• webpack是一个模块打包工具

个人用的比较多的是webpack。具体可以到各自的官网学习。webpack有个中文版的，文档很好懂。