前端应用

微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。以及，它们应该可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。

注意：这里的前端应用指的是前后端分离的单应用页面，在这基础才谈论微前端才有意义。

微前端的那些事儿
实施微前端的六种方式
基础铺垫：应用分发路由 -> 路由分发应用
后端：函数调用 -> 远程调用
前端：组件调用 -> 应用调用
路由分发式微前端
使用 iFrame 创建容器
自制框架兼容应用
组合式集成：将应用微件化
纯 Web Components 技术构建
结合 Web Components 构建
在 Web Components 中集成现有框架
集成在现有框架中的 Web Components

只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站

举例

1、旅行采用的不同的交通工具，飞机，高铁，动车，汽车，火车等等、大埔市场

2、根据绩效发放年终奖金。绩效分A B C等级，根据不同的等级发放多或少的奖金

3、form表单验证。对每一个输入框进行验证，可以验证是否为空，最小长度，是否符合电话号码，等等

三、策略模式的实现（以发放奖金和form表单验证为例）

1、发放奖金规则：绩效得A的员工，将拿到原本工资*3倍的钱；绩效得B的员工，将拿到原本工资*2倍的钱；绩效得C的员工，将拿到原本工资*1.5倍的钱。大埔人

（1）我们通常可能会这样写：

 1 <script type="text/javascript">
 2 function calcSalary(original, grade) { //original:原本的工资  grade:绩效等级
 3     var final;
 4     if(grade == "A") {
 5         final = original*3
 6     }else if(grade == "B") {
 7         final = original*2
 8     }else if(grade == "C") {
 9         final = original*1.5
10     }
11     return final
12 }
13 console.log(calcSalary(2000,'A')) // 6000
14 console.log(calcSalary(2000,'B')) //4000
15 console.log(calcSalary(2000,'C')) //3000
16 </script>

（2）使用策略模式重构代码

再回顾一遍策略模式的定义：定义一系列算法，把它们一个个封装起来，并且它们可以相互替换

猜你喜欢