跟着月影老师学JavaScript | 青训营笔记

97 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第三天

今天听月影老师讲JavaScript,受益匪浅,主要侧重于编程思想以及如何优雅的写代码,这里简单记录一下。

怎么写好Javascript?

首先推荐基本前端工程师必备书籍:犀牛书,蝴蝶书和红宝书,具体名字不打了,搜一下都有。不习惯纸质书籍的我也推荐看一下阮一峰老师的电子书,能更加深入了解JavaScript。

写好JS的一些原则

  • 各司其职

比如:html、css、js职能分离。各自负责各自的事,尽量不要混写,降低耦合度。

  • 组件封装

一些常用的组件,比如轮播图,导航栏,下拉框等,我们可以自己封装一个,自己造轮子,需要的时候拿来用即可,要着重于可拓展性,复用性,正确性。

  • 过程抽象

前端的趋势越来越偏向于函数式编程,在Coding时,我们不仅要对处理的过程进行抽象,也要对数据类型等进行抽象,避免写屎山代码。

各司其职

举个🌰

为了提高用户体验,很多网页都有白天和夜间两种模式。如果让我们来实现的话,怎么写?

相信很多人尤其是初学者都会写出以上代码,用js绑定点击事件,根据元素的内容,改变背景颜色。 这当然可以实现功能,不过并不优雅,违背了各司其职的原则。

更多人会写出第二版的代码,包括我。使用js为元素动态的添加类名,通过类名的切换控制样式。这使得html、css、javascript各司其职,互相解耦。

使用css的伪类就可以用纯css来控制样式了,甚至不需要一行js代码。因此此版本应该是最优解

总结

  • HTML/CSS/JS 各司其责
  • 应当避免不必要的由 JS 直接操作样式
  • 可以用 class 来表示状态
  • 纯展示类交互寻求零 JS 方案