这是我参与「第五届青训营 」笔记创作活动的第5天
今天的[JavaScript编程原则]视频课，从实践维度解读在实际编码过程中何种类型的 JavaScript 代码称之为“好代码”，并从 JS 出发，总结其他语言编码可遵循的共性原则，由浅入深，每一小节将集中讲解三大原则之一的其中一个原则。在此我打算把各司其责和组件封装放在一起写一篇文章，其他的放在下一篇文章。
我对今天的知识进行了整理和概括，具体内容如下：
1. JavaScript编程原则之各司其责
首先我们考虑一下怎样的JavaScript代码才是好的代码？我们要怎么去写JavaScript代码呢？其实最重要的就是遵循编码原则。第一份原则就是各司其责，即让HTML、CSS和JavaScript职能分离。下面我们通过例子来解析这第一个原则。
写一段js，控制一个网页，让它支持浅色和深色两种浏览模式。请问你会怎么做？
- 在js中控制css样式达到效果，这是版本一：
2.在版本一的基础上简化代码，大体上不变，代码减少了，版本二：
3.只使用css达到效果，版本三：
其实通过这个案例就是要告诉大家HTML/CSS/JavaScript要各司其责，应当避免不必要的由js直接操作样式，纯展示类交互尽量避免用js。
2.JavaScript编程原则之组件封装
这一部分主要围绕编码三大原则的“组件封装”原则展开。组件是 Web 页面上所抽取的模版、功能与样式的单元，自从 React，Vue 等前端框架在市面上大量使用之后，组件化开发逐渐成为了前端主流开发方式。
组件封装基本方法由结构设计、展现结果、行为设计构成。我们通过一个例子轮播图来进行讲解。轮播图主要就是通过js控制行为，如下：
此外还有一些接口api，例如：
同时除了这几个部分还有其他需要注意的地方，例如：
- 重构：插件化，具体实现如下：
- 组件框架-抽象，具体实现如下：
3.总结-组件封装
组件封装过程中我们首先要遵循组件设计的原则：封装性、正确性、扩展性、复用性等。其次实现组件的步骤分为以下几步：
- 结构设计
- 展现效果
- 行为设计
