web前端学习方案

学习计划

HTML5

1. 认识HTML5语义化的意义。
2. 熟悉HTML5新特性
3. 了解如何快速的加载HTML页面，以及完善用户体验如：阅读模式、无障碍设置，
4. 了解Canvas、Svg

CSS3

1. 熟悉css3新特性，如：transform、transtion等等。
2. 了解Css重绘是什么？
3. 熟悉Css绘制顺序，Css在绘制的过程中也是有顺序的，熟悉Css绘制顺序，CSS会优先绘制元素的定位、大小然后才是其他的修饰，包括颜色、透明度等等，所以在css的编写顺序以位置、大小优先。
4. 熟悉Sass、Less（css扩展语法），项目越大Css也就越难维护，而Sass、Less的出现就是为了解决这种问题，当然还有其他的方案例如：css-in-js，组件化css等等
5. 熟悉Css的优先级，并了解什么是硬件加速。

JS

1. 熟悉JS的基础语法
2. 熟悉JS和客户端的交互，例如DOM操作，节点的操作，ajax请求等等
3. JS是弱对象语言，那么JS中如何实现一个类？请学习原型构造函数，并理解原型链的作用。
4. 熟悉TypeScript语言，TypeScript是一个JS的超集，它的出现让JS更加的像一门面向对象语言，TypeScript支持动态类型，兼容ES6以及其他的原生语法。
5. 了解polyfills和bable。在前端加速发展的进程中他们充当了很重要的角色，目前JS版本草案已经到了ES8，目前主流是ES6，但是目前主流浏览器大多全面兼容Es5，那么在使用高级语法的同时，你得需要向下兼容，这就是它们存在的意义。
6. 了解模块化规范（CommonJS、AMD），了解它们带来的作用。
7. 了解webPack等打包工具，打包工具的出现让前端项目的开发趋向于自动化、工程化。包括文件大小的压缩，Css自动前缀的处理等等。
8. 了解JsLint、EsLint、TsLint 代码规范检查工具

Angular(Js MVVM框架)

Angular的基础语言采用TypeScipt，TypeScript得益于静态类型的检查以及强类型特性，在开发过程中可以加强相互协作，大大的减少代码错误，目前已经逐渐成为了趋势。

Angular的底层嵌入了了Rxjs，什么是Rxjs? RxJS 是使用 Observables 的响应式编程的库。

响应式编程是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。

响应式编程可以加深你代码抽象的程度，让你可以更专注于定义与事件相互依赖的业务逻辑，而不是把大量精力放在实现细节上，同时，使用响应式编程还能让你的代码变得更加简洁。

1. 熟悉Angular的语法。
2. 熟悉Angular路由机制。
3. 熟悉组件交互，熟悉表单操作。
4. 熟悉Rxjs，理解响应式编程思想
5. 在根据官方文档学习的时候请优先理解它的思想。
6. 请着重理解DI(依赖注入)
7. 了解什么是组件化？什么是模块化？
8. 以上理解之后请了解Zone.js，它为Angular做了些什么事情？
9. 了解什么是自定义组件。
10. 了解什么是影子DOM。
11. 熟悉HTML5 history，并参照Angular路由，并思考Angular的路由实现的机制。
12. 去了解Angular如何优化性能的方案。

代码规范

1. HTML、Css规范请参照：https://codeguide.bootcss.com/
2. JS代码规范请参照：https://google.github.io/styl...
3. TypeScript 规范请参照Tslint规范，Angular内置了一套
4. Angular 代码风格请参照 https://angular.io/guide/styl...