typescript - ควรใช้แบบไหนดีกว่า ระหว่าง mixin หรือ static method สำหรับจัดการโค้ดยาว

ฉันมีคลาสซึ่งมีโค้ดยาว และตอนนี้ฉันต้องการจัดระเบียบโค้ดเหล่านั้นให้อยู่ในไฟล์แยก

ฉันมีไอเดีย 2 อย่าง คือ การใช้ Mixin และการใช้เมธอดสแตติก

ตัวอย่างเช่น,

class myController {
    routeSubView(type: SubViewType, params: any) {
        swtich(type) {
            case SubViewType.A: 
                this._showA(params);
                break;
            case SubViewType.B: 
                this._showB(params);
                break;
            case SubViewType.C: 
                this._showC(params);
                break;
            case SubViewType.D: 
                this._showD(params);
                break;
            // ... a lot more
        }
    }

    private _showA() {
        // initialize view and render
    }

    private _showB() {
        // initialize view and render
    }

    private _showC() {
        // initialize view and render
    }

    private _showD() {
        // initialize view and render
    }

    // ... a lot more
}

#idea1 ) ย้ายโค้ดสร้างมุมมองย่อยไปยังคลาสแบบสแตติก

### sub_views.ts
class SubViews {
    static showA(params: any) {
        // initialize view and render
    }
    static showB(params: any) {
        // initialize view and render
    }
}

### my_controller.ts
import { SubViews } from './sub_views';
class myController {
    routeSubView(type: SubViewType, params: any) {
        swtich(type) {
            case SubViewType.A: 
                SubViews::showA();
                break;
            case SubViewType.B: 
                SubViews::showB();
                break;
            case SubViewType.C: 
                SubViews::showC();
                break;
            case SubViewType.D: 
                SubViews::showD();
                break;
            // ... a lot more
        }
    }
}

#idea2) การใช้ Mixin

### mixin.ts
export interface ISubviews {
    _showA(params: any): any;
    _showB(params: any): any;
    _showC(params: any): any;
    _showD(params: any): any;
}

export function _showA(param: any){
    // initialize view and render
}
export function _showB(param: any){
    // initialize view and render
}
export function _showC(param: any){
    // initialize view and render
}
export function _showD(param: any){
    // initialize view and render
}

### my_controller.ts

import * as { Mixin } from './mixin';

class myController implement Mixin.ISubviews {
    _showA(params: any): any;
    _showB(params: any): any;
    _showC(params: any): any;
    _showD(params: any): any;

    /// ...
}

Cocktail.mixin(myController, Mixin);

ไอเดียไหนดีกว่ากัน? หรือมีไอเดียที่ดีกว่าหรือไม่? กรุณาให้คำแนะนำฉันด้วย

คำตอบ #1

Javascript และ Typescript เป็นภาษาที่ใช้ต้นแบบ ซึ่งหมายความว่าพวกมันแยกรูปแบบ OO แบบคลาสสิกออกเป็นการฝัง การมอบหมาย และการสร้าง ซึ่งช่วยให้คุณสามารถแสดงแนวคิดที่ทรงพลังบางอย่างที่ไม่มีอยู่ในรูปแบบคลาสสิก ตัวอย่างแรกของคุณใกล้เคียงกับวิธีแก้ปัญหาใน OO แบบคลาสสิกมากกว่า ที่คุณให้ความสำคัญกับการประกอบมากกว่าการสืบทอด

ในภาษาที่ใช้ต้นแบบ การรวมยังคงเป็นที่ต้องการมากกว่าการสืบทอด แต่คุณสามารถแสดงมันได้โดยตรงมากขึ้น เช่น ผ่านมิกซิน (แนวคิดการฝัง) ผมคิดว่าคุณน่าจะควรเลือกมิกซินเสมอแทนที่จะรวมสมาชิก

หากคุณต้องการเจาะลึกเข้าไปในแนวคิดเหล่านี้ ให้ดูการบรรยายของ Eric Elliot เกี่ยวกับสามประเภทของการสืบทอดแบบ prototype และหากคุณต้องการเจาะลึกกว่านั้น ให้ดู A Theory of Objects ของ Luca Cardelli