最近，我对前端代码复用的一点思考

import React from 'react';
import { Input, Button } from 'antd';
//通用的联系人函数式组件
//渲染一个联系人面板，包含姓名、电话、身份证号等信息，敏感信息自动打码

function Contact(props) {
  const { name, phone, idCard } = props;
  //敏感信息打码
  const maskIdCard = idCard => {
    return idCard.replace(/(\d{4})\d+(\d{4})$/, '$1****$2');
  };
  return (
    <div className="contact">
      <div className="name">姓名：{name}</div>
      <div className="phone">电话：{phone}</div>
      <div className="idCard">身份证号：{maskIdCard(idCard)}</div>
      {if (props.children) {
        <div className="divider"></div>
        <div className="extra">{props.children}</div>
      }}
    </div>
  );
}

export default Contact;

├── src
│   ├── pages
│   │   ├── HomePage
│   │   │   ├── app.vue  // 为App编写的代码
│   │   │   ├── miniprogram.vue  // 为小程序编写的代码
│   │   │   ├── h5.vue  // 为H5编写的代码
│   │   │   ├── index.vue  // 通用的代码
│   ├── models
│   ├── services
│   ├── utils
├── package.json
├── tsconfig.json
├── README.md

<template>
  <div>
    <component :is="currentComponent" />
  </div>
</template>

<script>
import app from './app.vue';
import miniprogram from './miniprogram.vue';
import h5 from './h5.jsx';

export default {
  data() {
    return {
      currentComponent: null
    };
  },
  created() {
    // 根据当前的运行环境选择组件
    if (__PLATFORM__ === 'app') {
      this.currentComponent = app;
    } else if (__PLATFORM__ === 'miniprogram') {
      this.currentComponent = miniprogram;
    } else if (__PLATFORM__ === 'h5') {
      this.currentComponent = h5;
    }
  }
};
</script>

├── src
│   ├── models
│   │   ├── EnterpriseUserManager.ts  // 你的M层类
│   │   ├── index.ts  // 导出所有的models
│   ├── services
│   │   ├── authService.ts  // 包含企业认证、个人用户实名认证等方法的服务
│   │   ├── userService.ts  // 包含员工管理、权限审批等方法的服务
│   │   ├── enterpriseService.ts  // 包含企业信息管理、联系人管理等方法的服务
│   │   ├── sealService.ts  // 包含印章管理的方法的服务
│   │   ├── index.ts  // 导出所有的services
│   ├── utils
│   │   ├── api.ts  // 包含API调用的工具函数
│   │   ├── index.ts  // 导出所有的utils
│   ├── app.ts  // 主应用文件
│   ├── index.ts  // 应用入口文件
├── package.json  // npm包管理文件
├── tsconfig.json  // TypeScript配置文件
├── README.md  // 项目说明文件

class EnterpriseUserManager {
  // 这些属性可能需要根据你的业务需求进行调整
  private enterpriseId: string;
  private userId: string;

  constructor(enterpriseId: string, userId: string) {
    this.enterpriseId = enterpriseId;
    this.userId = userId;
  }

  // 企业认证
  async enterpriseCertification(certificationInfo: any): Promise<any> {
    // 这里应该包含实际的认证逻辑
  }

  // 个人用户实名认证
  async individualCertification(certificationInfo: any): Promise<any> {
    // 这里应该包含实际的认证逻辑
  }

  // 法人授权
  async legalPersonAuthorization(authorizationInfo: any): Promise<any> {
    // 这里应该包含实际的授权逻辑
  }

  // 员工管理
  async manageEmployee(employeeInfo: any): Promise<any> {
    // 这里应该包含实际的员工管理逻辑
  }

  // 权限审批
  async permissionApproval(approvalInfo: any): Promise<any> {
    // 这里应该包含实际的审批逻辑
  }

  // 企业信息管理
  async manageEnterpriseInfo(info: any): Promise<any> {
    // 这里应该包含实际的企业信息管理逻辑
  }

  // 联系人管理
  async manageContact(contactInfo: any): Promise<any> {
    // 这里应该包含实际的联系人管理逻辑
  }

  // 印章管理
  async manageSeal(sealInfo: any): Promise<any> {
    // 这里应该包含实际的印章管理逻辑
  }
}

export default EnterpriseUserManager;

<template>
  <view>
    <!-- 你的页面组件 -->
  </view>
</template>

<script>
import { EnterpriseUserManager } from '@/models';

export default {
  data() {
    return {
      enterpriseUserManager: null
    };
  },
  created() {
    this.enterpriseUserManager = new EnterpriseUserManager('enterpriseId', 'userId');
    // 使用enterpriseUserManager进行企业认证
    this.enterpriseUserManager.enterpriseCertification(certificationInfo)
      .then(response => {
        // 处理认证成功
      })
      .catch(error => {
        // 处理认证失败
      });
  }
};
</script>

import React, { useEffect } from 'react';
import { EnterpriseUserManager } from '@/models';

function EnterpriseCertificationPage() {
  useEffect(() => {
    const enterpriseUserManager = new EnterpriseUserManager('enterpriseId', 'userId');
    // 使用enterpriseUserManager进行企业认证
    enterpriseUserManager.enterpriseCertification(certificationInfo)
      .then(response => {
        // 处理认证成功
      })
      .catch(error => {
        // 处理认证失败
      });
  }, []);

  return (
    // 你的页面组件
  );
}

export default EnterpriseCertificationPage;

├── generators
│   ├── app
│   │   ├── index.js
│   │   ├── templates
│   │   │   ├── index.js
│   │   │   ├── index.test.js
│   │   │   ├── miniProgram.js
│   │   │   ├── h5.js
│   │   │   ├── pc.js
│   │   │   ├── README.md
│   │   │   ├── package.json
│   │   │   ├── .gitignore
├── package.json

// 抽象策略类
class AbstractStrategy {
  validateData(data) {
    // 通用的数据验证逻辑
  }

  handleError(error) {
    // 通用的错误处理逻辑
  }

  log(message) {
    // 通用的日志记录逻辑
  }

// 有明显差一点可以写一个抽象，具体在不同平台端 中实现
  businessLogic(data) {
    throw new Error('This method must be overridden');
  }
}

class MiniProgramStrategy extends AbstractStrategy {
  businessLogic(data) {
    // 小程序的业务逻辑
    // 可以使用 this.validateData, this.handleError, this.log
  }
}

class H5Strategy extends AbstractStrategy {
  businessLogic() {
    // H5的业务逻辑
  }
}

class PCStrategy extends AbstractStrategy {
  businessLogic() {
    // PC的业务逻辑
  }
}

// 工厂类
class StrategyFactory {
  static getStrategy(platform) {
    switch (platform) {
      case 'miniProgram':
        return new MiniProgramStrategy();
      case 'h5':
        return new H5Strategy();
      case 'pc':
        return new PCStrategy();
      default:
        throw new Error(`No strategy found for platform ${platform}`);
    }
  }
}

// 使用策略
const platform = 'miniProgram'; // 这个值可能来自用户的输入或者配置文件
const strategy = StrategyFactory.getStrategy(platform);
strategy.businessLogic();

├── src
│   ├── extension.ts
│   ├── test
│   │   ├── extension.test.ts
├── package.json