js实现模块切换
实现模块切换的方法
在JavaScript中，模块切换可以通过动态导入、条件加载或路由控制实现。以下是几种常见方式：
动态导入（Dynamic Import）
利用ES6的import()语法实现按需加载模块，适合懒加载场景：
// 根据条件动态加载模块
const loadModule = async (moduleName) => {
const module = await import(`./modules/${moduleName}.js`);
module.init(); // 调用模块方法
};
// 使用时
loadModule('userProfile');路由控制切换
结合前端路由（如React Router/Vue Router）实现模块切换：
// React Router示例
import { Route, Routes } from 'react-router-dom';
import UserModule from './UserModule';
import AdminModule from './AdminModule';
function App() {
return (
<Routes>
<Route path="/user" element={<UserModule />} />
<Route path="/admin" element={<AdminModule />} />
</Routes>
);
}条件渲染
在单页面应用中使用状态控制模块显示：
const App = () => {
const [currentModule, setModule] = useState('dashboard');
return (
<>
{currentModule === 'dashboard' && <DashboardModule />}
{currentModule === 'settings' && <SettingsModule />}
</>
);
};模块注册表模式
通过中央注册表管理模块的切换：
const modules = {
editor: () => import('./EditorModule'),
preview: () => import('./PreviewModule')
};
const switchModule = async (name) => {
const moduleLoader = modules[name];
const module = await moduleLoader();
module.render(document.getElementById('container'));
};注意事项
- 动态导入返回Promise，需配合
async/await或.then()使用 - 生产环境需确保模块路径正确（Webpack等工具可能需要配置）
- 大型项目建议使用Webpack的代码分割（Code Splitting）优化性能
