JavaScript 编码原则1 | 青训营笔记

40 阅读2分钟

这是我参与「第五届青训营」伴学笔记创作活动的第3天

一、本节课重点内容

本节课站在实践维度的角度出发,共同探讨在实际编码过程中,何种类型的 JavaScript 代码能够被称之为“好代码”。

同时,本次课程从 JS 出发,总结其他语言编码可遵循的共性原则,由浅入深,该小节将集中讲解三大原则之一的“各司其职”原则。

二、详细知识点介绍

image.png

写好JS的一些原则:

  1. 各司其职:职能分离
  2. 组件封装:正确性、扩展性、复用性
  3. 过程抽象:函数式编程

案例:白天/夜晚模式主题切换

image.png 这一段代码中,CSS与JS并未做到代码分离,这就导致我们如果进行改动,两类代码的混搭,可能会导致我们无法非常直观的从代码中看出代码原本的功能表意,给需求的修改带来不便。

image.png 这样的实现更加简洁易懂。

image.png 这个版本的昼夜主题切换会更加的简洁直观,利用html+CSS进行设计的代码段。 这里我们用了CheckBox,此时label的效果与其一样,点击label的图标也会起到一个切换页面主题的效果。

项目总结: image.png 所以,我们需要在代码段中尽量的减少JS的使用(但我们不强求直接过滤掉JS),我们在未来实现JS代码功能的时候,应该多思考这些原则,看看自己的代码中能不能使用这些原则,我们可以依照这些原则来检查自己的代码写的是否是足够的好,是否还有一些改进的空间。

三、总结

本次课程中,我学到了什么是JS中“好代码”的评判标准,对JS的三大编码原则之一——各司其职做了了解。 我们应该从代码的本身的特性出发,利用这些特性对需求进行编码实现,而如何利用不同的代码,可以使得我们的开发变得简单,也成为了我们应该学习、思考的重中之重。