Lightning Web Component (LWC) Class Definition Syntax

Question

Lightning Web Components (LWC) ประกอบด้วยไฟล์หลายไฟล์ในกลุ่ม สำหรับคำถามนี้ฉันกำลังมุ่งเน้นไปที่ไฟล์. js หลักของคอมโพเนนต์ที่ใช้คลาส js ของคอมโพเนนต์ของเว็บ

รหัสตัวอย่าง:

import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import doSomething from '@salesforce/apex/MyApexClass.doSomething';

export default class MyLWC extends NavigationMixin(LightningElement) {
    @api a;
    @api b;

    download() {
        let that = this;
        doSomething({
            param1: this.a,
            param2: this.b
        })
        .then((result) => {
            that.navigateToWebPage(result);
        })
        .catch((error) =>{
            console.log(`Error occured ${error}`);
        });
    }

    navigateToWebPage(url) {
        // Navigate to a URL
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: url
            }
        },
        false // Replaces the current page in your browser history with the URL
      );
    }
}

มีสองสิ่งที่ฉันไม่เข้าใจที่นี่:

• extends NavigationMixin(LightningElement)ไวยากรณ์ - ทำไมต้องวงเล็บ? คลาส js สามารถขยายคลาสพาเรนต์มากกว่าหนึ่งคลาสได้หรือไม่
• this[NavigationMixin.Navigate]- การตัดสินด้วยรหัสดูเหมือนว่า'this'ได้กำหนดฟังก์ชัน Navigate (และฟังก์ชันอื่น ๆ ที่อาจเกิดขึ้นจาก NavigateMixin?) ให้เป็นตัวต้นแบบ ทำไมเราไม่ใช้ NavigationMixin เช่นส่วนประกอบที่นำเข้าอื่น ๆ - เพียงแค่การเรียกฟังก์ชั่นของพวกเขาโดยตรงไม่ผ่านthis?

ใครสามารถอธิบายสิ่งที่เกิดขึ้นจริงเมื่อใช้ส่วนขยาย / การสืบทอดคลาสประเภทนี้และถ้าไวยากรณ์ที่ใช้ที่นี่เป็นมาตรฐานจากโลกส่วนประกอบของเว็บหรือสิ่งที่เฉพาะเจาะจงสำหรับ LWC

ขอบคุณสำหรับคำตอบ!

Answer 1

API การนำทางใช้ JavaScript Mixins!

Mixin - เป็นศัพท์การเขียนโปรแกรมเชิงวัตถุทั่วไป: คลาสที่มีเมธอดสำหรับคลาสอื่น ๆ ภาษาอื่น ๆ บางภาษาอนุญาตให้สืบทอดได้หลายภาษา JavaScript ไม่สนับสนุนการสืบทอดหลายรายการ แต่สามารถใช้ mixins ได้โดยการคัดลอกวิธีการลงในต้นแบบ

อ่านเพิ่มเติมเกี่ยวกับมิกซ์อินที่นี่และข้อมูลเพิ่มเติมเกี่ยวกับมิกซ์อินระดับคลาสที่นี่

ฉันตั้งคำถามเกี่ยวกับเรื่องนี้มาโดยตลอดว่าไวยากรณ์นั้นยากแค่ไหนและทำไมทีม lwc ถึงเลือก mixin สำหรับการนำทางเท่านั้น ดูเหมือนว่าจะเบี่ยงเบนไปจากองค์ประกอบและในกรณีนี้การถ่ายทอดทางพันธุกรรมจะถูกเลือกมากกว่าการแต่งเพลง!

คำตอบจากแพลตฟอร์ม LWC Team - LNS (Lightning Navigation Service) มีไว้ในแผนงานของพวกเขาที่จะย้ายออกจาก Mixin เนื่องจากรูปลักษณ์ / ความรู้สึกที่ไม่สอดคล้องกัน

คุณภาพรูทของ API การนำทางที่นำไปสู่สิ่งที่แตกต่างคือ API ตามบริบทที่ควรได้รับการจัดการเช่นเดียวกับเหตุการณ์ แต่เราเลือกที่จะแสดงให้เหมือนกับ JS / function API แบบดั้งเดิมเพื่อหลีกเลี่ยงการพึ่งพาเหตุการณ์และเป็นไปได้ การวิเคราะห์แบบคงที่ในอนาคตซึ่งไม่สามารถรับได้จากเหตุการณ์

มีแผนงานที่จะทำให้สอดคล้องกับการนำเข้าเดี่ยวมากกว่าการสร้างคลาส mixin

Answer 2

โดยทั่วไป Mixins สามารถผสานองค์ประกอบบางอย่างเข้ากับต้นแบบของคลาสได้ สำหรับตัวอย่างสั้น ๆ :

class Animal {
    constructor(family) { this.family = family; }
    makeSound() { console.log('Animal of the ' + this.family + ' family making a sound.'); }
}
const StickCatcher = (superclass) => class extends superclass {
    catchStick() { console.log('Entity of the ' + this.family + ' family catching a stick.'); }
}
class Dog extends StickCatcher(Animal) {
    constructor(dogName) {
        super('canine'); // the super() "routes" to Animal (not to the StickCatcher)
        this.dogName = dogName;
    }
    wagTail() { console.log(this.dogName + ' wags his tail.'); }
}
const fido = new Dog('Fido');
fido.makeSound(); // Animal of the canine family making a sound
fido.catchStick(); // Entity of the canine family catching a stick
fido.wagTail(); // Fido wags his tail

StickCatcher เป็น MixIn; มันคือ "class factory" ซึ่งส่งคืนคลาสที่ "เสริม" ด้วยฟังก์ชันบางอย่าง - ในกรณีนี้จะมีcatchStick()ฟังก์ชัน StickCatcher ไม่สนใจว่าจะพยายามขยายคลาสใด (อย่างไรก็ตามcatchStick()จะดูแลสิ่งที่this.familyมีอยู่ข้างในนั้น)

ในทางกลับกันโปรดทราบว่าสุนัขชั้นยอดคือสัตว์ StickCatcher ไม่ใช่คลาสแต่เป็นฟังก์ชันที่ส่งคืนคลาสเช่น "class factory" super('canine')เป็นอาหารจึงนวกรรมิกสัตว์ ผลลัพธ์ที่ได้คือ Dog ซึ่งมีองค์ประกอบทั้งหมดของ Animal และ StickCatcher (ควบคู่ไปกับ Dog แน่นอน) นั่นคือวิธีการของ StickCatcher ได้ผสมเข้ากับลำดับชั้นของคลาส Animal-to-Dog

อะไรคือความแตกต่างจากการทำมรดกคือความแตกต่างจากclass StickCatcherClass extends Animal { catchStick(){} }? ความแตกต่างคือมิกซิน StickCatcher ไม่ "ผูก" กับ Animal ซึ่งคุณสามารถใช้มันในสถานการณ์อื่น ๆ ได้เช่นกันเช่นใช้ในclass StickCatchingDancingRobot extends StickCatcher(Robot) { dance(){} }.

LWC NavigationMixinมีลักษณะคล้ายกัน จะเพิ่มฟังก์ชันสำหรับการนำทางและสำหรับการสร้าง URL ลงในต้นแบบคลาสของคุณ - แต่จะเพิ่มฟังก์ชันเหล่านี้ภายใต้ "ชื่อฟังก์ชันที่น่าเกลียดและไม่ขัดแย้งกัน" NavigationMixin.Navigateเป็นสตริงคงที่หรือทะเยอทะยานหมายถึงการกลับบอกว่า "น่าเกลียด แต่ไม่ขัดแย้งชื่อฟังก์ชั่น" เพื่อให้this[NavigationMixin.Navigate]dereferences ฟังก์ชั่นระบบนำทางที่ถูกเพิ่มเข้ามาเพื่อเป็นต้นแบบของคุณโดยกล่าวว่าผสมใน