学习计划
html5
认识 HTML5 语义化的意义.
熟悉 HTML5 新特性
了解如何快速的加载 HTML 页面, 以及完善用户体验如: 阅读模式, 无障碍设置,
了解 Canvas,Svg
CSS3
熟悉 css3 新特性, 如: transform,transtion 等等.
了解 CSS 重绘是什么?
熟悉 CSS 绘制顺序, CSS 在绘制的过程中也是有顺序的, 熟悉 CSS 绘制顺序, CSS 会优先绘制元素的定位, 大小然后才是其他的修饰, 包括颜色, 透明度等等, 所以在 CSS 的编写顺序以位置, 大小优先.
熟悉 Sass,Less(CSS 扩展语法), 项目越大 CSS 也就越难维护, 而 Sass,Less 的出现就是为了解决这种问题, 当然还有其他的方案例如: CSS-in-JS, 组件化 CSS 等等
熟悉 CSS 的优先级, 并了解什么是硬件加速.
JS
熟悉 JS 的基础语法
熟悉 JS 和客户端的交互, 例如 DOM 操作, 节点的操作, Ajax 请求等等
JS 是弱对象语言, 那么 JS 中如何实现一个类? 请学习原型构造函数, 并理解原型链的作用.
熟悉 TypeScript 语言, TypeScript 是一个 JS 的超集, 它的出现让 JS 更加的像一门面向对象语言, TypeScript 支持动态类型, 兼容 ES6 以及其他的原生语法.
了解 polyfills 和 bable. 在前端加速发展的进程中他们充当了很重要的角色, 目前 JS 版本草案已经到了 ES8, 目前主流是 ES6, 但是目前主流浏览器大多全面兼容 Es5, 那么在使用高级语法的同时, 你得需要向下兼容, 这就是它们存在的意义.
了解模块化规范 (CommonJS,AMD), 了解它们带来的作用.
了解 webPack 等打包工具, 打包工具的出现让前端项目的开发趋向于自动化, 工程化. 包括文件大小的压缩, CSS 自动前缀的处理等等.
了解 JsLint,EsLint,TsLint 代码规范检查工具
Angular(JS MVVM 框架)
Angular 的基础语言采用 TypeScipt,TypeScript 得益于静态类型的检查以及强类型特性, 在开发过程中可以加强相互协作, 大大的减少代码错误, 目前已经逐渐成为了趋势.
Angular 的底层嵌入了了 Rxjs, 什么是 Rxjs? RxJS 是使用 Observables 的响应式编程的库.
响应式编程是一种面向数据流和变化传播的编程范式. 这意味着可以在编程语言中很方便地表达静态或动态的数据流, 而相关的计算模型会自动将变化的值通过数据流进行传播.
响应式编程可以加深你代码抽象的程度, 让你可以更专注于定义与事件相互依赖的业务逻辑, 而不是把大量精力放在实现细节上, 同时, 使用响应式编程还能让你的代码变得更加简洁.
熟悉 Angular 的语法.
熟悉 Angular 路由机制.
熟悉组件交互, 熟悉表单操作.
熟悉 Rxjs, 理解响应式编程思想
在根据官方文档学习的时候请优先理解它的思想.
请着重理解 DI(依赖注入)
了解什么是组件化? 什么是模块化?
以上理解之后请了解 Zone.JS, 它为 Angular 做了些什么事情?
了解什么是自定义组件.
了解什么是影子 DOM.
熟悉 HTML5 history, 并参照 Angular 路由, 并思考 Angular 的路由实现的机制.
去了解 Angular 如何优化性能的方案.
代码规范
HTML,CSS 规范请参照: https://codeguide.bootcss.com/
JS 代码规范请参照: https://google.github.io/styleguide/jsguide.html
TypeScript 规范请参照 Tslint 规范, Angular 内置了一套
Angular 代码风格请参照 https://angular.io/guide/styleguide
来源: http://www.bubuko.com/infodetail-3280635.html