ES6 मॉड्यूल और विरासत

Question

मेरे पास निम्न JavaScript फाइलें:

src/js/वर्गों/Lexus.js:

import {Car} from 'src/js/classes/Car'; 

export class Lexus extends Car { 
    constructor() { 
    super("Lexus"); 
    } 
} 

src/js/वर्गों/Mercedes.js:

import {Car} from 'src/js/classes/Car'; 

export class Mercedes extends Car { 
    constructor() { 
    super("Mercedes"); 
    } 
} 

src/js/वर्गों/Car.js:

0,123,

import {Lexus} from 'src/js/classes/Lexus'; //either of those imports works, but not both! 
import {Mercedes} from 'src/js/classes/Mercedes'; //either of those imports works, but not both! 

export class Car { 
    constructor(make) { 
    this.make = make; 
    } 

    static factory(msg) { 
    switch(msg) { 
     case "Lexus": 
     return new Lexus(); 
     case "Mercedes": 
     return new Mercedes(); 
    } 
    } 
} 

और app.js:

import {Lexus} from 'src/js/classes/Lexus'; 
import {Mercedes} from 'src/js/classes/Mercedes'; 
import {Car} from 'src/js/classes/Car'; 

var car = Car.factory("Lexus"); 
console.log(car); 

दिलचस्प बात यह है, अगर मैं या तोLexus या Mercedes कार वर्ग के लिए आयात और app.js में कारखाने विधि कॉल - सब कुछ ठीक काम करता है ; लेकिन अगर मैं आयात दोनोंLexus और Mercedes कार वर्ग मैं एक त्रुटि मिल करने के लिए:

Super expression must either be null or a function, not undefined

मैं क्या याद करते हैं?

Answer 1

आमतौर पर, आप पर इस तरह की परिपत्र निर्भरताएं चाहते हैं। सर्वोत्तम समय पर परिपत्र निर्भरता, सबकुछ तोड़ें और संकलित न करें (या पारदर्शी)। सबसे खराब समय पर सर्कुलर निर्भरता, मर्ज और वर्जनिंग विवादों का कारण बनती है, जो कोड को समझना मुश्किल है, ऐसा लगता है कि वे तब तक ठीक काम कर रहे हैं जब तक कि वे रुक जाए, कुछ भयानक स्थिति धारणाओं के कारण कुछ भयानक बग के साथ।

आपका समाधान (यदि आप विरासत के इस रूप में मृत हैं) तो अपनी खुद की फाइल/कक्षा में Car निकालने जा रहे हैं, जिसे अलग से आयात किया जा सकता है, और कारखाने को वर्ग से अलग किया जा सकता है।

जो अंग्रेजी में पूरी तरह से समझ में आता है।
कारें लेक्सस (लेक्सी?) का निर्माण नहीं करती हैं।

इसके अतिरिक्त, यदि आप इसे रखना चाहते हैं (एक अच्छा विचार नहीं), तो आपके पास एक रजिस्टर विधि होनी चाहिए, हार्ड कोड कोड नहीं, जिससे आप "लेक्सस" पंजीकृत करते हैं और यह फ़ंक्शन जो नया बनाता है लेक्सस।

import Car from "./car"; 
class Lexus extends Car { 
    constructor() { 
    super("Lexus"); 
    } 
    // starting to look like a bad idea 
    static make() { 
    return Car.make("Lexus"); 
    } 
    // starting to look worse 
    static register() { 
    /* this register method does nothing, so that Lexus can't make other cars... */ 
    } 
} 

Car.register("Lexus",() => new Lexus()); 

export default Lexus; 

यह खराब हो जाता है, लेकिन यह पहले से ही बहुत खराब है।

आप अन्य तरीका अपनाते हैं, तो:

// carfactory.js 

const carTypes = new Map(); 
class CarFactory { 
    static register (name, implementation) { 
    carTypes.set(name, implementation); 
    return CarFactory; 
    } 
    static make (name) { 
    const makeCar = carTypes.get(name); 
    return makeCar(); 
    } 

    register (name, implementation) { 
    CarFactory.register(name, implementation); 
    return this; 
    } 
    make (name) { return CarFactory.make(name); } 
} 

export default CarFactory; 


// index.js 
import Car from "./classes/car"; 
import Lexus from "./classes/lexus"; 

import CarFactory from "./factories/car"; 

CarFactory 
    .register("Lexus",() => new Lexus()) 
    .register("Bentley",() => new Bentley()); 

init(CarFactory); 

function init (Car) { 
    const lexus = Car.make("Lexus"); 
} 

अब, कोई कक्षाएं बातें वे नहीं करना चाहिए के बारे में जानना चाहते हैं।