0、前言

當(dāng)一個(gè)公司有多個(gè)開發(fā)團(tuán)隊(duì)時(shí)，我們可能會(huì)遇到這樣一些問題：

1.技術(shù)選項(xiàng)雜亂，大家各玩各
2.業(yè)務(wù)重復(fù)度高，各種通用api，登錄注銷，權(quán)限管理都需要重復(fù)實(shí)現(xiàn)（甚至一個(gè)團(tuán)隊(duì)都需要重復(fù)實(shí)現(xiàn)）
3.業(yè)務(wù)壁壘，業(yè)務(wù)之間的互通變得比較麻煩
4.部署方式復(fù)雜，多個(gè)域名（或IP地址）訪問，給用戶造成較大的記憶難度
5.多套系統(tǒng)，風(fēng)格難以統(tǒng)一
6.等等...

當(dāng)然，解決方式有不少。以下就來(lái)講解下我們這邊的一種解決方案。

1、思路

Angualr

Angular（注：非AngularJS） 是流行的前端 MVVM 框架之一，配合 TypeScript，非常適合用來(lái)做后臺(tái)管理系統(tǒng)。由于我們?cè)竦囊惶?Angularjs 開發(fā)框架，我們繼續(xù)選擇 Angular 來(lái)進(jìn)行實(shí)現(xiàn)，并盡可能的兼容 AngularJS 的模塊。

SPA

選 SPA 還是多頁(yè)？多余 Mvvm 來(lái)說(shuō)，多頁(yè)并不是標(biāo)配。而且多頁(yè)開發(fā)中，我們勢(shì)必會(huì)關(guān)注更多的內(nèi)容，包括通用header，footer，而不僅僅是頁(yè)面的核心內(nèi)容。

模塊化

為什么要模塊化呢？當(dāng)有多個(gè)團(tuán)隊(duì)開發(fā)時(shí)（或者項(xiàng)目較大時(shí)），我們希望各個(gè)團(tuán)隊(duì)開發(fā)出來(lái)的東西都是 模塊（不僅限于JS模塊），這樣可以讓我們獨(dú)立發(fā)布、更新、刪除模塊，也能讓我們的關(guān)注點(diǎn)集中在特定模塊下，提高開發(fā)效率和可維護(hù)性。

平臺(tái)化

我們需要有一個(gè)運(yùn)行平臺(tái)（Website站點(diǎn)），允許在里面運(yùn)行指定的模塊。這樣就可以實(shí)現(xiàn)單一入口，也容易實(shí)現(xiàn)通用邏輯，模塊共享機(jī)制等等。

兼容 AngularJS 模塊

在考慮將框架切換到 Angular 時(shí)，我們無(wú)可避免的會(huì)遇到如何兼容當(dāng)前已有模塊的問題。大致可選的方案如下：

1.參考 AngualrJS -> Angular 官方升級(jí)指南，一步步將模塊切換為 Angular 的實(shí)現(xiàn)。（工作量大，需要開發(fā)團(tuán)隊(duì)調(diào)整很多東西）
2.iframe嵌入，會(huì)有一定的體驗(yàn)差異，但對(duì)開發(fā)團(tuán)隊(duì)來(lái)說(shuō)，基本無(wú)縫升級(jí)，也不需要做什么改動(dòng)。（無(wú)疑，我們選擇了這套方案）

模塊打包

我們需要將單個(gè)的模塊打包為資源包，進(jìn)行更新。這樣才能做到模塊獨(dú)立發(fā)布，及時(shí)生效。

CSS沖突

在大型 SPA 中，CSS沖突是很大的一個(gè)問題。我們期望通過技術(shù)手段，能夠根據(jù)當(dāng)前使用的模塊，加載和卸載CSS。

跨頁(yè)面共享數(shù)據(jù)

由于涉及到iframe兼容舊有模塊，我們無(wú)可避免，需要考慮跨窗口的頁(yè)面共享。

公共模塊

當(dāng)一個(gè)團(tuán)隊(duì)的模塊較多時(shí)，就會(huì)有一些公共的東西被抽取出來(lái)，這個(gè)過程，框架是無(wú)法知道的，所以這個(gè)時(shí)候，我們就需要考慮支持公共模塊。（模塊之間也有依賴關(guān)系）

3、實(shí)現(xiàn)

基于以上的一些思考，我們首先需要實(shí)現(xiàn)一個(gè)基礎(chǔ)的平臺(tái)網(wǎng)站，這個(gè)沒什么難度，直接用 Angular 實(shí)現(xiàn)即可。有了這一套東西，我們的登錄注銷，基本的菜單權(quán)限管理，也就實(shí)現(xiàn)了。