腾讯的电商业务中，商品详情页需要展示商品的图片画廊，用户可以通过点击缩略图切换大图。请设计一个前端组件来实现这个功能，要求具备良好的可维护性和扩展性。

答题要点

推荐答题框架：采用模块化设计思路，将组件拆分为不同的模块进行开发。关键要点：1. 组件结构：设计组件的 HTML 结构，包括大图展示区和缩略图列表。2. 样式设计：使用 CSS 对组件进行样式美化，确保布局合理。3. 交互逻辑：使用 JavaScript 监听缩略图的点击事件，切换大图的显示。4. 可维护性和扩展性：将组件的逻辑封装成独立的函数或类，便于后续维护和扩展。示例话术：首先，设计组件的 HTML 结构，如 `<div class='image-gallery'><div class='main-image'></div><ul class='thumbnail-list'></ul></div>`。然后，使用 CSS 对组件进行样式设计，设置大图和缩略图的大小、布局等。接着，使用 JavaScript 监听缩略图的点击事件，当点击缩略图时，将对应的大图显示在主展示区。为了提高可维护性和扩展性，将组件的逻辑封装成一个 `ImageGallery` 类，通过构造函数传入配置参数。代码示例：`class ImageGallery { constructor(config) { // 初始化组件逻辑 } }`