JavaScript 编码原则

一、各司其职

HTML/CSS/JS各司其职

应当避免不必要的由JS直接操作样式

可以通用class来表示状态

纯展示类交互寻求零JS方案

个人见解：我认为组件化和模块化是Javascript各司其职最大的表现。使用模块系统（如ES6的import和export）将代码分割成小的、可独立管理的模块。每个模块可以专注于特定的功能，并与其他模块进行交互。使用组件库（如React、Vue、Angular）创建可复用的UI组件。每个组件负责自己的UI渲染和逻辑，从而实现"各司其职"的原则。这样我们可以使代码更易于理解维护和扩展，每个部分都有明确的责任。

二、组件封装

轮播图案例

结构：HTML

表现：CSS

行为：JS

行为API
控制流

组件封装

插件化

对象封装

个人见解:使用对象字面量或构造函数创建一个对象，将相关属性和方法组织在一起。这可以用于创建可配置和可重用的对象。

类封装

个人见解:使用ES6引入的类和面向对象编程思想，将相关属性和方法封装在一个类中。这样的类可以实例化，每个实例都可以具有自己的状态和行为。

组件库

创建一个包含多个组件的库，每个组件都具有特定的功能和样式。流行的JavaScript框架和库（如React、Vue、Angular）就提供了这样的组件封装机制，允许开发人员构建复杂的用户界面。

三、过程抽象

JavaScript中的过程抽象是指将一系列操作或功能封装成一个可复用的、高层次的函数或过程，以便在代码中以更简洁的方式执行这些操作。

有助于减少重复代码
提高代码的可读性和可维护性
同时还可以降低出错的风险

例子：

假设在多个地方需要计算两个数的平均值。可以使用过程抽象来创建一个函数来计算平均值，然后在需要的地方调用这个函数，而不是每次都编写相同的平均值计算代码。

// 过程抽象前
let num1 = 10;
let num2 = 20;
let average = (num1 + num2) / 2;
console.log(average);

// 过程抽象后
function calculateAverage(a, b) {
  return (a + b) / 2;
}

let num1 = 10;
let num2 = 20;
let average = calculateAverage(num1, num2);
console.log(average);

四、课程小结

学习JavaScript的编码原则是我如何利用JavaScript来产出高质量的代码，重复代码是一种浪费时间和资源的做法，在之后的学习过程中模块化和组件化应该时刻牢记心中，利用Javascript的语言特性写出更优雅的代码

JavaScript 编码原则 | 青训营