- 博客(143)
- 收藏
- 关注
RSS订阅原创 浅学 HTML里的特殊字符 的某些特殊性
HTML编辑器会自动转义特殊字符（如&转成&）以确保安全显示和代码规范。这种转义防止浏览器解析错误、XSS攻击及URL参数异常。常见被转义字符包括&、<>和引号等。当需要显示原字符时，可通过JavaScript的DOM操作（如innerHTML）、第三方库（如he）或框架方法反转义。须注意反转义可能带来安全风险，需谨慎使用。
2025-06-22 09:30:00
1013
原创 微前端MFE: 通过共享模块通信（模块联邦Module Federation）
传统微前端中，不同子应用彼此完全独立，通信主要通过事件、消息总线等方式。随着模块联邦（Module Federation）技术的发展，可以在多个微前端应用间动态共享模块，实现模块级别的调用和通信，打破边界。通过 Module Federation 配置，暴露一个模块，比如状态管理实例、工具函数或事件总线。通过导入其他应用暴露的模块，直接调用对方的功能或状态，达成通信目的。在主应用或其他子应用里，动态加载这个暴露的模块，并使用它完成通信。机制，多个应用间共享和暴露模块（函数、组件、状态管理实例等）。
2025-06-22 09:00:00
928
原创 微前端MFE：(React 与 Angular)框架之间的通信方式
两种微前端架构中主应用与子应用间的通信方式：1. 使用mitt事件总线实现React主应用与Angular子应用的通信，通过props传递数据、回调函数和事件广播实现双向交互；2. 采用原生CustomEvent进行跨框架通信，通过window对象的事件派发和监听实现松耦合的数据交换。两种方式各有优势，mitt适合紧密集成的场景，CustomEvent则更适用于框架无关的异步通信。文章还提供了完整的代码示例和实现要点，包括Angular子应用的挂载方法、事件监听处理和数据传递机制，为微前端开发中的跨技术栈通
2025-06-21 07:16:15
1080
原创 MFE微前端: 不同子应用之间通信方式有哪些
微前端架构中子应用通信的常见方式包括：1.URL参数/路由通信（推荐），通过改变URL驱动状态传递；2.全局事件总线，使用CustomEvent进行广播通信；3.共享状态管理（如Redux）；4.props属性传递（主应用→子应用），适用于qiankun等框架；5.发布订阅模式；6.localStorage临时方案；7.postMessage用于iframe场景。建议组合使用props+事件总线，优先考虑解耦方案，根据场景选择适合的通信方式。qiankun框架推荐使用其内置的props和onGlobalSt
2025-06-21 06:44:02
674
原创 angular里面路由里面配置resovle是为什么
Angular路由中的resolve机制用于在路由激活前预先获取必要数据。通过在路由配置中指定resolver，确保组件加载时所需数据已经就绪，避免加载延迟或闪烁问题。该机制支持异步操作和错误处理，可自动拦截错误并重定向。主要优势包括：提升用户体验（快速展示内容）、确保数据完整性、简化组件逻辑。典型实现步骤：创建resolver服务→配置路由→组件接收数据。resolve通过数据预加载让页面加载更流畅，代码结构更清晰健壮。
2025-06-18 12:00:00
310
原创 Angular路由配置详解：Route接口属性全解析
本文系统介绍了Angular路由(Route)接口的核心配置属性。主要内容包括：🔑基础属性（path/component/redirectTo等）、🧭嵌套路由配置（children/loadChildren）、🛡️路由守卫（canActivate等）、📦数据传递（data/resolve）等特性。重点说明了pathMatch匹配规则、懒加载实现、守卫控制机制等关键功能，并提供了典型配置示例。特别指出Angular15+新增的componentProviders等高级特性，帮助开发者掌握路由配置的完整
2025-06-18 09:00:00
304
原创 微前端MFE: 那些常见的错误汇总（更新版）
1. Angular框架中的"Maximum call stack size exceeded"错误，原因是递归调用或组件循环引用；2. TypeScript编译问题，需检查tsconfig.json文件配置；3. Module Federation中的"Shared module not available"错误，需创建bootstrap.ts文件；4. React主应用加载Angular远程组件失败，需检查webpack的publicPath配置。
2025-06-17 12:00:00
575
原创 MFE微前端：共享模块的那些事
摘要：在微前端架构中，避免主应用和远程应用重复加载依赖的关键是通过Webpack ModuleFederation的shared配置共享依赖。核心配置包括：1) 使用singleton:true确保单例加载；2) 设置strictVersion:true严格校验版本；3) 通过requiredVersion:'auto'保持版本一致。若主子应用配置不一致（如strictVersion不同），可能导致版本冲突、运行时异常或资源浪费。最佳实践是保持所有项目的共享依赖配置完全一致，并确保依赖版本严格匹配，以避免兼
2025-06-17 09:30:00
1029
原创 解决 Native-Federation 中 TranslateService 空指针错误
1. 优先方案：传递 Host 的 `Injector` 并共享 `TranslateService`（方案1+方案2）2. 隔离方案：Remote 使用完全独立的翻译实例（适合完全解耦的场景）3. 确保：- 版本一致性- 正确的模块配置（`forRoot`/`forChild`）- Webpack 共享配置中的 `singleton: true`
2025-06-16 12:00:00
871
原创 Angular：对控制组件样式（CSS Encapsulation ）封装的学习
场景推荐封装模式默认组件开发（不需要全局样式）Emulated（默认）需要定义全局样式或覆盖外部库样式None需要构建真正的 Web ComponentShadowDom注意：如果使用::ng-deep/deep/或>>>等穿透方式，虽然可以强制跨组件样式生效，但它们已被废弃或不推荐使用。建议用 CSS 变量、全局样式或输入绑定来解决样式传递问题。
2025-06-16 09:45:00
504
原创 MFE微前端：如何捕捉远程应用的remote.js加载失败的错误？
摘要：本文介绍了在使用module-federation的loadRemoteModule时处理模块加载失败的方案。主要针对两类问题：1）通过try...catch或.catch()捕捉Promise异步错误；2）对于remoteEntry.js的404错误，建议采用fetch预检查或监听script.onerror的方式处理。文中提供了具体代码示例和常见错误排查建议，包括URL检查、CORS设置和模块导出验证等最佳实践。
2025-06-15 21:49:29
508
原创 MFE微前端高级版：Angular + Module Federation + webpack + 路由（Route way）完整示例
本文详细介绍了Angular微前端(MFE)的高级路由配置方案，主要包括：主应用路由配置采用自定义URL匹配器、预加载策略和微前端加载服务；实现动态路由注册和跨微前端路由同步；提供微前端路由守卫和数据解析器示例。文章还解析了Angular路由的匹配规则，包括空路径、子路由、通配符等场景的处理逻辑。该方案支持嵌套路由、动态路由、懒加载等高级功能，为构建复杂微前端应用提供了完整的路由解决方案，能有效管理多微前端间的路由交互和状态同步。
2025-06-15 21:39:17
1192
原创 MFE微前端基础版：Angular + Module Federation + webpack + 路由（Route way）完整示例
本文介绍了基于Module Federation的Angular微前端架构实现方案。项目采用主应用(Shell)加两个微前端应用(MFE1、MFE2)的结构，通过共享库实现依赖复用。主应用配置webpack模块联邦插件，动态加载远程微应用；微应用分别暴露模块并配置子路由。文章详细展示了webpack配置、路由设置方案，并提供了导航组件示例和环境配置说明，同时推荐使用npm-run-all工具并行启动各应用服务器。该方案实现了应用解耦和独立部署，是构建模块化前端系统的有效实践。
2025-06-11 12:13:55
515
原创 MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释
这个属性与下面表格中的output.filename，output.filename的全称是module.output.filename，但是这个属性的全称是module.filename。示例: filename:remoteEntry.js。默认值: remoteEntry.js。type：暴露类型，可选值有。filename(字符串)name：暴露的全局变量名。（共享依赖，优化加载）定义远程入口文件的名称。
2025-06-09 11:12:44
765
原创 Angular微前端架构：Module Federation + ngx-build-plus (Webpack)
使用 Webpack 5 的 ModuleFederationPlugin 实现了主应用与子应用的动态模块共享。通过npx-build-plus扩展了 Angular CLI 的构建功能，支持自定义 Webpack 配置。采用@angular-architects/module-federation提供的 loadRemoteModule实现了 Angular 路由的懒加载远程模块。
2025-06-09 10:10:00
962
原创 Angular中Webpack与ngx-build-plus 浅学
摘要：Webpack是Angular项目的核心打包工具，默认由CLI管理。ngx-build-plus允许在不暴露配置的情况下自定义Webpack设置，适用于添加加载器、优化构建等场景。例如，通过配置处理.custom文件类型。该工具在微前端架构(MFE)中尤为重要，未来将发布专门博客深入探讨Webpack与ngx-build-plus在Angular微前端中的结合应用。
2025-06-08 15:00:00
1080
1
原创 Module Federation 和 Native Federation 的比较
摘要：Module Federation是Webpack5的微前端方案，支持运行时动态共享模块；Native Federation是其Angular优化版本，基于浏览器原生ES模块。主要区别在于：Module Federation依赖Webpack，功能强大但较重；Native Federation轻量但兼容性要求高。前者适用于复杂企业应用，后者适合轻量级或未来导向项目。选择时应考虑项目需求、团队技能和浏览器兼容性等因素。（149字）
2025-06-08 09:30:00
1079
原创 微前端 - Native Federation使用完整示例
这是一个使用@angular-architects/native-federation实现的Angular微前端示例，包含主应用(host-app)和远程应用(remote-app)。远程应用暴露HelloComponent组件，主应用通过loadRemoteModule动态加载该组件。配置要点包括：1）远程应用在federation.config.js中暴露组件并共享核心库；2）主应用通过路由导航和RemoteComponent.forRemote配置加载远程组件；3）共享依赖项确保单例模式。示例展示了组
2025-06-07 16:18:11
1270
原创 微前端 - Module Federation使用完整示例
摘要：本文介绍了在Angular框架中实现微前端架构的配置方法。主要内容包括主应用和子应用的webpack配置（使用@angular-architects/module-federation插件）、路由设置、共享服务实现以及动态加载组件等技术要点。详细说明了如何通过Module Federation实现应用间模块共享，并提供了具体代码示例。同时提及了React框架的类似实现可参考其他开源项目。该方案支持独立开发和部署子应用，同时保持应用间的高效协作。
2025-06-07 11:26:40
683
原创 Angular报错：cann‘t bind to ngClass since it is‘t a known property of div
摘要：Angular中出现"Can't bind to 'ngClass'"错误主要由于未正确导入CommonModule或BrowserModule。根模块需要BrowserModule，子模块需要CommonModule。其他可能原因包括拼写错误或组件未在模块中声明。解决方法是在对应模块中导入正确模块（根模块用BrowserModule，子模块用CommonModule）并确保组件已注册。
2025-06-05 20:11:44
509
原创 GIT - 如何从某个分支的 commit创建一个新的分支？
要从指定commit创建新分支并恢复污染分支的原始状态，可以按以下步骤操作：使用命令创建新分支：git branch <新分支名> <commit哈希值>或创建后立即切换：git checkout -b <新分支名> <commit哈希值>推送至远程仓库：git push --set-upstream origin <新分支名>关键点：提交哈希可简写（前几位唯一即可）该操作仅涉及分支管理，不修改代码即使在无提交权限的仓库也可执行
2025-06-05 19:35:47
920
原创 Angular18报错：Uncaught TypeError: Cannot read properties of undefined (reading ‘lFrame‘/‘prototype‘)
Zone.js 是 Angular 的核心依赖之一，它是一个能够在 JavaScript 执行过程中创建、维护和销毁"执行上下文"的库。简单来说，它能够拦截和跟踪异步操作，为 Angular 的变更检测机制提供基础支持。
2025-04-22 12:00:00
697
原创 Angular 表单 容易忽略的那些规则（四）
当用户提交这个表单时：浏览器会直接向 [action] 绑定的 url 发送一个 POST 请求（跳过 Angular 的拦截）。服务器处理请求后，返回的响应会在新标签页（target="_blank"）中显示。由于 ngNoform 的存在，Angular 不会介入表单的提交过程。
2025-04-21 11:30:00
1872
原创 构建工具插件：concat
Angular CLI 默认使用 Webpack 打包，通常不需要手动。以减少 HTTP 请求（优化加载性能）（如合并多个库文件）
2025-04-21 10:00:00
257
原创 CSS 预处理器：Sass 升级版本 浅学
变量：可以存储颜色、字体等值嵌套规则：更清晰地组织样式结构混合(Mixins)：可重用的样式块继承：通过@extend共享样式运算：在样式表中进行数学计算函数：自定义或使用内置函数处理样式值模块化：将样式分割为多个文件。
2025-04-20 11:00:00
789
原创 Angular 表单 容易忽略的那些规则（三）
今天我们要探讨的是表单的formControlName 和 change() 方法之间的含义以及关系。1. 基本含义：在响应式表单中将 DOM 元素与实例关联：仅用于响应式表单（Reactive Forms）将表单控件绑定到模板中的输入元素自动同步表单值和视图自动处理验证状态(change)：原生 DOM 事件，当元素值变化并失去焦点时触发：可用于任何 HTML 表单元素是标准 HTML 事件触发时机：值改变且元素失去焦点后不同于(input)事件（实时触发）2. 两者关系。
2025-04-20 09:45:00
714
1
原创 Angular表单 容易忽略的那些规则(二)
updateValueValidity()是Angular中AbstractControl 类的一个方法，它用于重新计算控件的验证状态和当前值。每当你动态更改表单控件的验证器、异步验证器、值或者状态时，都需要调用 updateValueValidity()来确保表单或控件的状态被正确更新。关注的是表单控件的状态变化（有效性、禁用状态等）。关注的是表单控件的值变化。两者都是Observable类型，可以通过方法来监听其变化。
2025-04-19 20:24:42
1103
原创 AI时代下 你需要和想要了解的英文缩写含义
Oracle公司提供的技术认证，证明持有人在Oracle数据库、Java等领域的专业能力（如OCP Java SE 11 Programmer）。
2025-04-19 20:21:13
672
原创 浅学 同源策略
同源策略是一种在 web 浏览器中实施的安全策略，它限制了不同来源的网页之间的交互和数据共享。同源策略是 web 浏览器的核心安全机制，它通过限制不同源之间的交互来保护用户数据和隐私。：假设有两个 iframe，分别加载了不同来源的网页，浏览器会禁止一个 iframe 脚本访问另一个 iframe 中的 DOM，因为这违反了同源策略。，浏览器会认为这两个地址的源不同，通常会阻止该请求，除非目标服务器明确允许跨源请求（如通过 CORS）。：在一些早期的浏览器中，JSONP 被用来绕过同源策略，进行跨域请求。
2025-02-27 11:31:15
548
原创 Angular表单 容易忽略的那些规则(一)
禁用的控件不影响表单的验证结果：即使你禁用了某个控件，它的值也不会影响 form.valid 的计算。换句话说，禁用控件依然会被视为通过验证。控件禁用后不参与表单验证：禁用的控件不会触发验证规则，也不会影响form.valid 的计算。因此，即使某个控件的值不符合验证规则，只要它被禁用，form.valid依然会被计算为true。
2025-02-27 11:19:59
430
原创 前端 时间格式占位符 学习
在日期时间格式化中，常见的时间格式占位符用来表示年、月、日、小时、分钟、秒等信息，通常用于格式化和解析日期时间。下面是以及它们的使用场景。
2024-11-28 17:30:00
1960
原创 在浏览器中输入一个URL之后会发生什么？
用户发起请求：用户输入 URL 或点击链接，浏览器向服务器发起请求。请求服务器：通过 HTTP 向服务器发送请求。服务器处理：服务器返回 HTML 文件（静态或动态生成）。浏览器接收响应：解析 HTML，构建 DOM。加载外部资源：请求并加载 CSS、JS 和其它资源。构建渲染树：合并 DOM 和 CSSOM，生成渲染树。布局：根据渲染树计算元素的位置和尺寸。绘制：为每个元素绘制样式和内容。合成：将不同层合成，形成最终图像。呈现：页面显示在用户屏幕上，用户可以交互。
2024-11-17 11:45:00
779
原创 RxJs 之 switchMap 学习
switchMap 主要用来处理连续的、异步的数据流，确保只处理最新的请求或事件，避免了不必要的请求或操作。在需要取消上一个操作并只关注最后一次结果时，switchMap 是一个非常有用的工具。switchMap会在源 observable 发出新值时触发。每当输入框的值发生变化时，switchMap会取消上一个请求并发起新的请求。防抖操作符（如 debounceTime）可以避免每次输入都触发请求，只在用户停止输入后才发起请求。
2024-11-17 09:00:00
1181
原创 Angular中的ngOnchange()的汇总
监听的是组件的输入属性（@Input()，每当父组件传递给子组件的输入属性发生变化时，会被触发并接收一个对象，包含所有变化的输入属性的详细信息。监听对象@Input()属性。变化内容：父组件传递给子组件的数据变化。当你看到中的和都是undefined组件初始化时：当组件第一次被创建并接收到@Input()数据时，Angular 会触发，即使没有显式的变化，也会将和都设为undefined，尤其当输入属性还没有被赋值时。父组件的输入值是undefined：如果父组件传递的@Input()值本身是。
2024-11-16 12:00:00
1567
1
原创 display: none 和 *ngIf 和 visibility:hidden 的学习
属性/指令*ngIf作用通过 Angular 逻辑控制完全添加或移除元素通过 CSS 控制隐藏元素但保持元素在 DOM 中隐藏元素但元素仍然在 DOM 中且占用空间DOM 元素移除是（移除元素及其占用的空间）否（元素仍在 DOM 中）否（元素仍在 DOM 中）空间占用否（元素完全不占用空间）否是（元素仍占据空间）生命周期钩子会触发进入和离开 DOM 时的钩子（如ngOnInit不会触发钩子不会触发钩子渲染性能可能较低，尤其是频繁添加/移除元素时（动态地销毁和创建 DOM 元素，可能更高效）
2024-11-16 09:00:00
1063
原创 【前端】Node.js 项目依赖管理的基础（二）
没有文件时，执行不会安装任何依赖，仅创建一个空的目录。因此，为了有效管理项目的依赖，建议始终创建并维护文件。问：如果没有package.json文件，但是有 node_module文件， npm i会发生什么如果在项目目录中没有文件，但存在文件夹，执行在没有文件的情况下，执行不会对现有的目录做任何操作，保留原有的包状态，但不能对依赖进行管理或安装。为了有效管理项目，建议始终使用文件。问：如果没有package-lock.json文件， npm i会发生什么如果在项目中没有文件，执行没有文件时，执行。
2024-10-12 09:00:00
749
原创 【前端】Node.js 项目依赖管理的基础（一）
npm是包管理工具。是项目的配置文件，定义了依赖和脚本。记录了确切的依赖版本，确保一致性。是实际存放依赖包的地方。
2024-10-11 17:56:57
816
原创 【前端】 常用的版本控制符号汇总
使用 `^` 时，可以更新到同一大版本下的所有次版本和补丁版本。- 使用 `~` 时，只能更新到同一小版本下的补丁版本。选择哪个取决于你对版本稳定性的需求。如果希望更大范围的更新，可以使用 `^`；如果希望更严格控制版本，可以使用 `~`。版本号详解：在软件版本控制中，版本号通常采用语义化版本控制（Semantic Versioning）标准，格式为MAJORMINORPATCH（主要版本.次要版本.补丁版本）- 补丁版本：针对 bug 修复，保持向后兼容。
2024-10-11 13:51:50
1373
原创 学习Math.random()的应用
在 JavaScript 中，Math是一个内置对象，提供了许多用于数学计算的函数和常量。它不需要实例化，因为所有的属性和方法都是静态的。 toString()方法用法。padStart()方法的用法。时间戳格式化。
2024-08-23 11:30:00
3426
原创 讨论 Angular 项目中打开页面，页面中的浏览器滚动条自动滚动到底部 学习
项目的X页面，HTML是通过循环数组进行数据展示，其中进入页面有两个入口，第一个入口是通过点击某个label进行路由跳转，进入页面之后触发API获取页面数据并进行处理（API进行时会显示loading），API加载完，loading消失，随之展示数据在页面上。第二个入口是点击另一个页面的table的row进行路由跳转，进入页面后会对从table row传过去的数据进行处理并进行展示。更奇怪的问题来了，第一个入口并不存在上述问题，只有第二个入口存在问题！setTimeout这个方法一定要有！
2024-08-21 14:00:00
319
microfrontend + React + Angular + module-federation + 各种方式 完整demo
2025-06-07
microfrontend + angular16 + module-federation + 各种方式 完整demo
2025-06-07
microfrontend前微端 + angular17 + module-federation 完整demo
2025-06-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人