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

大家好，我是讯享网，很高兴认识大家。

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

讯享网

一、什么是 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 &#61; this.localVar;

//—–以下是原JS文件内容

讯享网

讯享网const method1 &#61; () &#61;&gt; { console.log(localVar); };

//—–将原有的js文件内容复制到上面，根据需要做适量修改

//以下加载原来js文件尾部，只在主文件中加入render

const render &#61; (containerId,content) &#61;&gt; { const container &#61; document.getElementById(containerId); if (container) { container.innerHTML &#61; &#96;${content}&#96;; // 渲染内容到指定容器 console.log(localVar); } }; //这里返回原js需要暴露的方法 return { method1,render };

} //如要和原有系统兼容加入下面的语句 //const { method1,render }=test(); //可简化 //const {}=test(); //method1();

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

讯享网// Page1.js (function() {

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

})();

讯享网// Page2.js (function() {

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

})();

3.主界面改造思路

讯享网&lt;!DOCTYPE html&gt;
&lt;html lang=“en”&gt;
&lt;head&gt;

&lt;meta charset&#61;&#34;UTF-8&#34;&gt; &lt;meta name&#61;&#34;viewport&#34; content&#61;&#34;width&#61;device-width, initial-scale&#61;1.0&#34;&gt; &lt;title&gt;SPA Example&lt;/title&gt;

</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>

讯享网// 事件绑定&#xff1a;页面切换 document.getElementById(&#39;loadPage1&#39;).addEventListener(&#39;click&#39;, function() { loadScript(&#39;Page1.js&#39;, &#39;Page1&#39;, &#39;content&#39;); // 加载并渲染页面1内容 }); document.getElementById(&#39;loadPage2&#39;).addEventListener(&#39;click&#39;, function() { loadScript(&#39;Page2.js&#39;, &#39;Page2&#39;, &#39;content&#39;); // 加载并渲染页面2内容 }); // 动态加载脚本的函数 function loadScript(src, pageName, containerId) { const renderPage &#61; () &#61;&gt; { if (window[pageName]) { window[pageName].render(containerId); // 加载并渲染内容 } }; if (window[pageName]) { renderPage(); // 如果页面对象已经存在&#xff0c;直接调用 render 方法 } else { // 动态加载脚本 const script &#61; document.createElement(&#39;script&#39;); script.type &#61; &#39;text/javascript&#39;; script.id &#61; pageName; script.src &#61; src; script.onload &#61; renderPage; // 脚本加载完成后执行渲染 document.head.appendChild(script); // 将脚本添加到文档中 } }

</script> </body> </html>

五、总结

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