# <center>前端知识体系介绍</center>

> 拿到第一张工作牌，第一次参加公司培训，感觉很奇妙。很久没写文章了，今天给各位园友分享一下我入职远光大约三周的体会。（ps：因为这是一个练习markdown语法的作业，逻辑性不强，随便写的:smile:）

## 随便说说:smile:
我是6月份投的简历，岗位是前端开发岗，属于公司的大数据事业部，感觉面试表现不是太好，当时面试官问我关于session和cookie的问题，答的不好，然后面试官很耐心讲了一遍（感谢殷工）。后来收到邮件说面试通过了（可能公司对应届生要求不是太高），非常高兴，远光软件还是不错的，主要是做电力公司管理软件的（财务管理，燃料管理之类的），主要客户时国家电网、南方电网，很牛比:+1::+1::+1:，有木有。

7.6号提前一天入职了，因为7、8、9去北京参加爱奇艺的比赛了（尴尬:grimacing:，第一天就请假，错过了与小伙伴们玩游戏的机会，可气的是没得奖）。入职第一天，办理了入职手续，然后领了电脑，安排了工位，然后就是装软件装了一天。（感谢亚婷姐为我们跑前跑后，感谢蔡工的指导。:heart::heart::heart:）

这一天的体会是公司的安全工作好严格啊（不知道其他公司是不是也是这样）。没法访问外网，文件是加密的，要登录一个什么客户端才能解密。没法访问外网还是很头疼的，虽然公司共享里边有一些必要的软件，但是有的自己喜欢的ide还是没法装。后来殷工说访问外网是需要写申请书的。

后来到公司就是参加培训了，首先是做的公司产品、管理规范、项目管理工具方面的介绍，说实话，不太能听懂。然后就是一个为期一个多星期的前端技能的培训（今天下午有测试），讲的比较粗，大致上把前端的一些东西拉了一遍。这个时今天分享的重点。

***
## 前端技术栈
- 前端基础
<img src='https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=9ca773455cdf8db1a8237436684ab631/728da9773912b31b7096bff48418367adbb4e171.jpg' width='120' height='120'/><img src='https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=1687a3c9b919ebc4d4757ecbe34fa499/6f061d950a7b02081442a34d68d9f2d3562cc897.jpg' width='120' height='120' /><img src='http://static.open-open.com/lib/uploadImg/20161202/20161202101627_814.png' width='120' height='120'/><br>
以上是前端的基本功，一些**HTML5**的新特性，新API还有**CSS3**的一些新特性，以及**ES6**的新语法也是比较热门的，培训中都有涉及。

- 框架或库
<img src='https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=c9ae9db23101213fdb3e468e358e5db4/9f510fb30f2442a79d8d54ced943ad4bd01302dd.jpg' width='120' height='120'/> <img src='https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268/sign=6fba1ba9422309f7e76faa144a0f0c39/3bf33a87e950352ae6ac2b355743fbf2b2118b39.jpg' width='120' height='120'/> <img src='https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268/sign=489963227acf3bc7e800caeae901babd/962bd40735fae6cd5419344e05b30f2442a70f6b.jpg' width='120' height='120'/><img src='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2524609110,4268038865&fm=117&gp=0.jpg' width='120' height='120'/><img src='https://cn.vuejs.org/images/logo.png' width='120' height='120'/><img src='http://www.runoob.com/wp-content/uploads/2014/06/angular.jpg' width='120' height='120'/><img src='https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=aa5afe6a2d34349b600b66d7a8837eab/c8177f3e6709c93dffb811879a3df8dcd1005473.jpg' width='140' height='120'/>
<br>
这是前端常用到的库和框架，包括：
1. jQuery
2. bootstrap
3. requireJs
4. echarts
5. vue
6. angularJs
7. ionic

- ### 一些工具
目前用的最多的工具主要时npm模块管理工具，gulp、grunt、webpack等自动化或者模块管理工具。培训主要讲的时webpack。上几个图。
<img src='http://www.css88.com/doc/webpack2/img/webpack.svg' width='120' height='120'/><img src='http://www.th7.cn/d/file/p/2016/01/25/73ae162cccc158f0bd8e842d336b2621.jpg' width='120' height='120'/><img src='http://static.oschina.net/uploads/img/201408/15172128_PKgT.png' width='120' height='120'/><img src='http://s4.51cto.com/wyfs02/M00/6E/33/wKioL1V2hOCzXaVUAABAjONw8Bg102.jpg-wh_651x-s_181564188.jpg' width='120' height='120'/>
****
## 前端的其他方面
- ### 性能与安全
1. 从浏览器渲染角度考虑性能（并发下载，阻塞等等）
2. 从js执行效率考虑性能
1.避免内存泄漏
2.避免意外全局变量
3.避免蛮力算法
4.减少dom操作
3. 考虑跨站点脚本攻击和跨站点伪造（不要相信任何用户输入）
- ### 前端延伸
1. 借助v8引擎通过nodejs向服务端延伸
2. 向桌面应用延伸

> 以上就是前端方面的知识体系，两周左右的培训将这些东西基本点到了。为了练习一下markdown语法，大～熊先做一个表格总结一下前端知识体系，然后简要介绍一些东西。

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

**<center> 表一：前端知识库</center>**
***
# 前端基础--html5
html5前两年非常火，h5的主要改变有下面几点：
- 新增了一些结构元素，例如header，section，footer等等
- 新增了一些属性，例如contentEditable
- 新增一些表单类型，number，url等
- 废除了一些不那么常用或者可以通过css实现的元素
- 新增了一些好用的接口
- 与存储相关的localStroage、sessionStroage、indexedDB
- 与文件访问相关的FileSystem相关的接口
- cache接口
- canvas
- video、audio
- websocket
- webworker
- 还有新增了一些事件

> 更多请参考：[w3school]('http://www.w3school.com.cn/html5/')

***
# 前端基础--css3
不得不说css3真的很棒，尤其是他的动画，但是学好也是很难的。css3涉及的东西如下：
* 选择器的扩展
* 一些样式，例如背景、文字、边框等等
* 一些布局相关的东西，例如flex，column等等
* 一些变形，transform
* 过度效果,transition
* 基于关键帧的动画，animation

> 更多请参考：[w3school]('http://www.w3school.com.cn/css3/')

***
# 前端新知--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标准入门]('http://es6.ruanyifeng.com/')

***
# 前端框架或库--jquery
所有学前端的不可能不知道jquery，个人认为jquery有如下特点：
- 强大的选择器，当然现在通过h5的api也可以实现
- 好用的方法
- 良好的兼容性
- 动画的支持
- 丰富的插件

> 更多请参考：[jqury文档]('http://api.jquery.com/')

***
# 前端框架或库--bootstrap
有了bootstrap，写几个class就可以做一个漂亮的响应式页面，而且还可以用他的相当好用的js插件。very 弯的four！:clap::clap::clap:

> 更多请参考：[bootstrap中文文档]('http://v3.bootcss.com/')

***
# 前端框架或库--vue
国内大神尤雨溪经典作品，让我们向这位大神致敬。这款框架非常容易学容易用，本人10分钟就会用了（此处运用了夸张手法）。她有非常丰富的组件可用（请注意我的用词：她），跟angular1长得很像，非常棒！还有一点需要再次强调，国产精品！:clap:

> 更多请参考：[vue中文文档]('https://cn.vuejs.org/v2/guide/')

***
# 前端框架或库--angular
你走开！angular4！我已经认不得你了。他采用了typescript，具体我也不太了解。后面学习了在更几篇文章。

> 参考：[官网]('https://angularjs.org/')

***
# 前端框架或库--ionic
这个我就更不熟了，据说是混合式应用必备利器。我要去学习了！不要拦我！
> 参考：[官网]('http://ionicframework.com/docs/')

***
# 前端框架或库--echarts
Echarts很牛逼哦！小弟也是刚学的，通过几个简单的配置就可以画出各种图表了，nice！妈妈再也不用担心我不会画图了。
> 参考：[官网]('http://echarts.baidu.com/')

***
# 前端框架或库--requirejs
这是一个遵循AMD规范的模块管理库，我不是特熟，我是用的webpack，可以用es6的import export

> 参考：[官网]('http://requirejs.org/docs/')
***

# 前端工具简介
> 工具是干嘛的，帮我们偷懒的。

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

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

# 总结一下咯
上面就是这几天培训所讲的核心内容的整理，只是点到而已，如果你想详细学习的话去官网看文章就好了，也可以看一些写的比较好的博客。如果你有什么新的知识要补充，或者法现文章中的任何问题请留言给我。最后要是你觉得大熊的文章写的不错，欢迎关注我，还差两个粉丝就有40个粉丝了！！！

> 芳学姐，我用的morkdown语法不多，但是还是请给个满分！因为学姐最美了！心地最最善良了！