学JS的难点

774 阅读3分钟

关于学习JS的难点,我整理了三个大类:

  1. 语言的进化
  2. 与浏览器、用户交互相关的技巧
  3. 语言的部分特性

语言的进化

新版本会带来新特性,这是令人兴奋的事情。然而也带来了学习的难点。主要有两个:

  1. 除了规范里确定的需要去学习,社区贡献的一些优秀特性也需要学习。 比如说:已经写入ES6规范Promise对象,在ES6前,经常成为面试题。

  2. 这是专门针对JS的,新的规范确立了,但是各厂商的浏览器却没法同步跟上。 有了Babel的支持,我们就可以忽略浏览器支持程度的差距,愉快的写ES6了。 如果只会用Babel,不了解其原理,遇到了某些bug可能无法处理。 Babel的原理又分成两个部分:

  • 一是Babel本身的工作原理。为了使ES6代码可以在ES5的环境下运行,Babel会将ES6语法转换成ES5,对于ES5不支持的功能,还需要打上用ES5来实现的补丁。
  • 二是ES5补丁又是如何实现的呢?

因此又增加了学习的内容。

与浏览器、用户交互相关的技巧

如同后端操作数据库,前端控制浏览器和用户交互也要考虑到效率和性能。同时还需要关心用户体验。这些内容的难点不在实现功能的本身,而是对浏览器工作原理和用户交互的理解上。

  1. 当用户打开页面时,如果同时加载整页内容,可能需要很长时间,于是:
  • 用户打开的瞬间只会看到第一屏。所以有了分屏加载。
  • 用户看完首屏后可能直接退出了,加载所有内容会浪费资源,所以有了滚动触发加载。
  • 图片通常需要更多下载时间,所以有了图片懒加载(同滚动触发加载)。
  • 用户从某个页面跳入下一个页面的概率很大,前端可以对下一页的内容进行预加载。
  • 刷微博的时候第一屏看到的是小的预览图,用户点进去了才会加载原始尺寸的大图。 前端关于网页加载的所做的工作还有很多很多,后面单开一篇写优化相关。
  1. 用户的一些操作,例如移动鼠标、滚动屏幕、输入文字通常是连续的,但是交互的响应却不一定需要连续。所以有了:
  • 防抖函数
  • 节流函数
  1. 用户操作带来界面的响应,我们希望界面响应的过程是流畅的,就需要用到过渡效果或者动画

  2. 数据的改变引起界面的变化,需要频繁的,或者批量的去操作DOM节点。于是就有了JQuery库,后又有了MVC框架,后又有了MVVM框架,有了MVVM框架,又有了Redux来管理状态。

语言的部分特性

  • JS是弱类型语言,而在实际应用中不可避免的需要用到判断类型。因此JS判断类型也会成为面试题。有了TypeScript,可以标注类型了。
  • ES6之前,JS还没有类,不能像其它的面向对象语言一样方便的使用类和继承。因此,如何实现类的继承也会成为面试题。

小结

短路想不出了,想到再补充~ 本篇的内容理解对入门者有点偏难,不过取法乎中,仅得其下,先了解一下后面的学习内容,对目前的理解也是有帮助的。可以从用户交互开始慢慢理解。