圖形化編程的代碼轉換方法、裝置、電子設備及存儲介質與流程
2023-09-21 16:12:32 1
1.本發明涉及圖形化編程技術領域，尤其涉及一種圖形化編程的代碼轉換方法、裝置、電子設備及存儲介質。
背景技術：
2.在眾多類似scratch、blockly的圖形化編程應用中，都包括在圖形化積木塊拼搭編程後，將積木塊程序轉換為代碼程序的過程。
3.然而將圖形化積木程序轉換為代碼程序是一次性將整個工作區所有積木塊轉換為代碼文本數據，如果一個積木塊轉換出來的代碼片段很長，且不連續時，轉換後的代碼文本數據會出現散落分布的情況，由於從圖形化積木轉換成的代碼文本的文本樣式都相同，用戶無法區分新、舊代碼。此時，由於圖形化積木轉換的代碼文本的可讀性差，不利於用戶通過圖形化編程應用學習編程，圖形化編程應用將無法實現降低編程學習門檻的效果。
4.因此，亟需一種能夠提升用戶可閱讀性，方便用戶通過圖形化編程應用學習編程的代碼轉換方案。
技術實現要素：
5.為了解決上述技術問題，本技術實施例提供了一種圖形化編程的代碼轉換方法、裝置、電子設備及存儲介質，具體方案如下：
6.第一方面，本技術實施例提供了一種圖形化編程的代碼轉換方法，所述方法包括：
7.獲取待轉換的積木塊；
8.對所述積木塊進行程序轉換，以得到第一代碼文本；
9.比較所述第一代碼文本與歷史代碼文本，篩選得到第二代碼文本，其中，所述第二代碼文本為所述第一代碼文本中的部分代碼文本；
10.在預設工作區按照默認顏色顯示除第二代碼文本外的第一代碼文本，按照目標顏色顯示所述第二代碼文本。
11.根據本技術實施例的一種具體實施方式，所述「比較所述第一代碼文本與歷史代碼文本」之前，所述方法還包括：
12.檢測預設緩存中是否包括所述歷史代碼文本；
13.若包括所述歷史代碼文本，提取所述歷史代碼文本，並跳轉執行所述「比較所述第一代碼文本與歷史代碼文本」的步驟；
14.若不包括所述歷史代碼文本，將全部第一代碼文本存儲至所述預設緩存中，並在所述預設工作區按照目標顏色顯示全部第一代碼文本。
15.根據本技術實施例的一種具體實施方式，所述「比較所述第一代碼文本與歷史代碼文本，篩選得到第二代碼文本」，包括：
16.將所述第一代碼文本的每一行代碼轉換為第一列表元素，並結合全部第一列表元素生成第一列表；
17.將所述歷史代碼文本的每一行代碼轉換為第二列表元素，並結合全部第二列表元素生成第二列表；
18.在所述第二列表中比對每一第一列表元素，篩選出與各第二列表元素均不相同的目標列表元素；
19.結合全部目標列表元素得到所述第二代碼文本。
20.根據本技術實施例的一種具體實施方式，所述目標列表元素包括新增列表元素和修改列表元素，所述「在所述第二列表中比對每一第一列表元素，篩選出與各第二列表元素均不相同的目標列表元素」，包括：
21.在所述第二列表中比對每一第一列表元素，篩選出與各第二列表元素完全不同的新增列表元素以及與各第二列表元素部分不同的修改列表元素。
22.根據本技術實施例的一種具體實施方式，所述第二代碼文本包括新增代碼文本和修改代碼文本，所述「按照目標顏色顯示所述第二代碼文本」，包括：
23.按照第一目標顏色顯示所述新增代碼文本，按照第二目標顏色顯示所述修改代碼文本。
24.第二方面，本技術實施例提供了一種圖形化編程的代碼轉換裝置，所述裝置包括：
25.獲取模塊，用於獲取待轉換的積木塊；
26.轉換模塊，用於對所述積木塊進行程序轉換，以得到第一代碼文本；
27.比較模塊，用於比較所述第一代碼文本與歷史代碼文本，篩選得到第二代碼文本，其中，所述第二代碼文本為所述第一代碼文本中的部分代碼文本；
28.展示模塊，用於在預設工作區按照默認顏色顯示除第二代碼文本外的第一代碼文本，按照目標顏色顯示所述第二代碼文本。
29.根據本技術實施例的一種具體實施方式，所述裝置還包括：
30.檢測模塊，用於檢測預設緩存中是否包括所述歷史代碼文本；
31.第一執行模塊，用於若包括所述歷史代碼文本，提取所述歷史代碼文本，並跳轉所述比較模塊；
32.第二執行模塊，用於若不包括所述歷史代碼文本，將全部第一代碼文本存儲至所述預設緩存中，並在所述預設工作區按照目標顏色顯示全部第一代碼文本。
33.根據本技術實施例的一種具體實施方式，所述比較模塊，具體用於將所述第一代碼文本的每一行代碼轉換為第一列表元素，並結合全部第一列表元素生成第一列表；將所述歷史代碼文本的每一行代碼轉換為第二列表元素，並結合全部第二列表元素生成第二列表；在所述第二列表中比對每一第一列表元素，篩選出與各第二列表元素均不相同的目標列表元素；結合全部目標列表元素得到所述第二代碼文本。
34.第三方面，本技術實施例提供了一種電子設備，所述電子設備包括處理器和存儲器，所述存儲器存儲有電腦程式，所述電腦程式在所述處理器上運行時執行第一方面及第一方面任一實施方式所述的圖形化編程的代碼轉換方法。
35.第四方面，本技術實施例提供了一種計算機可讀存儲介質，所述計算機可讀存儲介質中存儲有電腦程式，所述電腦程式在處理器上運行時執行第一方面及第一方面任一實施方式所述的圖形化編程的代碼轉換方法。
36.本技術實施例提供了一種圖形化編程的代碼轉換方法、裝置、電子設備及存儲介
質，所述方法包括：獲取待轉換的積木塊；對所述積木塊進行程序轉換，以得到第一代碼文本；比較所述第一代碼文本與歷史代碼文本，篩選得到第二代碼文本，其中，所述第二代碼文本為所述第一代碼文本中的部分代碼文本；在預設工作區按照默認顏色顯示除第二代碼文本外的第一代碼文本，按照目標顏色顯示所述第二代碼文本。本發明通過區別顯示不同於歷史代碼文本的積木塊轉換代碼文本，能夠有效區分新、舊代碼，在提升代碼文本可讀性的同時，提升圖形化編程的準確率。
附圖說明
37.為了更清楚地說明本發明的技術方案，下面將對實施例中所需要使用的附圖作簡單地介紹，應當理解，以下附圖僅示出了本發明的某些實施例，因此不應被看作是對本發明保護範圍的限定。在各個附圖中，類似的構成部分採用類似的編號。
38.圖1示出了本技術實施例提供的一種圖形化編程的代碼轉換方法的方法流程示意圖；
39.圖2示出了本技術實施例提供的一種圖形化編程的代碼轉換方法的應用場景示意圖；
40.圖3示出了本技術實施例提供的一種圖形化編程的代碼轉換裝置的裝置模塊示意圖。
具體實施方式
41.下面將結合本發明實施例中附圖，對本發明實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發明一部分實施例，而不是全部的實施例。
42.通常在此處附圖中描述和示出的本發明實施例的組件可以以各種不同的配置來布置和設計。因此，以下對在附圖中提供的本發明的實施例的詳細描述並非旨在限制要求保護的本發明的範圍，而是僅僅表示本發明的選定實施例。基於本發明的實施例，本領域技術人員在沒有做出創造性勞動的前提下所獲得的所有其他實施例，都屬於本發明保護的範圍。
43.在下文中，可在本發明的各種實施例中使用的術語「包括」、「具有」及其同源詞僅意在表示特定特徵、數字、步驟、操作、元件、組件或前述項的組合，並且不應被理解為首先排除一個或更多個其它特徵、數字、步驟、操作、元件、組件或前述項的組合的存在或增加一個或更多個特徵、數字、步驟、操作、元件、組件或前述項的組合的可能性。
44.此外，術語「第一」、「第二」、「第三」等僅用於區分描述，而不能理解為指示或暗示相對重要性。
45.除非另有限定，否則在這裡使用的所有術語(包括技術術語和科學術語)具有與本發明的各種實施例所屬領域普通技術人員通常理解的含義相同的含義。所述術語(諸如在一般使用的詞典中限定的術語)將被解釋為具有與在相關技術領域中的語境含義相同的含義並且將不被解釋為具有理想化的含義或過於正式的含義，除非在本發明的各種實施例中被清楚地限定。
46.參考圖1，為本技術實施例提供的一種圖形化編程的代碼轉換方法的方法流程示意圖，本技術實施例提供的圖形化編程的代碼轉換方法，如圖1所示，所述方法包括：
47.步驟s101，獲取待轉換的積木塊；
48.具體的，本實施例提出的圖形化編程的代碼轉換方法可以應用於任意一種使用積木塊進行圖形編程的軟體應用，所述積木塊為基於預設圖形封裝方法和預設圖形渲染方法所形成的積木塊程序，所述積木塊關聯有對應的代碼程序。
49.在具體實施過程中，所述積木塊的數量為至少1個，本實施例對積木塊的數量不作限定，可以根據實際應用場景中的編程需求進行自適應設置。
50.具體地，在首次獲取積木塊前，還需要對所述文本顯示區域中的變量數據進行初始化處理，以便於在進行圖形化編程時，不會被歷史編程記錄數據影響。
51.步驟s102，對所述積木塊進行程序轉換，以得到第一代碼文本；
52.在具體實施例中，通過各類圖形化編程應用的內置程序對所述積木塊進行程序轉換處理，此處不作具體限定。
53.所述第一代碼文本為所述積木塊關聯的完整代碼程序的顯示文本。
54.根據本技術實施例的一種具體實施方式，所述「比較所述第一代碼文本與歷史代碼文本」之前，所述方法還包括：
55.檢測預設緩存中是否包括所述歷史代碼文本；
56.若包括所述歷史代碼文本，提取所述歷史代碼文本，並跳轉執行所述「比較所述第一代碼文本與歷史代碼文本」的步驟；
57.若不包括所述歷史代碼文本，將全部第一代碼文本存儲至所述預設緩存中，並在所述預設工作區按照目標顏色顯示全部第一代碼文本。
58.在具體實施例中，通過緩存、資料庫或寄存器來存儲已將積木塊轉換為代碼文本的歷史代碼文本。
59.所述預設緩存可以為代碼顯示界面的緩存，用於存儲代碼顯示界面的代碼文本數據。
60.在提取所述第一代碼文本後，通過檢測預設緩存中是否包括歷史代碼文本，來判斷是否執行步驟s103。
61.具體地，若所述預設緩存中不包括任何歷史代碼文本，則將當前積木塊轉換的第一代碼文本存儲在所述預設緩存中，並更改所述第一代碼文本的描述行，以將所述第一代碼文本轉換為歷史代碼文本。
62.同時，在代碼顯示界面中以目標顏色顯示當前積木塊轉換的全部第一代碼文本，並結束此次代碼轉換進程。
63.需知的，在開始轉換下一個積木塊時，先將當前第一代碼文本的顏色轉換為默認顏色，以表示當前第一代碼文本以轉換為歷史代碼文本。
64.具體的，所述目標顏色可以根據用戶使用情況進行自定義設置，此處不作限定。在本實施例中，所述目標顏色可以為如圖2所示的綠色文本。
65.在實際應用過程中，基於目標顏色顯示的代碼文本也可以為高亮代碼文本。
66.步驟s103，比較所述第一代碼文本與歷史代碼文本，篩選得到第二代碼文本，其中，所述第二代碼文本為所述第一代碼文本中的部分代碼文本；
67.在具體實施例中，若預設緩存中包括歷史代碼文本，則基於積木塊轉換的第一代碼文本和歷史代碼文本進行比較篩選處理，以篩選出新增代碼文本和修改代碼文本。
68.具體地，所述第二代碼文本為新增代碼文本和修改代碼文本。
69.在實際應用過程中，刪除的代碼文本不會在代碼顯示區域進行顯示，因此，此處篩選第二代碼文本時，無需篩選刪除部分代碼。
70.在具體實施例中，所述第一代碼文本的文本數量大於或等於所述第二代碼文本的文本數量。
71.根據本技術實施例的一種具體實施方式，所述「比較所述第一代碼文本與歷史代碼文本，篩選得到第二代碼文本」，包括：
72.將所述第一代碼文本的每一行代碼轉換為第一列表元素，並結合全部第一列表元素生成第一列表；
73.將所述歷史代碼文本的每一行代碼轉換為第二列表元素，並結合全部第二列表元素生成第二列表；
74.在所述第二列表中比對每一第一列表元素，篩選出與各第二列表元素均不相同的目標列表元素；
75.結合全部目標列表元素得到所述第二代碼文本。
76.具體地，本實施例中的代碼文本的程式語言類型可以根據實際應用場景的需求以及圖形化編程應用的類型來自適應調整，本實施例對此不作限定。
77.舉例來說，若本實施例使用javascript程式語言的圖形化編程應用，則可以使用diff庫的diffarrays方法來比較所述第一代碼文本和所述歷史代碼文本。
78.在實際應用過程中，在從預設緩存中取出歷史代碼文本後，先將第一代碼文本和歷史代碼文本分別轉換為第一列表和第二列表，再通過比較第一列表和第二列表的方式，篩選出符合篩選需求的代碼列表，綜合最終代碼列表中的所有目標列表元素，則可以得到所述第二代碼文本。
79.具體地，所述第一列表中的第一列表元素表示一行第一代碼文本，所述第二列表中第二列表元素表示一行歷史代碼文本。
80.所述第一列表和所述第二列表也可以顯示為數組的格式，本實施例對此不作限定。
81.將代碼文本的各行代碼轉換為列表或數組的處理方式，能夠便於後續對每一行代碼進行遍歷、比較，能夠有效提升篩選處理的效率。
82.根據本技術實施例的一種具體實施方式，所述目標列表元素包括新增列表元素和修改列表元素，所述「在所述第二列表中比對每一第一列表元素，篩選出與各第二列表元素均不相同的目標列表元素」，包括：
83.在所述第二列表中比對每一第一列表元素，篩選出與各第二列表元素完全不同的新增列表元素以及與各第二列表元素部分不同的修改列表元素。
84.在實際應用過程中，需要篩選的代碼文本為新增代碼文本和修改代碼文本，因此，所述目標列表元素設置為新增列表元素和修改列表元素。
85.在具體實施例中，也可以篩選出刪除代碼元素，對應著刪除代碼文本，本實施例對此不作限定。
86.在篩選出相應的目標列表元素後，修改對應行代碼文本的行號，以標記目標列表元素的類別，便於後續代碼顯示區通過識別行號區分第二代碼文本。
87.步驟s104，在預設工作區按照默認顏色顯示除第二代碼文本外的第一代碼文本，按照目標顏色顯示所述第二代碼文本。
88.在具體實施過程中，在識別出相應的第二代碼文本後，更新預設緩存，並按照當前次代碼轉換過程的第一代碼文本和第二代碼文本的區分，顯示全部代碼文本。
89.所述預設工作區為代碼文本的顯示區域，如圖2所示，對「紅外接收並列印數據(raw)」積木塊進行代碼轉換後，可以得到以綠色顏色高亮顯示的積木塊代碼。
90.在實際應用過程中，默認顏色和目標顏色的具體顏色可以根據實際應用場景進行配置，此處不作限定。
91.根據本技術實施例的一種具體實施方式，所述第二代碼文本包括新增代碼文本和修改代碼文本，所述「按照目標顏色顯示所述第二代碼文本」，包括：
92.按照第一目標顏色顯示所述新增代碼文本，按照第二目標顏色顯示所述修改代碼文本。
93.在具體實施例中，還可以進一步以兩種不同的顏色來高亮顯示新增代碼文本和修改代碼文本。
94.在更新預設緩存後，通過圖形化編程應用中預設的ui組件模塊來對第二代碼文本進行渲染，以實現不同顏色的高亮顯示。
95.本實施例提供了一種圖形化編程的代碼轉換方法，通過劃分列表的方式識別出當前積木塊轉換的代碼文本中的新增代碼文本和修改代碼文本，在代碼顯示區域以不同顏色的高亮顯示來區分歷史代碼文本，從而能夠直觀的向用戶顯示修改部分，更加便於用戶在進行編程過程中明確編程的節點，有效提升了使用圖形化編程應用的編程準確率。另外，通過實時區分當前次積木塊轉換代碼文本的位置，能夠有效提升技術人員的編程效率。且圖形化編程應用通常用於降低用戶學習編程的門檻，通過本實施例的代碼轉換方法，能夠有效增加代碼文本的可讀性，提升用戶學習編程的效果。
96.參考圖3，為本技術實施例提供的一種圖形化編程的代碼轉換裝置300的裝置模塊示意圖，本技術實施例提供的圖形化編程的代碼轉換裝置300，如圖3所示，所述裝置包括：
97.獲取模塊301，用於獲取待轉換的積木塊；
98.轉換模塊302，用於對所述積木塊進行程序轉換，以得到第一代碼文本；
99.比較模塊303，用於比較所述第一代碼文本與歷史代碼文本，篩選得到第二代碼文本，其中，所述第二代碼文本為所述第一代碼文本中的部分代碼文本；
100.展示模塊304，用於在預設工作區按照默認顏色顯示除第二代碼文本外的第一代碼文本，按照目標顏色顯示所述第二代碼文本。
101.根據本技術實施例的一種具體實施方式，所述裝置還包括：
102.檢測模塊，用於檢測預設緩存中是否包括所述歷史代碼文本；
103.第一執行模塊，用於若包括所述歷史代碼文本，提取所述歷史代碼文本，並跳轉所述比較模塊；
104.第二執行模塊，用於若不包括所述歷史代碼文本，將全部第一代碼文本存儲至所述預設緩存中，並在所述預設工作區按照目標顏色顯示全部第一代碼文本。
105.根據本技術實施例的一種具體實施方式，所述比較模塊303，具體用於將所述第一代碼文本的每一行代碼轉換為第一列表元素，並結合全部第一列表元素生成第一列表；將
所述歷史代碼文本的每一行代碼轉換為第二列表元素，並結合全部第二列表元素生成第二列表；在所述第二列表中比對每一第一列表元素，篩選出與各第二列表元素均不相同的目標列表元素；結合全部目標列表元素得到所述第二代碼文本。
106.另外，本技術實施例還提供了一種電子設備，所述電子設備包括處理器和存儲器，所述存儲器存儲有電腦程式，所述電腦程式在所述處理器上運行時執行前述方法實施例中的圖形化編程的代碼轉換方法。
107.本技術實施例還提供了一種計算機可讀存儲介質，所述計算機可讀存儲介質中存儲有電腦程式，所述電腦程式在處理器上運行時執行前述方法實施例中的圖形化編程的代碼轉換方法。
108.另外，上述實施例中提到的圖形化編程的代碼轉換裝置、電子設備及計算機可讀存儲介質的具體實施過程，可以參見上述方法實施例的具體實施過程，在此不再一一贅述。
109.在本技術所提供的幾個實施例中，應該理解到，所揭露的裝置和方法，也可以通過其它的方式實現。以上所描述的裝置實施例僅僅是示意性的，例如，附圖中的流程圖和結構圖顯示了根據本發明的多個實施例的裝置、方法和電腦程式產品的可能實現的體系架構、功能和操作。在這點上，流程圖或框圖中的每個方框可以代表一個模塊、程序段或代碼的一部分，所述模塊、程序段或代碼的一部分包含一個或多個用於實現規定的邏輯功能的可執行指令。也應當注意，在作為替換的實現方式中，方框中所標註的功能也可以以不同於附圖中所標註的順序發生。例如，兩個連續的方框實際上可以基本並行地執行，它們有時也可以按相反的順序執行，這依所涉及的功能而定。也要注意的是，結構圖和/或流程圖中的每個方框、以及結構圖和/或流程圖中的方框的組合，可以用執行規定的功能或動作的專用的基於硬體的系統來實現，或者可以用專用硬體與計算機指令的組合來實現。
110.另外，在本發明各個實施例中的各功能模塊或單元可以集成在一起形成一個獨立的部分，也可以是各個模塊單獨存在，也可以兩個或更多個模塊集成形成一個獨立的部分。
111.所述功能如果以軟體功能模塊的形式實現並作為獨立的產品銷售或使用時，可以存儲在一個計算機可讀取存儲介質中。基於這樣的理解，本發明的技術方案本質上或者說對現有技術做出貢獻的部分或者該技術方案的部分可以以軟體產品的形式體現出來，該計算機軟體產品存儲在一個存儲介質中，包括若干指令用以使得一臺計算機設備(可以是智慧型手機、個人計算機、伺服器、或者網絡設備等)執行本發明各個實施例所述方法的全部或部分步驟。而前述的存儲介質包括：u盤、移動硬碟、只讀存儲器(rom，read-only memory)、隨機存取存儲器(ram，random access memory)、磁碟或者光碟等各種可以存儲程序代碼的介質。
112.以上所述，僅為本發明的具體實施方式，但本發明的保護範圍並不局限於此，任何熟悉本技術領域的技術人員在本發明揭露的技術範圍內，可輕易想到變化或替換，都應涵蓋在本發明的保護範圍之內。