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…
    原文作者:迎竹
    原文地址: https://segmentfault.com/a/1190000016732048
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞