面试题：TypeScript中export在复杂项目架构下的优化与设计模式应用

Question

在一个大型前端项目中，涉及多个功能模块，每个模块都有其独立的业务逻辑和接口定义。为了提高代码的可维护性和复用性，如何基于export设计一套合理的模块导出架构，并且结合常见的设计模式（如单例模式、依赖注入等）来管理模块间的依赖关系？请详细描述架构思路并给出关键代码示例。

Answer 1

基于 export 的模块导出架构思路

1. 按功能模块划分：将每个独立的业务逻辑封装在一个单独的文件中，每个文件作为一个模块。例如，用户登录模块 userLogin.js，商品展示模块 productDisplay.js 等。
2. 导出接口定义：在模块文件中，使用 export 关键字导出模块对外暴露的接口。这些接口可以是函数、类、对象等。例如，在 userLogin.js 中可能导出一个登录函数 export const login = (username, password) => { /* 登录逻辑 */ }。
3. 公共模块抽取：对于多个模块可能会用到的公共功能，如工具函数、配置文件等，抽取成单独的公共模块。例如，utils.js 模块专门存放工具函数，config.js 存放项目配置。

结合设计模式管理模块间依赖关系

1. 单例模式：
   • 思路：确保一个模块在整个应用程序中只有一个实例。适用于一些全局状态管理或者资源管理的模块，如全局的用户信息管理模块。
   • 实现：在模块内部使用闭包来维护一个单例实例。
   • 关键代码示例：

// userInfo.js
let userInfoInstance;
const UserInfo = (function () {
    let user = null;
    const getInstance = () => {
        if (!user) {
            user = {
                name: '',
                age: 0
            };
        }
        return user;
    };
    return {
        getInstance: getInstance
    };
})();
export const getUserInfo = () => UserInfo.getInstance();

2. 依赖注入：
   • 思路：通过将依赖的模块作为参数传递给需要使用它的模块，而不是在模块内部直接引入依赖。这样可以提高模块的可测试性和灵活性。
   • 实现：例如，在一个商品展示模块中可能依赖于用户信息模块来判断是否显示某些商品（如仅对会员显示的商品）。
   • 关键代码示例：

// productDisplay.js
export const displayProducts = (userInfo) => {
    if (userInfo.isMember) {
        // 显示会员商品
    } else {
        // 显示普通商品
    }
};

// main.js
import { getUserInfo } from './userInfo.js';
import { displayProducts } from './productDisplay.js';
const userInfo = getUserInfo();
displayProducts(userInfo);

整体架构示例

假设项目目录结构如下：

project/
├── utils/
│   └── utils.js
├── config/
│   └── config.js
├── user/
│   └── userLogin.js
│   └── userInfo.js
├── product/
│   └── productDisplay.js
└── main.js

在 main.js 中引入各个模块并进行调用：

import { login } from './user/userLogin.js';
import { getUserInfo } from './user/userInfo.js';
import { displayProducts } from './product/productDisplay.js';
// 模拟登录
login('username', 'password');
const userInfo = getUserInfo();
displayProducts(userInfo);

通过这种基于 export 的模块导出架构，并结合单例模式和依赖注入设计模式，可以有效提高代码的可维护性和复用性，清晰管理模块间的依赖关系。