JS介面 (類作模仿) – JS 是沒有Interface的 (Interface 這 Keyword), 但可以用class 來類作模仿Interface 的功能.
運用介面的好處
- 把相以的Class, 借建立框架, 既使內裏Logic不同, 也可以統一輸出的Method, 一方面令使用者容易記得, 一方法令使用者容易調用. 例如JS多數都是使用在版面中, 如果我們對不同自定Component都建立一個普遍性的介面, 可令協作更為方便.
- 加上Looping, 可使編程更快. 識如果要在一個Display List內有不同板面的GUI Item, 用for looping就可一之過把它們改變, 如一張Invoice內, User按下Discount Button後, 用For looping 來處理可一次過進行加減.
- 在工作實務中， 不同的System， Database， Rest API， Datatable，Class都可能會不同。統一介面, 可以使多個受方容易用, 即使日後供應方的Logic變了, 也因介面相同, 而不會對受方有影响. 如果你想j寫一個Package, 放上Github, 打算長期維護, 過程中就會有很多的改動, 沒有統一的介面, 受方會因你的改動而大受影响, 可能你改變Code一次, 他就要大改一次.
運用的方法
- 先了解現時需要做甚麼事, 是否有一個需要引用多個不同Class(如可能板面)的時候.
- 理解是否可用同一Set的Parameter就可引用到不同的Class. 若不可, 可能要做一些Conversion.
- 運用介面， 可以把引用的Class 加進一個出口 (method), 運用CLASS 內的LOGIC再劃一導出.
- 有需要時, 用looping實作
GUI實作的方法
- 在GUI的設計之中, 先相好Layout, Control, 再了解User Action會如何對它們產生變化. 有沒有一些User Action (如Validation Button)時所有其他的板面元件也需要Update.
- 其他的還有會不會有一些常用的Control, logic等也會用到一些普遍的Method.
以下會舉一個簡單的生活例子 （Inherit 繼承）, 及一個工作上的例子 （Interface 介面), 以供各位參考:
| Interface: |
| class AccountList{ Calculation(){} LoadItemsFromDB(){}} |
| Implements Class: |
| class PurchasingList extends AccountList{ constructor(){ super(); this.items = [];} LoadItemsFromDB() { //******* } Calculation(){ var amount = 0; amount -= this.CalOrderCost(); amount -= this.CalOrderDeliveryCost(); return amount; } CalOrderCost(){ //******* } CalOrderDeliveryCost(){ //******* } } |
| Abstract Class Master: |
| accountLists = [new PurchasingList(), new InventoryList(), new SellingList()]; accountLists .forEthisach(function(item) { item.LoadItemsFromDB(); }); double sum = 0; accountLists .forEach(function(item){ sum += item.Calculation(); }); Console.WriteLine(“Sum: ” + sum); |
| 注意事項 |
| 1) ExpenitureReport.Run 是入口首先把幾個 PurchasingList, SellingList, ExpenitureReport 的Instance放入Ｌist<AccountList>內 2) 用foreach 運行LoadItemsFromDB得到Data 3) 用foreach 運行Calculation得到總金頧Sum |
| Interface: |
| class ImageFilter{ Process(){} LoadPixels(){} } |
| Implements Class: |
| class Blur extends ImageFilter{ FindPixelAverage(){ } FindNeignbour(){ } Process(){ this.FindPixelAverage(); this.FindNeignbour(); } LoadPixels(){ //************* } } |
| Implements Class: |
| class Sharpen extends ImageFilter{ GetEdge(){ } Blacken(){ } Process(){ this.GetEdge(); this.Blacken(); } LoadPixels(){ //************* } } |
| Abstract Class Master: |
| function SetPixels(filters) { //****** } filters = [new Blur(), new Sharpen()]; filters.forEach(function(filter){ filter.LoadPixels(); filter.Process(); }); SetPixels(filters); |
| 注意事項 |
| 1) ImageProcesser.Run 是入口首先把幾個 Blur, Sharpen 的 Instance 放入 List<ImageFilter>內 2) 用 foreach 運行 LoadPixel 把Pixel放入Filter 3) 用foreach 運行 Process 得到 計算 4) 最後SetPixels to Image. |
JS 類別 – Class, Method, Inheritance, Interface的基礎用法
JS 繼承 – Inheritance 繼承 的基本用法 – 加入 for loop, if, Array, Collection的例子