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

一、本堂课重点内容：

组件的定义解析及特征
组件封装基本方法
利用原生 JS 实现电商网站轮播图

课程介绍：本节课将主要围绕编码三大原则的“组件封装”原则展开。组件是 Web 页面上所抽取的模版、功能与样式的单元，自从 React，Vue 等前端框架在市面上大量使用之后，组件化开发逐渐成为了前端主流开发方式。

二、详细知识点介绍：

组件的定义解析及特征

组件是指Web页面上抽出来一个个包含模版(HTML)、功能(JS)和样式(CSS)的单元。

下面是一个简单的组件的例子：

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = '<button>Click me</button>';
  }
}
customElements.define('my-button', MyButton);

这个组件继承了HTMLElement类，在constructor中，使用innerHTML来指定了这个组件的HTML结构。最后，使用customElements.define()来注册这个组件。

组件的特征:

可重用性：组件可以在多个地方使用，并且不会相互影响。
封装性：组件可以封装 HTML、CSS 和 JavaScript 代码，只暴露出一些特定的接口。
组合性：组件可以组合成更大的组件。
继承性：组件可以继承另一个组件的特性。

组件封装基本方法

组件封装基本方法可以分为三个部分：结构设计、展现效果、行为设计。

结构设计：这部分主要是定义组件的HTML结构，包括组件的标签、属性、内容等。
展现效果：这部分主要是定义组件的样式，包括字体、颜色、布局等。
行为设计：这部分主要是定义组件的功能和交互，包括组件的事件、方法、状态等。

组件封装中还有一种重要的部分就是API(功能)+Event(控制流)。API是指组件提供给外部调用的接口，比如设置组件的属性、获取组件的状态等。Event是指组件对外部发出的事件，比如点击、滚动等，可以让外部监听并做出响应。

通过封装组件，可以把组件的状态和行为分离，更容易维护和扩展。

下面是一个简单的组件封装的例子：

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this._count = 0;
    this._el = this.attachShadow({ mode: 'open' });
    this._el.innerHTML = `<button>Count: ${this._count}</button>
    <style> button { background-color: #4CAF50; color: white; } </style>`;
    this._el.querySelector('button').addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('count', { detail: this._count }));
    });
  }

  set count(value) { 
      this._count = value; 
      this._el.querySelector('button').innerHTML = `Count: ${this._count}`; 
  }

   get count() { 
       return this._count; 
   } 
} 
customElements.define('my-counter', MyCounter);

这个组件继承了HTMLElement类，在constructor中定义了一个_count变量,并使用attachShadow()来创建组件的shadow DOM。使用innerHTML来指定了这个组件的HTML结构和样式。使用addEventListener来监听点击事件，每次点击都会触发一个'count'事件并且把当前count变量值传递给事件监听器。

同时还有一个set count 和 get count 方法，用来改变组件内部状态和获取组件状态。最后，使用customElements.define()来注册这个组件。

通过上面的例子可以看出组件的结构设计、展现效果、行为设计、以及API(功能)+Event(控制流)的封装都被体现出来，且组件内部状态和行为都得到了清晰的划分，使得组件易于维护和扩展。

三、实践练习例子：

利用原生 JS 实现电商网站轮播图

插件化: 这种方法是最早的重构方式，主要是将轮播图的功能封装成一个独立的插件，使用者可以通过调用插件的方法来使用轮播图。这种方式的优点是容易实现，缺点是依赖性比较高。
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系

模板化: 这种方法主要是将轮播图的结构和样式抽离出来，通过模板字符串来实现。这种方式的优点是提高了可维护性，缺点是代码量增加。

抽象化(组件框架): 这种方法是最新的重构方式，主要是使用组件框架来构建轮播图组件。这种方式的优点是组件化，易于维护和扩展，缺点是学习成本较高。

四、课后个人总结：

通过对JS中组件的定义解析及特征、组件封装基本方法、利用原生 JS 实现电商网站轮播图这三个问题的学习，我们可以深刻地了解组件封装的重要性，以及插件化、模板化、抽象化这三次重构的不同之处，了解如何使用原生 JS 来实现组件的封装，并且更好地理解了组件的结构设计、展现效果、行为设计、API和Event的重要性。

五、引用参考：

JavaScript 编码原则之组件封装

JavaScript 编码原则之组件封装 ｜ 青训营笔记