मैं बाहरी रूप से सेट किए गए राज्य के आधार पर विभिन्न वर्गों को लागू करने के लिए एक सरणी के माध्यम से जा रहा हूं। मैं इसे अभी इस तरह से करता हूं, लेकिन मुझे ऐसा लगता है कि मैं खुद को बहुत दोहरा रहा हूं। क्या ऐसा करने का कोई ड्रायर तरीका है? क्लासनाम कुछ और हो सकता है अगर इससे मदद मिलती है।

var children2 = Array.from(wrapper.children);
var s = state.state;
children2.forEach((child, i) => {
    var classes = [];
    child.classList.remove('active', 'before', 'previous', 'next', 'after');
    if(i < s) { classes.push('before'); };
    if(i > s) { classes.push('after');  };
    if(i === s) { classes.push('active') }
    if(i === s - 1) { classes.push('previous') }
    if (i === s + 1) { classes.push('next') }
    child.classList.add(...classes)
})
2
Himmators 27 मार्च 2018, 13:57

1 उत्तर

वर्तमान में एक पैटर्न है जो आपके कोड में बेहद दोहराव वाला है: "अगर (कुछ शर्त), इस वर्ग को जोड़ें"। आप शायद इसके बजाय ऐसा कुछ कर सकते हैं:

var classes = [
  i < s && 'before',
  i > s && 'after',
  i === s && 'active',
  i === s - 1 && 'previous',
  i === s + 1 && 'next'
].filter(x => x)

उस कोड का पहला भाग, var classes = [...], सशर्त रूप से आइटम जोड़कर एक सरणी बनाता है जो [false, false, 'active', false, false] जैसा कुछ दिखता है। उदाहरण के लिए, मान लीजिए i 3 है और s भी 3 है। जब जावास्क्रिप्ट i === s && 'active' का मूल्यांकन करता है, तो यह देखता है कि i (3) === s (3), इसलिए यह अगले मान पर चला जाता है, जो है 'active', और उसे सरणी के अंदर चिपका देता है। जब यह i === s + 1 && 'next' का मूल्यांकन करता है, तो यह देखता है कि i (3), s + 1 (4) के समान नहीं है, इसलिए यह तुरंत असत्य लेता है और इसे सूची में जोड़ता है।

फिर, हम उन false वस्तुओं से छुटकारा पाने के लिए filter का उपयोग करते हैं, इसलिए हमें ['active'] जैसी अधिक सरणी मिलती है। मूल रूप से, filter एक कार्य करता है और सरणी आइटम में प्रत्येक को एक-एक करके पास करता है; जब फ़ंक्शन truthy मान लौटाता है, तो यह आइटम को रखता है, और अन्यथा, यह आइटम को हटा देता है। हमने जो फ़ंक्शन पास किया है वह एक एरो फंक्शन है। ; यह केवल उस मान को लौटाता है जो इसे पास किया जाता है। आप इसे function(x) { return x } से बदल सकते हैं और यह कार्यात्मक रूप से समान होगा।

(मैं कभी-कभी .filter(x => x) के बजाय .filter(Boolean) का उपयोग करता हूं। बूलियन का उपयोग किसी मान को बूलियन में बदलने के लिए एक फ़ंक्शन के रूप में किया जा सकता है ("truthy" ऊपर लिंक) - अगर आपने !!x सिंटैक्स पहले, यह वही काम करता है। मुझे .filter(Boolean) अधिक वाक्यात्मक लगता है: "ऐसी वस्तुओं को रखें जो सत्य हों (एक बूलियन की तरह)"। लेकिन यह पूरी तरह से अनावश्यक है क्योंकि filter स्वतः ही जांचता है कि क्या आपके फ़ंक्शन का लौटाया गया मान सत्य है। इसलिए यदि आप इसका उपयोग करते हैं तो यह केवल स्वाद की बात है!)

एक अन्य विकल्प केवल अनावश्यक ब्रेसिज़ और अर्धविराम से छुटकारा पाना है, जैसे:

if (i < s) classes.push('before')
if (i > s) classes.push('after')
// ..and so on.

यह निश्चित रूप से थोड़ा अधिक वर्बोज़ है, लेकिन आप इसे वैसे भी पसंद कर सकते हैं!

0
Florrie 27 मार्च 2018, 11:22