javascript क्या फ़ंक्शन लिखने का एक और अधिक सुरुचिपूर्ण तरीका है जो फ़ंक्शन के तर्क के आधार पर एक छवि का नाम देता है?




(4)

आप नक्शे के रूप में एक सादे Object उपयोग कर सकते हैं।

var emblems = {
  IRON: "Emblem_Iron",
  BRONZE: "Emblem_Bronze",
  SILVER: "Emblem_Silver",
  GOLD: "Emblem_Gold",
  PLATINUM: "Emblem_Platinum",
  DIAMOND: "Emblem_Diamond",
  MASTER: "Emblem_Master",
  GRANDMASTER: "Emblem_Grandmaster",
  CHALLENGER: "Emblem_Challenger"
};

function rankedEmblem(tier) {
  // Could also help user by doing:  emblems[tier.toUpperCase()]
  return emblems[tier] || "No_Emblem";
}

console.log(rankedEmblem("GOLD"));
console.log(rankedEmblem("PLATINUM"));

मेरे पास एक ऐसी वस्तु है जिसमें tier नामक एक संपत्ति है जिसमें 9 संभावित मान हैं - IRON, BRONZE, SILVER, GOLD, PLATINUM, DIAMOND, MASTER, GRANDMASTER and CHALLENGER

उस संपत्ति के आधार पर, मैं प्रतीक को टियर के अनुरूप प्रदर्शित करना चाहता हूं, हालांकि, जबकि टीयर को IRON कहा जा सकता है, प्रतीक के साथ छवि फ़ाइल को Emblem_Iron कहा Emblem_Iron

यही कारण है कि मैंने एक फ़ंक्शन बनाया है जो एक तर्क के रूप में एक tier लेता है और फिर प्रतीक की फ़ाइल नाम को tier अनुरूप देता है ताकि मैं ऐसा कर सकूं:

<img class='ranked-emblem' :src="'../emblems/' + rankedEmblem(league.tier) + '.png'" alt="">

और मेरा कार्य है:

rankedEmblem(tier){
    if (tier === 'IRON') {
        return 'Emblem_Iron'
    } else if (tier === 'BRONZE') {
        return 'Emblem_Bronze'
    } else if (tier === 'SILVER') {
        return 'Emblem_Silver'
    } else if (tier === 'GOLD') {
        return 'Emblem_Gold'
    } else if (tier === 'PLATINUM') {
        return 'Emblem_Platinum'
    } else if (tier === 'DIAMOND') {
        return 'Emblem_Diamond'
    } else if (tier === 'MASTER') {
        return 'Emblem_Master'
    } else if (tier === 'GRANDMASTER') {
        return 'Emblem_Grandmaster'
    } else if (tier === 'CHALLENGER') {
        return 'Emblem_Challenger'
    }
}

हालांकि यह पूरी तरह से ठीक काम करता है, मैं सोच रहा था कि क्या ऐसा करने का एक और सुंदर तरीका है जो फ़ंक्शन को छोटा कर देगा और शायद कुछ जोड़े को हटा देगा।


rankedEmblem(tier) {
  return 'Emblem_' + tier.substr(0, 1) + tier.substr(2).toLowerCase();
}

rankedEmblem(tier){
  let myEmblems = {IRON: 'Emblem_Iron', BRONZE: 'Emblem_Bronze' }; 
  //You can put whatever emblem you want as key:value pair
  return myEmblems[tier];
}

आप जावास्क्रिप्ट में हैं: किसी ऑब्जेक्ट का उपयोग करें। if आपको पता है कि मैपिंग क्या है, if इसका कोई कारण नहीं है

// this mapping will probably live in its own file
const mapping = {
  IRON: `emblem-Iron.png`,
  GOLD: `emblem-Gold.png`,
  ...
}

// this function will probably _also_ live in its own file,
// and import that mapping (either with import or require).
function getImageForTier(tier) {
  let tierImage = mapping[tier];

  if (!tierImage) {
    // ... somehow, your code allowed for an unknown tier to make it this far.
    console.error(`unknown tier ${tier}!`);
    return UNKNOWN_TIER_IMAGE;
  }

  return tierImage;
}  

आप टियर स्ट्रिंग के आधार पर छवि फ़ाइल नाम को नेत्रहीन रूप से उत्पन्न करने के लिए एक फ़ंक्शन का उपयोग कर सकते हैं, लेकिन फिर आप "क्या होगा यदि टीयर वास्तव में गलत / अज्ञात है?" की समस्या में भाग लेते हैं।

यदि आप पहले से ही टियर को पहले से मान्य करते हैं, तो आपको फ़ंक्शन की भी आवश्यकता नहीं है, एक टेम्पलेट स्ट्रिंग आपको ऐसा करने देगा। लेकिन तब कम से कम यह सुनिश्चित करें कि आपकी सभी छवि फ़ाइल नाम लोअरकेस में हैं, क्योंकि आपको मौजूदा परिसंपत्तियों पर भरोसा करने में सक्षम होना चाहिए, और "इस फ़ाइल में बड़े अक्षर होने चाहिए?" जीवन को अनावश्यक रूप से कठिन बनाता है:

image.src = `${baselocation}/ember-${tier.toLowerCase()}.png`






javascript