JavaScript学习

摘要：由浅入深讲解其三大原则。

一、JavaScript 编码原则之各司其责

1. JavaScript 好代码的标准

讲课老师月影向我们推荐了，“犀牛”书和“红宝石”书，作为学习javascript的标准书籍。 其中有以下几点可以作为好代码的标准

• 可读性：代码应该易于理解和阅读，使用有意义的变量名和函数名，并添加必要的注释。

• 可维护性：代码应该易于修改和扩展，遵循一定的代码风格和规范，减少重复代码。

• 性能和效率：代码应该具有高效的执行速度，并且不浪费系统资源。

• 可测试性：代码应该容易进行单元测试，以保证其功能和质量。

2. HTML/CSS/JS 各司其责

深刻食堂

写一段js，控制一个网页，让它支持浅色和深色两种浏览模式。如果是你来实现，你会怎么做？

版本一 采用Javascript进行处理，进行页面黑白模式的切换。

版本二 引入classname属性进行处理。

版本三 完全借助css性质进行变换。

深夜食堂结论

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

借助一个“深夜食堂”的案例进行分析。从完全的采用javascript进行页面模式切换，到引入一个classname，最后完全的利用css的知识框架进行处理，还是体现了这节课宗旨，各司其职，可以说认识到了不同的处理方法。

二、JavaScript 编码原则之组件封装

结构html

轮播图是一个典型的列表结构，我们可以使⽤无序列表<ul>元素来实现

表现css

• 使用 CSS 绝对定位将图片重叠在同一个位置
• 轮播图切换的状态使用修饰符（modifier）这里是 --checked
• 轮播图的切换动画使用 CSS transition

行为js

API 设计应保证原子操作，职责单一，满足灵活性。

好的UI组件应具备以下特征。

正确性指组件能够按照预期工作，并且不会产生错误。扩展性指组件可以方便地根据需求进行扩展和定制。复用性指组件可以在不同的项目中被重复使用，提高开发效率。

三、JavaScript 编码原则之过程抽象

在编写JavaScript代码时，应用函数式编程思想进行过程抽象，将复杂的过程分解成可复用的函数。 过程抽象：用来处理局部细节控制的⼀些⽅法，是函数式编程思想的基础应用

限制操作

下面进行具体案例分析，如勾选任务后，任务慢慢消失。

之后会出现多次点击button无法响应的问题，会报错，这时我们需要采用once一次性执行函数来应对。

总结： JavaScript编码原则涵盖了各司其责、组件封装和过程抽象等三个方面。

遵循这些原则可以提高代码的可读性、可维护性和复用性，有利于我们设计出优质的前端页面。通过合理的职责分工、良好的组件封装和编程思想的灵活运用，我们能够编写出结构清晰、扩展方便、易于理解和便于维护的JavaScript代码。

星辰大海，你我同行。