最后:
总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。
面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
-
UI 不同步,DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框,同时我们要求这个弹框要浏览器居中显示,还要浏览器 resize 时自动居中…
-
全局上下文完全隔离,内存变量不共享。iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
-
慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。
然后我找了github的 micro-frontends ,顺藤摸到了一堆瓜。
“微前端”一词最早于2016年底在ThoughtWorks Technology Radar中提出。它将微服务的概念扩展到了前端世界。当前的趋势是构建一个功能强大且功能强大的浏览器应用程序(也称为单页应用程序),该应用程序位于微服务架构之上。随着时间的流逝,通常由一个单独的团队开发的前端层会不断增长,并且变得更加难以维护。这就是我们所谓的Frontfront Monolith。
简而言之,微前端就是将大而可怕的东西切成更小、更易于管理的部分,然后明确它们之间的依赖关系。我们的技术选择、代码库、团队和发布流程都应该能够独立运行和演变,而不会过度协调。
目的显而易见,和后端微服务、移动端组件化是一样的。
-
解耦合,不同团队开发不同模块
-
增量更新
-
独立部署
-
提高复用
鉴于上述定义相当松散,有许多方法可以合理地称为微前端。在本节中,我们将展示一些示例,并讨论它们的权衡。所有方法都出现了一个相当自然的架构——通常应用程序中的每个页面都有一个微前端,并且有一个容器应用程序,它:
渲染常见的页面元素,如页眉和页脚
解决身份验证和导航等跨领域问题
将各种微前端聚合到页面上,并告诉每个微前端何时何地呈现自己
一个网页,里面有围绕不同部分绘制的盒子。一个盒子包裹整个页面,将其标记为“容器应用程序”。另一个框包装了主要内容(但不包含全局页面标题和导航),将其标记为“浏览微前端”
1. 服务端模板集成
首先我们写一个index.html 文件,留下中间动态片段由服务端去渲染。
🍽 Feed me
需要借助Nginx去配置$PAGE变量,在请求的时候重新匹配url
server {
listen 8080;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
ssi on;
Redirect / to /browse
rewrite ^/$ http://localhost:8080/browse redirect;
Decide which HTML fragment to insert based on the URL
location /browse {
set $PAGE ‘browse’;
}
location /order {
set $PAGE ‘order’;
}
location /profile {
set $PAGE ‘profile’
}
All locations should render through index.html
error_page 404 /index.html;
}
服务端渲染微服务通过后端分割业务来实现,也是可以分割代码的,针对于ssr模式开发而来。
2. 构建时集成
通过将不同业务进行打包,然后通过一个主应用将不同业务集合起来,类似于下面的package.json
:
{
“name”: “@feed-me/container”,
“version”: “1.0.0”,
“description”: “A food delivery web app”,
“dependencies”: {
“@feed-me/browse-restaurants”: “^1.2.3”,
“@feed-me/order-food”: “^4.5.6”,
“@feed-me/user-profile”: “^7.8.9”
}
}
这种虽然实现了分治,不同团队开发不同部分,但是更新依赖过于麻烦,不能增量打包发版。
3. 运行时集成
(1) Iframe
通过iframe 来动态加载,老生常谈,不多赘述,看如下代码:
Welcome to Feed me!
(2)通过JavaScript进行运行时集成
这个方法可能是最灵活的方法,也是我们看到团队最常用的方法。每个微前端都使用