面试题：JavaScript可复用组件之模块化

Question

在JavaScript中，如何通过ES6模块系统创建一个可复用的组件模块，并实现组件之间的依赖管理？请举例说明。

Answer 1

1. 创建可复用的组件模块：
   • 假设我们要创建一个简单的button组件模块。首先创建一个button.js文件。
   • 在ES6模块系统中，可以使用export关键字来暴露模块的功能。

   // button.js
   const Button = {
     render() {
       return `<button>Click me</button>`;
     }
   };
   export default Button;
   

2. 实现组件之间的依赖管理：
   • 例如，我们有一个app.js文件，它依赖于上面创建的button组件。
   • 使用import关键字引入依赖的模块。

   // app.js
   import Button from './button.js';
   const appDiv = document.createElement('div');
   appDiv.innerHTML = Button.render();
   document.body.appendChild(appDiv);
   

   • 如果一个模块有多个导出，可以使用命名导出和导入。例如，我们修改button.js为：

   // button.js
   const buttonText = 'Click me';
   const render = () => `<button>${buttonText}</button>`;
   export {buttonText, render};
   

   • 在app.js中导入时：

   // app.js
   import {render} from './button.js';
   const appDiv = document.createElement('div');
   appDiv.innerHTML = render();
   document.body.appendChild(appDiv);