[發明專利]可視化界面組件熱部署方法和客戶端、服務端

在審

• 申請號: 201911157083.4
• 申請日: 2019-11-22
• 公開（公告）號: CN111078231A
• 公開（公告）日: 2020-04-28
• 發明（設計）人: 李權;陳英杰;姚煒
• 申請（專利權）人: 浙江藍卓工業互聯網信息技術有限公司
• 主分類號: G06F8/60
• 分類號: G06F8/60;G06F8/41;H04L29/08
• 代理公司: 杭州華鼎知識產權代理事務所(普通合伙) 33217
• 代理人: 黃利群

1.一種可視化界面組件熱部署方法，應用于工業互聯網，其特征在于，包括如下步驟：

步驟101，客戶端編寫定制開發的React組件；

步驟102，客戶端將定制開發的React組件上傳至服務端，所述React組件經靜態解析得到源文件和編譯文件后保存在服務端；

步驟103，客戶端從服務端下載編譯文件并動態解析；

步驟104，客戶端本地執行所述編譯文件，將React組件注冊到運行環境中，渲染在瀏覽器。

2.根據權利要求1所述的可視化界面組件熱部署方法，其特征在于，所述步驟102中，所述React組件上傳至服務端后在服務端靜態解析得到源文件和編譯文件；或者，所述React組件在客戶端靜態解析得到源文件和編譯文件后，再上傳至服務端。

3.根據權利要求2所述的可視化界面組件熱部署方法，其特征在于，所述靜態解析選擇Babel作為編譯器。

4.根據權利要求1至3任意一項所述的可視化界面組件熱部署方法，其特征在于，所述React組件包含依賴文件；

步驟102還包括：將依賴文件上傳至服務器，所述依賴文件保存在服務器；

步驟103還包括：客戶端從服務端下載依賴文件并執行。

5.根據權利要求4所述的可視化界面組件熱部署方法，其特征在于，所述步驟102中，依賴文件保存在服務器時，依賴文件的保存采用UMD的輸出規范；所述步驟103中，從服務端下載編譯文件并動態解析時遇到編譯文件中帶有ES6import語句時，則從服務端下載與該語句對應的依賴文件，直到所有依賴文件都被下載并執行完成。

6.一種客戶端，應用于工業互聯網的可視化界面組件熱部署，其特征在于，包括：

組件編寫模塊，用于編寫定制開發的React組件；

上傳模塊，用于將定制開發的React組件上傳至服務端，所述React組件經靜態解析得到源文件和編譯文件后保存在服務端；

下載模塊，用于從服務端下載編譯文件并動態解析；

執行渲染模塊，用于本地執行所述編譯文件，將React組件注冊到運行環境中，渲染在瀏覽器頁面。

7.根據權利要求6所述的客戶端，其特征在于，所述React組件包含依賴文件；

上傳模塊還用于將依賴文件上傳至服務器，所述依賴文件在服務器保存；

下載模塊還用于客戶端從服務端下載依賴文件并執行。

8.根據權利要求7所述的客戶端，其特征在于，所述依賴文件保存在服務器時，依賴文件的保存采用UMD的輸出規范；所述下載模塊從服務端下載編譯文件并動態解析時遇到編譯文件中帶有ES6 import語句時，則從服務端下載與該語句對應的依賴文件，直到所有依賴文件都被下載并執行完成。

9.一種服務端，應用于工業互聯網的可視化界面組件熱部署，其特征在于，包括：

組件獲取模塊，用于獲取客戶端定制開發的React組件；

靜態解析模塊，用于對獲取的React組件進行靜態解析后得到源文件和編譯文件，所述源文件和編譯文件作為靜態資源保存；

發送模塊，用于接收到客戶端下載請求后將編譯文件發送至客戶端。

10.根據權利要求9所述的服務端，其特征在于，所述服務端的靜態解析選擇Babel作為編譯器。