20181115-程式-設計具有新欄位Mapping的架構設計邏輯

(目標設計架構結果圖)

設計需求背景：

*

當從資料庫取得的Table 欄位資訊，在應用至程式開發上，也許需將它「重命名」為具有意義的「新命名」(滿足命名規則)。

因為這樣，在現行的功能下，我想要加上這樣的功能，且「不能設計太復雜」 XDDD。

而這次的處理，很多技術的問題，在於前端Json Array 的處理，太多技術細節的應用都需上網查詢如何用？

因此，也將這樣的資訊Log 下來。

*

主要就是「原欄位名稱」，具有個地方可以修正，讓它可以 Map 至新欄位資訊。

這樣的好處，是在產生 程式碼時，都可以有 一致性 的命名。而不會受限於於原本的資料表 Naming。

設計需求概念-Column Mapping

這邊，就將技術需求面，做個整理描述，方便未來可以 回味：

*

1.  對應的資料儲存，直接以Json格式儲存即可。

2.  當它在選擇 各類Table時，它的欄位對應清單，就會一直做累加的動作。 且已存在的名稱，就 不重覆 新增至清單車 (以便一致的命名規則)。

3. 當它選擇到「A Table 」時，欄位Map清單中，與A Table 相關的欄位會「自動」排序在最上面。  (這需求超棒的！)

    (超級 友善 的操作動線 !，方便針對 A Table 的欄位做Mapping  )

4. 取得 & 儲存時機點：在 Load Database時 取得Mapping 清單； 在 Generate時 將現在的Mapping 清單 儲存。

技術面的參考資源彙整：

1.  Javascript  Array 上的相關應用：  超完整內容&都有範例  (https://mzl.la/2OKVDpU)。

     --應用到：array.splice (拼接)/ array.slice(0) (複製概念) / Array.reverse()(反轉) / Array.find(func) (找到滿足之Element) 

        Array.some(func) (檢查是否存在?)

技術面的開發過程：

預期的JSON儲存格式：

a.   JSON資料的初始字串為「[]」才是表示Array，(而示是「{ }」代表)，而在後續的應用上，才會正確。

b.   資料目標，在Client去應用處理 ，Server端只負責「取全部」「存全部」即可。 (也就是這樣，我在Client 端有大量的Array 處理應用~)

最終結果的JS程式  (Angular框架下)：(截錄最重要的Function)

a.  這是傳入所取得的Table Column ，然後依判斷，再決定 新增 / 或是「搬移」現有的 最終程式碼。

*

再來就依續說明，程式設計原因：

Array 的 Copy 及 反轉(Reverse)：

a.  為了不影響現在的Array，所以要先Copy一份出來做處理。

b.  因為 要將有滿足的ColumnName，在處理過程中都填入至「第一筆」，所以我將Array反轉處理。 (邏輯思考)

找到滿足條件的Element  (再加上取得它的Index位置)

a.  Array 下 Find()的應用，它是傳入Function的，且還可以用 Lambda的語法寫 (javascript 竟可跟C#超像)

b.  因為無法直接取得該Element所在的Index，所以透過Find的過程中，將Index記錄下來。

若找到Element，開始做排序動作，將它「搬移」至最上層

a.  這需求：要達到將原Array下的Element搬移至最上頭，所用的解決方式：splice 處理。先移除/再新增至第一筆。

b.  splice的使用概念：目標位置，要移除幾個 、要加入的元素 (也可以是Array)。

結論心得：

*

針對前端Array 的這類 較細的應用，實在是要花時間在尋找「解答」。

不過，最重要的是「怎麼設計出好的需求應用」。

*

現在要學習，記錄下「技術文章」內容，雖然有時是較細的技術，但是後續要可以看得懂我原本的「思考流程」概念。

再加油了。

(THE END)