ToB前端开发实战：一套代码实现多客户定制化需求的干货分享-七爪网

在软件开发行业，如何高效地满足各种客户需求，成为了一个热门话题。尤其是那些通过前端代码的巧妙运用，在不大幅修改业务逻辑的前提下，实现个性化需求的做法，更是值得深入研究。

前端定制化业务改动小的原因

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>客户标识</title>
  </head>
  <body>
    <div>打开console 看输出</div>
    <script src="./user-symbol.js" defer></script>
    <script src="./index.js" defer></script>
  </body>
</html>

前端代码的架构较为灵活。在业务变动不大的时候，可以迅速创建“-jia-baba”分支，大约10分钟内完成代码的修改并提交测试。这种高效的运作模式得益于前端代码的特性。它的架构设计使得局部修改变得快捷，而且与后端业务不同，不需要调整数据库等复杂的结构。比如，对前端页面布局的微小改动或是对某些功能的细微调整，都不会影响到整个框架，因此可以显著降低修改的规模。

# 构建docker 镜像
docker build -t user-symbol -f Dockerfile ../window-user-symbol
# -p：当前机器的8080端口和镜像80 端口绑定，使用8080端口
# -v：映射 当前文件夹下的/env/user-symbol.js 到/usr/share/nginx/html/user-symbol.js
# --name：指定生成的镜像名
# -d：指定使用的基础镜像
docker run -itd -p 8080:80 -v ${PWD}/env/user-symbol.js:/usr/share/nginx/html/user-symbol.js --name user-test-2 -d user-symbol

此外，前端技术的更新换代使得简便快捷的修改成为可能。随着前端框架的持续发展，代码间的关联性得到了有效管理，各元素间的关系更加明朗。在需要进行局部调整时，可以迅速锁定目标区域，从而简化了修改的难度。

全局对象增加标识的意义

增设个性化标志能更有效地进行客户区分。若一家公司拥有多个客户群体，通过在整体对象中添加标志，系统能够明确识别每位客户的独特特征。比如，在电商平台上，为不同级别的优质会员设置标志，便于在开展个性化促销活动时，轻松辨别目标客户。

window.env = {
  userAgent: "jia",
};

从运行层面来看，利用环境信息来决定执行特定指令，有助于提升程序运行效率。系统在用户环境变化时，能迅速根据全局对象的标识确定应执行的代码，无需对整个流程代码逐一检查，这样可以有效减少资源的不必要消耗。

window.env = {
  userAgent: "yi",
};

编译时区分打包的作用

确保客户代码的自主性至关重要。在编译阶段，通过区分打包，dist目录最终输出的仅是特定客户的代码，这相当于为每位客户量身打造了一个专属的程序包。就好比为用户A量身定制了一个企业内部办公系统前端界面的代码包，它不会受到其他客户代码的影响。

便于后续的维护和更新也是关键因素之一。由于不同客户的代码各自独立打包，一旦某个客户需要功能更新或发现bug需要解决，无需对全体客户的代码进行大规模重新打包，只需对特定客户的代码进行处理，从而大幅降低了整个项目的维护工作量。

挂载功能的优势

            new CopyPlugin({
              patterns: [
                {
                  from: path.resolve(__dirname, './config.js'),
                  to: path.resolve(__dirname, `./dist/config.js`),
                },
              ],
            }),

实现定制化而无需修改业务代码的价值十分显著。在不损害现有业务代码的前提下，满足个性化需求对于正在运行的项目来说至关重要。以一个在线新闻资讯平台为例，考虑到流量和广告等利益，它需要同时满足普通用户的阅读需求，并为VIP用户提供额外功能。通过添加挂载功能，可以在不扰乱原有新闻浏览功能的代码结构的情况下，轻松实现这些定制化需求。

不改变部署镜像的做法同样高效。尤其在大型项目的集群部署中，镜像变动可能引发连锁反应。利用挂载功能，能有效规避这一风险，确保部署架构的稳定性。

import { useState } from 'react';
import loadjs from 'loadjs';
import { isProd } from './utils';

const REMOTE_CONFIG_URL = isProd ? '/static/config.js' : '/config.js';

const App = () => {
  const [loadedJs, setLoadedJs] = useState(false);
  // 保证配置文件成功引入 才会渲染主流程逻辑
  if (!loadjs.isDefined('config')) {
    loadjs([REMOTE_CONFIG_URL], 'config', function () {
      setLoadedJs(true);
    });
  }
  if (!loadedJs) {
    return null;
  }
  return <div>主逻辑开始</div>;
};
export default App;

配置型js加载的要求与控制

在生产环境中，优先引入配置型的JavaScript文件，主要是出于对系统稳定性和运行效率的考虑。将此类文件置于index.html中，或者通过JavaScript代码进行控制，都是确保系统启动时能迅速获取到所需配置信息的有效方法。以一个在线教育平台为例，在用户登录页面显示之前，必须先加载相应的配置JavaScript文件，以确定适合的课程模式，这种优先加载方式显得尤为关键。

打包时务必保证配置文件被放入dist文件夹。借助copy插件等工具，确保配置文件在项目构建最终包时一同包含，避免因运行时找不到配置文件而引发错误。

"build:aa": "webpack --env user=aa",

动态替换js文件的风险及解决

// 0.初始的webpack 对象
console.log("init webpack config", env, process.env);
const { user, mode = "development" } = env;
// 1.将 user 绑定到 node 环境的 process 对象上
process.env.user = user;
// 2. 验证是否绑定成功
console.log("current user", process.env.user);

用户修改配置存在较大风险。若用户下载应用并抓取关键配置，若恶意篡改并加入非法参数，系统运行将受影响。以金融APP为例，若用户恶意修改利率等显示信息，可能误导其他用户。

针对此类情况，我们可以实施加密配置文件和限制修改权限的防护措施。通过加密配置文件，抓取到的文件变得难以解读；同时，只允许具备特定权限的后台管理员进行配置调整，以此降低运行时配置被错误修改的可能性。