位置: 编程技术 - 正文

详解利用Angular实现多团队模块化SPA开发框架(angular使用)

编辑:rootadmin

推荐整理分享详解利用Angular实现多团队模块化SPA开发框架(angular使用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:angular怎么用,angular navigatebyurl,angular例子,angular例子,angular怎么用,angular keyup,angular例子,angular怎么用,内容如对您有帮助,希望把文章链接给更多的朋友!

0、前言

当一个公司有多个开发团队时,我们可能会遇到这样一些问题:

1.技术选项杂乱,大家各玩各2.业务重复度高,各种通用api,登录注销,权限管理都需要重复实现(甚至一个团队都需要重复实现)3.业务壁垒,业务之间的互通变得比较麻烦4.部署方式复杂,多个域名(或IP地址)访问,给用户造成较大的记忆难度5.多套系统,风格难以统一6.等等...

当然,解决方式有不少。以下就来讲解下我们这边的一种解决方案。

1、思路

Angualr

Angular(注:非AngularJS) 是流行的前端 MVVM 框架之一,配合 TypeScript,非常适合用来做后台管理系统。由于我们曾今的一套 Angularjs 开发框架,我们继续选择 Angular 来进行实现,并尽可能的兼容 AngularJS 的模块。

SPA

选 SPA 还是多页?多余 Mvvm 来说,多页并不是标配。而且多页开发中,我们势必会关注更多的内容,包括通用header,footer,而不仅仅是页面的核心内容。

模块化

为什么要模块化呢?当有多个团队开发时(或者项目较大时),我们希望各个团队开发出来的东西都是 模块(不仅限于JS模块),这样可以让我们独立发布、更新、删除模块,也能让我们的关注点集中在特定模块下,提高开发效率和可维护性。

平台化

我们需要有一个运行平台(Website站点),允许在里面运行指定的模块。这样就可以实现单一入口,也容易实现通用逻辑,模块共享机制等等。

兼容 AngularJS 模块

在考虑将框架切换到 Angular 时,我们无可避免的会遇到如何兼容当前已有模块的问题。大致可选的方案如下:

1.参考 AngualrJS -> Angular 官方升级指南,一步步将模块切换为 Angular 的实现。(工作量大,需要开发团队调整很多东西)2.iframe嵌入,会有一定的体验差异,但对开发团队来说,基本无缝升级,也不需要做什么改动。(无疑,我们选择了这套方案)

模块打包

我们需要将单个的模块打包为资源包,进行更新。这样才能做到模块独立发布,及时生效。

CSS冲突

在大型 SPA 中,CSS冲突是很大的一个问题。我们期望通过技术手段,能够根据当前使用的模块,加载和卸载CSS。

跨页面共享数据

由于涉及到iframe兼容旧有模块,我们无可避免,需要考虑跨窗口的页面共享。

公共模块

当一个团队的模块较多时,就会有一些公共的东西被抽取出来,这个过程,框架是无法知道的,所以这个时候,我们就需要考虑支持公共模块。(模块之间也有依赖关系)

详解利用Angular实现多团队模块化SPA开发框架(angular使用)

3、实现

基于以上的一些思考,我们首先需要实现一个基础的平台网站,这个没什么难度,直接用 Angular 实现即可。有了这一套东西,我们的登录注销,基本的菜单权限管理,也就实现了。

在这个基础之上,我们也能实现公共服务、公共组件了(封装一系列常用的玩意)。

如何模块化?如何打包?

注意:此模块并非Angular本身的模块。 我们通过约定,在 modules/ 下的每一个目录都是一个业务模块。一个业务模块一般会包含,静态资源、CSS以及JS。根据这个思路,我们的打包策略就是:遍历 modules/ 的所有目录,对每一个目录进行单独打包(webpack多entry打包+CSS抽取),另外使用 gulp 来处理相关的静态资源(在我看来,gulp才是构建工具,webpack是打包工具,所以混合使用,物尽其用)。

一般来说,webpack 会把所有相关依赖打包在一起,A、B 模块都依赖了 @angular/core 识别会重复打包,而且框架中,也已经打包了 @angular 相关组件。这个时候,常规的打包配置就不太合适了。那该如何做呢?

考虑到 Angular 也提供了 CDN 版本,所以我们将 Angular 的组件通过文件合并,作为全局全量访问,如 ng.core、ng.common 等。

既然这样,那我们打包的时候,就可以利用 webpack 的 externals 功能,把相关依赖替换为全局变量。

这样处理之后,我们打包后的文件,也就不会有 Angular 框架代码了。

注:这个对引入资源的方式也有一定要求,就不能直接引入内层资源了。

如何动态加载模块

打包完成之后,这个时候就要考虑平台如何加载这些模块了(发布过程就不说了,放到指定位置即可)。

什么时候决定加载模块呢?其实是访问特定路由的时候,所以我们的顶级路由,会使用Promise方法来实现,如下:

我们把每个模块,按照 umd 的格式进行打包。然后再需要使用该模块的时候,使用动态构建 script 来运行脚本。

CSS的动态加载相对比较简单,代码如下:

为了能够在模块切换时卸载,还需要提供一个方法,供路由切换时使用:

公共模块依赖

为了处理模块依赖,我们可以借鉴 AMD规范 以及使用 requirejs 作为加载器。当前在我的实现里,是自定义了一套加载器,后期应该会切换到 AMD 规范上去。

如何兼容 AngularJS模块?

为了兼容 AngularJS 的模块,我们引入了 iframe, iframe会先加载一套曾今的 AngularJS 宿主,然后再这个宿主中,运行 AngularJS 模块。为了实现通信,我们需要两套平台程序中,都引入一个基于 postMessage 实现的跨窗口通信库(因为默认跨域,所以用postMessage实现),有了它之后,我们就可以很方便的两边通信了。

AOT编译

按照 Angular 官方的 Aot 编译流程即可。

多Tab页

在后台系统中,多Tab页是比较常用了。但是多Tab页,在单页中使用,会有一定的性能风险,这个依据实际的情况,进行使用。实现多Tab页的核心就是如何动态加载组件以及如何获取到要加载的组件。

多Tab页面,实际就是一个 Tabset 组件,只是在 tab-item 的实现稍显特别一些,相关动态加载的源码:

注意:要考虑组件卸载方法,如 destroy()

为了获取到当前要渲染的组件,我们可以借用路由来抓取:

3、总结

标签: angular使用

本文链接地址:https://www.jiuchutong.com/biancheng/378908.html 转载请保留说明!

上一篇:Vue.js搭建移动端购物车界面(vue移动端app开发流程)

下一篇:vue实现商城购物车功能(基于vue的购物系统)

  • 个体工商户工商年报资金数额填啥
  • 居民和企业
  • 不入库的商品怎么做分录
  • 购入生产线属于固定资产吗
  • 机械租赁带司机税目
  • 赠送的产品价格为0怎么入库
  • 优惠政策所得税计算
  • 购货方跨年红冲发票会计分录
  • 银行贷款印花税是什么意思
  • 员工一次性补偿要缴纳个税吗
  • 企业销售赠券的增值税如何处理
  • 企业年会的增值税能抵扣吗?
  • 怎么查找地方教育附加税的计税依据?
  • 新公司营业执照经营范围越多越好吗
  • 简并税率政策是什么?简并税率政策要点如何解读?
  • 小规模未开票收入要交增值税吗
  • 代付给其他供应商货物尾款怎么记账
  • 建筑设计公司的账务处理
  • 出口退税限额如何理解
  • 销售额的意思
  • b4纸张尺寸
  • 双系统怎么卸载ubuntu
  • win10系统如何在游戏中禁用输入法
  • 定期存款利息收入怎么算
  • 专用发票已认证怎么退回
  • win10 21h1激活密钥
  • 最小的的照片
  • 估价入库金额怎么来
  • 职工教育经费计入管理费用吗
  • wordpress用什么语言编写
  • 技术维护服务费
  • opencv训练模型教程
  • 机器学习:基于逻辑回归对优惠券使用情况预测分析
  • 100多年前程序员
  • php二进制字符串压缩
  • lnewusers命令 创建用户账号
  • MVC架构模式
  • 生产型企业出口退税会计分录
  • 商贸公司会计成本核算
  • 为什么增值税发票不能折叠?
  • 增值税进项税额转出的情况有哪些
  • 股东存入投资款要交什么税
  • 发票开具流程是?
  • 商品流通环节包括
  • 管理费用如何冲减
  • 旅游费计入什么会计科目
  • 一般纳税人农业企业免企业所得吗
  • 职工福利费汇算清缴
  • 无进项发票开具销项发票
  • 回购股票会导致所有者权益减少吗
  • 电子银行回单可以作为凭证吗
  • 费用先付款后收到发票的会计分录
  • 税收分类编码填错有影响吗
  • 小规模纳税人购进税控设备如何抵扣
  • 企业会计档案由谁保管
  • 缴纳工会经费如何记账
  • 应付职工薪酬讲解
  • 社区养老服务平台
  • mysql官方监控工具
  • win2000停止服务
  • windowsxp开机启动项在哪里设置
  • CentOS上使用Squid+Stunnel搭建代理服务器教程
  • freebsd11.3安装教程
  • 电脑cortana小娜有用吗
  • 360修复漏洞补丁一直下载
  • linux系统怎么查看root用户密码
  • 如何升级win10专业版
  • unity3d怎么删除模型
  • linux常用的网络命令
  • vmwareUbuntu虚拟机硬盘扩容
  • 编程python怎么学
  • nodejs读取文件字节数组
  • unity find references in scene
  • 用python画一棵树
  • node.js golang
  • arcgis engine+c#实例开发教程
  • 税务局的经济类型
  • 机票电子发票怎么作废
  • 岗位大练兵业务大比武简报
  • 官方客服热线人工台电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设