前言

这是我参与「第五届青训营」笔记创作活动的第3天，在本次课堂上我们学习了JavaScript，做此笔记。

一、本堂课重点内容

JavaScript编码原则之各司其职

JavaScript好代码的标准
HTML/CSS/JS各司其职

二、详细知识点介绍

JavaScript编码原则之各司其职

JavaScript好代码的标准

JavaScript好代码的标准包括：

可读性高：代码应该易于理解和维护。
可维护性高：代码应该设计得简单，便于更改和扩展。
可重用性高：代码应该设计得灵活，便于重复使用。
遵循编码规范和标准：应该遵循语言的编码规范和标准，例如JavaScript语言规范（ECMAScript）。
注释和文档：应该有足够的注释和文档来帮助理解代码。
性能优化：代码应该设计得高效，并避免不必要的计算和存储。以下是一个简单的实现页面切换日间阅读和夜间阅读的JavaScript代码示例:

// 定义变量保存阅读模式
let currentMode = 'day';

// 日间阅读模式
const dayMode = {
  bgColor: 'white',
  textColor: 'black'
};

// 夜间阅读模式
const nightMode = {
  bgColor: 'black',
  textColor: 'white'
};

// 获取页面元素
const body = document.querySelector('body');
const text = document.querySelectorAll('p');

// 切换阅读模式函数
function toggleMode() {
  if (currentMode === 'day') {
    currentMode = 'night';
    body.style.backgroundColor = nightMode.bgColor;
    text.forEach(element => {
      element.style.color = nightMode.textColor;
    });
  } else {
    currentMode = 'day';
    body.style.backgroundColor = dayMode.bgColor;
    text.forEach(element => {
      element.style.color = dayMode.textColor;
    });
  }
}

// 绑定切换阅读模式事件
const toggleBtn = document.querySelector('#toggle-btn');
toggleBtn.addEventListener('click', toggleMode);

HTML/CSS/JS各司其职

HTML（超文本标记语言）用于创建网站的结构和布局。它定义页面上的不同元素，例如标题、段落、图像和链接。 CSS（层叠样式表）用于控制网站的视觉呈现。它定义了使网站以某种方式呈现的颜色、字体、间距和其他设计元素。 JavaScript 是一种编程语言，用于向网站添加交互性和其他动态功能。它可用于创建图像滑块、表单验证和交互式地图等内容。总之，HTML用来定义网页的结构，CSS用来定义网页的样式，JavaScript用来定义网页的交互行为。三种语言是相互独立的，但是却是相辅相成的。

三、课后个人总结

在编写JavaScript代码时，遵循一些基本的编码原则可以帮助我们编写出高质量的代码。其中重要的一条原则就是各司其职。

首先，让我们来看看JavaScript好代码的标准。好的JavaScript代码应该具有高可读性、高可维护性、高可重用性、遵循编码规范和标准、有足够的注释和文档、和良好的性能。这些标准可以帮助我们编写出高质量、易于理解和维护的代码。

其次，让我们来看看HTML/CSS/JS各司其职。HTML是用来描述网页结构和内容的语言，CSS是用来定义网页的样式的语言，JavaScript是用来实现网页交互效果的语言。在编写网页时，应该按照这三者的职责来分开编写。HTML定义结构，CSS定义样式，JavaScript定义交互行为。这样做可以使代码更加简洁，易于维护。

总之，遵循JavaScript编码原则之各司其职可以帮助我们编写出高质量的代码，使网页能够高效地运行。应该将HTML、CSS和JavaScript分开编写，避免混淆这三者的职责。并且保证代码具有高可读性、高可维护性、高可重用性、遵循编码规范和标准、有足够的注释和文档、和良好的性能。这些都是JavaScript编码原则之各司其职的重要组成部分，能够帮助我们编写出高效、易于理解和维护的代码。

在实际开发中，编码原则之各司其职应该被视为重要的准则，我们应该在编码过程中不断遵循这些原则，以保证我们编写的代码质量和可维护性。

【跟着月影学 JavaScript（一） | 青训营笔记】

前言