前端工程化解决方案（前端工程化实战）

随着现代 Web 开发的发展，越来越多的项目开始从 MPA (Multi-Page Application, 多页面应用) 转向 SPA (Single-Page Application, 单页面应用)。这种转变能显著提升用户体验和应用性能。在本文中，我们将探讨从 MPA 迁移到 SPA 的核心步骤，并以一个低代码开发平台为例，展示如何逐步实现这种转变。

一、什么是 MPA 和 SPA？

MPA (多页面应用)： MPA 是一种传统的 Web 应用架构，每次用户请求一个新页面时，浏览器都会重新加载整个页面。页面之间通过完整的 HTTP 请求切换，通常伴随页面的刷新和大量资源的重复加载。
SPA (单页面应用)： SPA 是现代 Web 应用架构，所有页面和资源通常一次性加载到浏览器中，页面内容通过 JavaScript 动态更新，避免了页面刷新。用户交互更流畅，页面切换更快。

二、为什么要从 MPA 转向 SPA？

性能优化：SPA 避免了不必要的页面刷新和资源重复加载，大幅提高页面切换速度。
用户体验提升：由于 SPA 加载速度快、交互更加流畅，用户体验会显著提升。
开发维护便捷：SPA 的组件化和模块化开发可以提高代码复用性，使得开发和维护更加便捷。

三、项目背景

1.前期实现路径：该低代码开发平台通过在线开发平台，采用可视化方式进行系统设计和配置，包括数据导航及权限配置器、数据模型设计器、页面UI设计器、JS编辑器、CSS编辑器等，后端依据前端设置，后端自动成Html文件，每个文件各自加载自身的和公共的JS，CSS文件，主界面通过TAB页签+iframe依据导航自动加载页面，是一个典型的MPA结构；

2.改造预期效果：只能改造公共JS及后台的代码生成系统，不影响前期开发的业务系统，总之以最小的代价实现从 MPA 转 SPA。

四、实施方案

1.原有公共JS 改造方案

var localVar="我是window全局变量"
function test() {
//将原来的JS文件中使用的全局变量localVar绑定到this上，把代码中的“window.”开头全局变量，进行替换为局部变量
    const localVar = this.localVar;
//-----以下是原JS文件内容
    const method1 = () => {
        console.log(localVar);
    };
//-----将原有的js文件内容复制到上面，根据需要做适量修改

//以下加载原来js文件尾部，只在主文件中加入render
    const render = (containerId,content) => {
        const container = document.getElementById(containerId);
        if (container) {
            container.innerHTML = `${content}`; // 渲染内容到指定容器
            console.log(localVar);
        }
    };
    //这里返回原js需要暴露的方法
    return { method1,render };
}
//如要和原有系统兼容加入下面的语句
//const { method1,render }=test();
//可简化
//const {}=test();
//method1();

2.后端代码生成器改造，将来的html转生成JS。

// Page1.js
(function() {
    const globalVar = "I am a local variable from Page 1";
    // 渲染内容到指定容器,放入原有页面的html中的body内容
    const content = `  
            <div>  
                <h1>Welcome to Page 1</h1>  
                <p>This is the content of Page 1.</p>  
            </div>  
        `;
    // 调用 test 函数并获取返回的对象，名称要对应
    const {method1,render} = test.bind({localVar: globalVar})();
    //调用 test 函数并获取返回的对象,简化写法，但方法将不能使用
    //const {} = test.bind({localVar: globalVar})();
    // 确保 Page1 对象存在
    window["Page1"] = window["Page1"] || {};
    window["Page1"].render = function(containerId) {
        // 渲染内容到指定容器,放入原有页面的html中的body内容
        document.getElementById(containerId).innerHTML = content; // 渲染内容到指定容器
        // 调用 test 函数并获取返回的对象
        render(containerId,content);
        // 执行原来代码逻辑
        method1();
    };
})();

// Page2.js
(function() {
    var globalVar = "I am a local variable from Page 2";
    // 确保 Page2 对象存在
    window["Page2"] = window["Page2"] || {};
    window["Page2"].render = function(containerId) {
        // 渲染内容到指定容器,放入原有页面的html中的body内容
        const content = `  
            <div>  
                <H2>我是页面2 </H2>
                <h1>Welcome to Page 2</h1>  
                <p>This is the content of Page 2.</p>  
            </div>  
        `;
        document.getElementById(containerId).innerHTML = content; // 渲染内容到指定容器
        const boundTest = test.bind({ localVar: globalVar });
        // 调用 test 函数并获取返回的对象
        const testInstance = boundTest();
        testInstance.render(containerId,content); // 调用 method1
        // 执行原来代码逻辑
        testInstance.method1(); // 调用 method1
    };
})();

3.主界面改造思路

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SPA Example</title>
</head>
<body>
<div id="content"></div> <!-- 内容将被渲染到这里 -->
<button id="loadPage1">Load Page 1</button>
<button id="loadPage2">Load Page 2</button>
<script src="Common.js"></script> <!-- 引入公共JS -->
<script>
    // 事件绑定：页面切换
    document.getElementById('loadPage1').addEventListener('click', function() {
        loadScript('Page1.js', 'Page1', 'content'); // 加载并渲染页面1内容
    });
    document.getElementById('loadPage2').addEventListener('click', function() {
        loadScript('Page2.js', 'Page2', 'content'); // 加载并渲染页面2内容
    });

    // 动态加载脚本的函数
    function loadScript(src, pageName, containerId) {
        const renderPage = () => {
            if (window[pageName]) {
                window[pageName].render(containerId); // 加载并渲染内容
            }
        };
        if (window[pageName]) {
            renderPage(); // 如果页面对象已经存在，直接调用 render 方法
        } else {
            // 动态加载脚本
            const script = document.createElement('script');
            script.type = 'text/javascript';
            script.id = pageName;
            script.src = src;
            script.onload = renderPage; // 脚本加载完成后执行渲染
            document.head.appendChild(script); // 将脚本添加到文档中
        }
    }
</script>
</body>
</html>

五、总结

按上述改造方案，该项目仅用1周的时间将原来MPA成功改为SPA，极大提升了用户的体验感！