資訊專欄INFORMATION COLUMN
項目地址
什么是 PuzzlePuzzle 是基于 Vue 和 Webpack4 實現(xiàn)的一種項目結(jié)構(gòu)；業(yè)務(wù)模塊可以像拼圖一樣與架構(gòu)模塊組合，形成不同的系統(tǒng)，而這一切都是可以在生產(chǎn)環(huán)境熱插拔的；這意味著你可以隨時向你的系統(tǒng)添加新的功能模塊，甚至改版整個系統(tǒng)，而不需要全量替換整個項目。
此外當(dāng)多個項目使用此架構(gòu)開發(fā)，即使模塊是由不同的項目打包出來的，也可以在生成環(huán)境進行快速組合，模塊可以非常簡單的進行復(fù)用。
特點核心：支持生產(chǎn)環(huán)境模塊熱插拔
支持業(yè)務(wù)模塊的靈活組合
基座作為基座模塊，也支持多個并存（這意味著你可以很輕松的進行灰度測試）
如何做到的將基座/業(yè)務(wù)模塊以umd模塊的方式用 webpack 打包出來
通過 LoadJS 對這些模塊進行掛載，會在 window 對象上附加該模塊對象
通過動態(tài)路由的方式將該對象加載到架構(gòu)中
運行項目 開發(fā)環(huán)境安裝依賴
npm install
構(gòu)建第三方依賴
npm run dll
運行
npm start生產(chǎn)環(huán)境
安裝依賴
npm install
構(gòu)建第三方依賴
npm run dll
構(gòu)建，在這步你可以選擇需要打包的基座模塊和業(yè)務(wù)模塊方便進行靈活組合
npm run build熱插拔相關(guān)
前端項目根據(jù)后端菜單請求進行模塊加載，如本項目中后端請求返回格式為（數(shù)據(jù)來自阿里云）：
[
{
id: "elastic",
name: "彈性計算",
leaf: false,
children: [
{
id: "ecs",
name: "云服務(wù)器 ECS",
leaf: true,
page: "/ecs",
puzzle: "elastic"
},
// ...
],
icon: "aperture",
puzzle: "elastic"
},
{
id: "database",
name: "數(shù)據(jù)庫",
leaf: false,
children: [
// ...
],
icon: "aperture",
puzzle: "database"
},
// ...
]
規(guī)定以第一級目錄為模塊目錄（這里看自己的需求可以對項目進行修改）
固模塊 ID 為 elastic、database 等，系統(tǒng)會在生產(chǎn)環(huán)境對所有子系統(tǒng)的入口文件進行請求，嘗試加載模塊，并生成路由；
所以通過不同用戶的不同業(yè)務(wù)模塊返回結(jié)果，可以進行不同模塊的加載，從而進行權(quán)限控制；
同理通過不同用戶的不同基座模塊返回結(jié)果，可以進行不同基座的加載，從而進行灰度測試等操作（目前系統(tǒng)所用基座是寫在public/config.js中，固此條僅作參考，項目本身可以自由發(fā)揮）；
多帶帶打包架構(gòu)npm run core多帶帶打包基座模塊
npm run frame --name="xxx"多帶帶打包業(yè)務(wù)模塊
npm run puzzle --name="xxx"
通過上述操作打包出的模塊，可以直接新增到生產(chǎn)環(huán)境或者替換生產(chǎn)環(huán)境對應(yīng)應(yīng)模塊
代碼結(jié)構(gòu) 開發(fā)環(huán)境結(jié)構(gòu) config此文件夾內(nèi)包含webpack所有打包配置文件
publicconfig.js：項目配置，用于生產(chǎn)環(huán)境配置
index.html：HTML 模版
src -> core架構(gòu)代碼
src -> frames基座模塊代碼，多個基座模塊并列放置
src -> puzzles業(yè)務(wù)模塊代碼，多個業(yè)務(wù)模塊并列放置
static主要用于放置靜態(tài)資源，將會直接復(fù)制到生產(chǎn)環(huán)境static文件夾
static -> dll由npm run dll生成的第三方庫和公共代碼等
生產(chǎn)環(huán)境結(jié)構(gòu)生產(chǎn)環(huán)境代碼按照一定結(jié)構(gòu)放置，可以自由升級替換對應(yīng)模塊
core由 npm run core 生成的架構(gòu)代碼
frames由 npm run frame 生成的基座模塊代碼
puzzles由 npm run puzzle 生成的業(yè)務(wù)模塊代碼
static靜態(tài)資源，包含打包生成的第三方庫和公共代碼等
PS此架構(gòu)僅作為日常工作的一個總結(jié)，具體業(yè)務(wù)場景，可以進行修改，基座模塊等可以進行自由發(fā)揮；業(yè)務(wù)模塊返回的信息也可以按照需求增加；只要各個模塊遵循一定標(biāo)準(zhǔn)，并在core中進行統(tǒng)一處理，均可以達到可插拔的效果。
具體可以看項目代碼，方便的話可以給個star 項目地址
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104369.html
摘要：本文仍以該實例為例，探討該自定義通信協(xié)議的具體工作流程，以及如何以注冊的形式靈活插拔通信消息對象。進行二進制數(shù)據(jù)幀的解碼操作時，數(shù)據(jù)幀中已包含了消息的功能位，據(jù)此可獲取相應(yīng)的編解碼器，而后可以對該數(shù)據(jù)幀進行解析，生成相應(yīng)的消息對象。 本文為該系列的第三篇文章，設(shè)計需求為：服務(wù)端程序和眾多客戶端程序通過 TCP 協(xié)議進行通信，通信雙方需通信的消息種類眾多。上一篇文章以一個具體的需求為例，...
摘要：比特幣和以太幣屬于一類區(qū)塊鏈，我們將其歸類為公共無許可的區(qū)塊鏈技術(shù)。例如，在單個企業(yè)中部署時，或由受信任的權(quán)威機構(gòu)運作，完全拜占庭容錯的共識可能被認為是不必要的，并且對性能和吞吐量造成過度的拖累。 介紹 一般而言，區(qū)塊鏈?zhǔn)且粋€不可變的交易分類賬，維護在一個分布式對等節(jié)點網(wǎng)絡(luò)中。這些節(jié)點通過應(yīng)用已經(jīng)由共識協(xié)議驗證的交易來維護分類帳的副本，該交易被分組為包括將每個塊綁定到前一個塊的散列的塊...
摘要：而實際兩者之間的通信使用的是基于的自定義二進制數(shù)據(jù)幀，對象與數(shù)據(jù)幀之間需進行轉(zhuǎn)換。該類實現(xiàn)了編碼解碼方法，故可對消息對象進行編碼或?qū)?shù)據(jù)幀進行解碼。該類的靜態(tài)方法可通過指定功能消息對象生成相應(yīng)的回復(fù)對象。 本文為該系列的第二篇文章，設(shè)計需求為：服務(wù)端程序和眾多客戶端程序通過 TCP 協(xié)議進行通信，通信雙方需通信的消息種類眾多。上一篇文章詳細描述了該通信協(xié)議的二進制數(shù)據(jù)幀格式以及基本 J...
摘要：基本消息對象的設(shè)計消息對象的設(shè)計主要由兩部分組成特定數(shù)據(jù)幀對應(yīng)的特定消息對象。該類包含上節(jié)數(shù)據(jù)幀主幀及子幀的所有公共信息，僅僅未包含子幀中的數(shù)據(jù)體信息，該需求由基本消息對象的子類實現(xiàn)。 開發(fā)工程中，有一個常見的需求：服務(wù)端程序和多個客戶端程序通過 TCP 協(xié)議進行通信，通信雙方需通信的消息種類眾多，并且客戶端的數(shù)量可能有數(shù)萬個。為此，雙方需要約定盡可能豐富、靈活的數(shù)據(jù)幀「數(shù)據(jù)包」協(xié)議，...
閱讀 3680·2021-11-22 09:34
閱讀 3216·2021-11-15 11:38
閱讀 3146·2021-10-27 14:16
閱讀 1297·2021-10-18 13:35
閱讀 2456·2021-09-30 09:48
閱讀 3464·2021-09-29 09:34
閱讀 1733·2019-08-30 15:54
閱讀 1849·2019-08-26 11:57
