config配置块Angular应用的运行主要分为两部分:app.config()和app.run(),config是你设置任何的provider的阶段,从而使应用可以使用正确的服务,需要注意的是在配置块中只有provider能被注入(只有两个例外是$provide和$injector)。而且provider也只能在config中注入。Angular注入服务的5种方式中,只有通过provider和
转载 2024-07-23 13:21:02
55阅读
静对新版本十八岁时打架,兄弟多,那是面子,敢惹事那叫魄力!现在打架了,悄悄的,真怕身边的朋友笑话!从前,天天喝大酒,唱歌,通宵KTV,那叫会玩。现在低调做人,约上三五知己喝喝茶,到公园跑两圈,多陪陪家人,那叫靠谱!不管你混的多牛逼,多有钱,做和你年龄匹配的事,这叫责任,也叫成熟!10年前发个脾气,牛都拉不回来。10年后生个气,转眼就觉得没必要。时间渐渐磨去了年少轻狂,也渐渐沉淀了冷暖自知。10年前
转载 2022-11-08 18:16:48
92阅读
一、认识服务(service)  服务这个概念其实并不陌生,在其他语言中如java便有这样的概念,其作用就是对外提供某个特定的功能,如消息服务,文件压缩服务等,是一个独立的模块。ng的服务是这样定义的:它是一个单例对象或函数,对外提供特定的功能。首先是一个单例,即无论这个服务被注入到任何地方,对象始终只有一个实例。其次这与我们自己定义一个function然后在其他地方调用不同,因为服务被定义在一个
转载 2023-12-13 12:31:02
53阅读
诞生背景巨石应用现代的前端应用的发展趋势正在变得越来越富功能化,富交互化。复杂的单体前端应用背后则是数量庞大的后端应用组成的微服务集群。在一个团队中维护的前端项目,随着时间推进,会变得越来越庞大,越来越难以维护。所以我们给这种应用起名为巨石单体应用。 前后端协作反观后端技术的发展趋势,从最初的前后端混合开发到前后端分离再到现在的微服务拆分。原本臃肿的后端服务在以垂直方向拆分之后变得清晰易维护。微
转载 2024-04-28 12:38:37
209阅读
1.基本概念实现一套微前端架构,可以把其分成四部分(参考:https://alili.tech/archive/11052bf4/)加载器:也就是微前端架构的核心,主要用来调度子应用,决定何时展示哪个子应用, 可以把它理解成电源。包装器:有了加载器,可以把现有的应用包装,使得加载器可以使用它们,它相当于电源适配器。主应用:一般是包含所有子应用公共部分的项目—— 它相当于电器底座子应用:众多展示在主
转载 2024-06-19 21:48:06
43阅读
前言本篇手写简易single-spa流程首先初始化项目npm init -y npm install rollup rollup-plugin-serve编写rollup.config.jsimport serve from "rollup-plugin-serve"; export default { input: "./src/single-spa.js", output: { fil
转载 2024-02-29 11:13:29
36阅读
介绍前端微服务,即将微服务的理念应用于web端,将web应用由单一的单体应用转变为多个小型前端应用聚合为一体的应用。前端框架的多样性、版本的多样性导致很多前端项目技术战不统一,所用框架版本不统一。如vue经历了从2.0到3.0更新之后,提供了全新的组织代码的思维方式,这个时候如果在使用vue2的旧的项目上升级vue3,重构成本会很高,甚至会影响线上项目的稳定运行。所以较多的解决情况是:旧的项目仍然
说说微前端的概念微前端是指存在于浏览器中的微服务。微前端作为用户界面的一部分,通常由多个组件组成,并使用React,Vue和Angular等框架来渲染组件。每个微前端可以由不同的团队进行管理,并可以自主选择框架。虽然在迁移或测试时可以添加额外的框架,出于实用性考虑,建议只使用一种框架。每个微前端都拥有独立的git仓库,package.json和构建工具配置。因此,每个微前端都拥有独立的逐步推进和独
介绍什么是前端微服务?我们知道,近些年,前端发展呈百家争鸣式发展,框架层出不穷,版本更是迭代不穷,难免会出现前端项目技术栈不统一、所用框架版本不统一。比如,有的项目中,还采用了angelar1.0、vue1.0等。而这些项目若没有新的功能加入,线上稳定运行,对其重构成本会很高。但却需要结合到新的应用中去,遇到的较多的情况是:旧的应用使用的是 Angular.js 编写,而新的应用开始采用 Angu
转载 2024-04-16 08:36:09
86阅读
什么是微前端?我们先来看两个实际的场景:1. 复用别的的项目页面通常,我们的后台项目都长这样: 如果我们的项目需要开发某个新的功能,而这个功能另一个项目已经开发好,我们想直接复用时。PS:我们需要的只是别人项目的这个功能页面的**「内容部分」**,不需要别人项目的顶部导航和菜单。一个比较笨的办法就是直接把别人项目这个页面的代码拷贝过来,但是万一别人不是 vue 开发的,或者说 vue 版本、UI
转载 2024-06-26 17:07:58
39阅读
前端探索背景前段时间开发了一个业务管理系统项目,项目中包含一系列功能,包括人员管理、机构部门、权限、功能维护等基本功能。于是乎,打算将这些基本的功能独立出来供其他业务系统使用。那么这个基础的项目应该具备以下特点:独立的代码库、便于更新迭代、完善的文档等。于是便有了微前端的想法,尽管可能实现方式诸多。什么是微前端前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单
前端的消息总线,主要的功能是搭建模块与模块之间通讯的桥梁.黑盒子问题1:应用微服务化之后,每一个单独的模块都是一个黑盒子, 里面发生了什么,状态改变了什么,外面的模块是无从得知的. 比如模块A想要根据模块B的某一个内部状态进行下一步行为的时候,黑盒子之间没有办法通信.这是一个大麻烦.问题2每一个模块之间都是有生命周期的.当模块被卸载的时候,如何才能保持后续的正常的通信?ps. 我们必须要解决这些
前言微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 **2022 你还不会微前端吗 \(下\) — 揭秘微前端核心原理**[1] 中主要就是通过自定义实现一个微前端框架来加深理解。 2AA922E9.gif 微前端是什么?微前端 是一种类似于 微服务 的概念,
一个前端应用能够单独跑,也能被作为一个模块集成到另一个应用里,在 url 变化的时候,加载、卸载对应的子应用。Qiankun 是一个基于 single-spa 的微前端框架,通过将不同的子应用打包成独立的 JavaScript 包。升级:使用 html 入口的方式解决了要手动加载子应用的各种资源的麻烦,通过沙箱实现了 JS、CSS 的隔离,还实现了全局的状态管理机制(子应用获取全局状态的方法 ge
前端 – 乾坤产生背景: 在 toB 的前端开发工作中,我们往往就会遇到如下困境:工程越来越大,打包越来越慢团队人员多,产品功能复杂,代码冲突频繁、影响面大技术栈单一,无法灵活扩展微前端到底是什么?微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 微前端借鉴了微服务的架构理念,将一个庞大的前端应用拆分为多个独立灵活的小型应用,每个应用都可以独立开发、
转载 2024-05-13 22:30:21
77阅读
前端微服务化(一):初探微前端产生的原因一个团队负责的项目(不管前后端还是全栈),随着时间的推移,会极大的可能发生下面的变化。为了这些变化,各种繁琐的组合,开分支,打tag等造成后期的维护成本增加,代价随之越来越大。随着互联网的发展,一种将多个不同的服务集中在一个大平台上统一对外开放的概念逐渐为人熟知,越来越多与云相关或不相关的中后台管理系统或企业级信息系统曾经或开始采用了这种「统一平台」的形式。
前端微服务化(一):初探微前端产生的原因一个团队负责的项目(不管前后端还是全栈),随着时间的推移,会极大的可能发生下面的变化。为了这些变化,各种繁琐的组合,开分支,打tag等造成后期的维护成本增加,代价随之越来越大。随着互联网的发展,一种将多个不同的服务集中在一个大平台上统一对外开放的概念逐渐为人熟知,越来越多与云相关或不相关的中后台管理系统或企业级信息系统曾经或开始采用了这种「统一平台」的形式。
近期在项目中需要使用qiankun实现微前端微服务化,分享记录一下搭建的过程以及遇到的问题项目框架整体为umi搭建的主应用,两个子应用均为create-react-app搭建,进入系统,菜单main为主应用页面,点击菜单sub-react切换第一个子应用,菜单sec-sub切换第二个子应用,项目根目录下是主应用,child文件夹下为子应用sub-react,sec-sub,搭建后的初始目录结构如
转载 2024-04-29 11:52:20
99阅读
浅析微前端框架 single-spa一、应用场景将一个单体大型应用,转化为多个可以独立运行、独立开发、独立部署、独立维护的应用的聚合。 解决的问题: 1、随着项目迭代应用越来越庞大,难以维护。 2、跨团队或跨部门协作开发项目导致效率低下的问题。二、基于 single-spa 二次开发的微前端解决方案(蚂蚁金服的 qiankun)(qinkun 文档地址):https://qiankun.umijs
前端概念详解什么是微前端?微前端(Micro-Frontend),是将微服务(Micro-Services)理念应用于前端技术后的 相关实践,使得一个前端项目能够经由多个团队独立开发以及独立部署。01 微前端开发的特性技术无关:各个开发团队都可以自行选择技术栈,不受同一项目中其它团队影 技术无关 响;代码独立:各个交付产物都可以被独立使用,避免和其它交付产物耦合;样式隔离:各个交付产物中的样式不
  • 1
  • 2
  • 3
  • 4
  • 5