वेब कैलकुलेटर बनाने के लिए जावास्क्रिप्ट ढांचा

<p> दूसरे दिन मुझे एक वेब कैलकुलेटर बनाने की आवश्यकता थी। यह पहला कैलकुलेटर नहीं था जो मैंने लिखा था, और जावास्क्रिप्ट में गणनाओं के तर्क को एन्कोड करने की यादें, हर बार फिर से, उत्साह को बिल्कुल भी नहीं जोड़ती थीं। जाहिर है, इसके साथ कुछ किया जाना था, गणना तर्क को अलग करना, प्रत्येक साइट पर अपने आप को कैलकुलेटर के कोड और एल्गोरिथ्म से ("उपयोगकर्ता द्वारा चुने गए मूल्य को देखें - गणना करें कि इसकी लागत कितनी है")।







<p> ऐसे मामलों में दिमाग में आने वाली पहली चीज मानक सरणियों या वस्तुओं का उपयोग है। लेकिन यह दृष्टिकोण बहुत भारी है। यह हैश का उपयोग करने के लिए बहुत अधिक सुविधाजनक होगा, लेकिन जावास्क्रिप्ट में उनका समर्थन बहुत सीमित है। इसलिए, मैंने प्रोटोटाइप लाइब्रेरी का उपयोग करने का निर्णय लिया, जिसमें व्यावहारिक रूप से पूर्ण हैश वर्ग है , और कैलकुलेटर के तर्क और गणना हैश के साथ फॉर्म फ़ील्ड का वर्णन करें। इसने हमें कैलकुलेटर कोड को सरल बनाने की अनुमति दी (हालांकि मैं यहां पर रिफैक्टिंग के लिए एक विस्तृत क्षेत्र देखता हूं) और विस्तार योग्य।



var calculations = new Hash({})



function calcPrice() {

var f = document.forms['calculator']

var price = 0

calculations.each(function(pair) {

if(f[pair.key] == null){

alert(pair.key)

}

if(pair.value['fieldtype'] == 'counter' && f[pair.key].value.match(/^\d+$/)){

price += f[pair.key].value * pair.value['price']

}

if(pair.value['fieldtype'] == 'radio'){

val = getRadioValue(f[pair.key])

} else {

val = f[pair.key].value

}

if(pair.value['fieldtype'] == 'radio' || pair.value['fieldtype'] == 'select'){

if(val != 0){

price += pair.value['prices'][val]

}

}

})

$('pricevalue').innerHTML = price + ' .'

}







<p> रेडियो बटन के मान प्राप्त करने के लिए, getRadioValue सहायक फ़ंक्शन का उपयोग किया जाता है ।



function getRadioValue(radio) {

for(i = 0; i < radio.length; i++){

if(radio[i].checked)

return radio[i].value

}

return 0;

}







<p> गणना हैश की कुंजी प्रपत्र फ़ील्ड्स के नाम हैं, मान इस फ़ील्ड के लिए मूल्य की गणना के लिए नियमों के साथ हैश हैं। प्रत्येक नियम में फ़ील्ड की कुंजी होती है जो फ़ील्ड के प्रकार को इंगित करती है, साथ ही साथ अन्य कुंजियाँ भी बताती हैं कि फ़ील्ड को कैसे संसाधित किया जाए (मेरे मामले में, मूल्य और मूल्य)। यह आर्किटेक्चर आपको आसानी से कैलकुलेटर की कार्यक्षमता और जटिलता को बढ़ाने की अनुमति देता है, यदि आवश्यक हो, तो पहले से बनाए गए कोड को अधिलेखित किए बिना। मैंने तीन तरह के खेतों का इस्तेमाल किया। </ p>



<p> इसके अलावा, गणना के हैश में नियमों को गतिशील रूप से संशोधित किया जा सकता है, उदाहरण के लिए, जब फॉर्म का AJAX- लोड हो रहा है। </ p>

काउंटर फील्ड

<p> पाठ या अन्य फ़ील्ड जिसमें मात्रा इंगित की गई है; राशि की गणना उपयोगकर्ताओं द्वारा मूल्य कुंजी के मूल्य द्वारा दर्ज की गई मात्रा को गुणा करके की जाती है। </ p>

calculations['units'] = $H({ fieldtype:'counter', price:5.50 })

<input type="text" value="2" name="counter">

फ़ील्ड चुनें

कई मदों की एक सूची का चयन करें। प्रत्येक तत्व का अपना अल्फ़ान्यूमेरिक पहचानकर्ता और एक निश्चित मूल्य होता है। निर्भरता पहचानकर्ता - मूल्य मूल्य नियम कुंजी में एक हैश द्वारा निर्दिष्ट किया गया है।

calculations("color") = $H({ fieldtype:'select', prices:$H({white:20.95,red:49.55}) })

<select name="color">

<option value="white"></option>

<option value="red"></option>

</select>

रेडियो क्षेत्र

चयन के समान, सिवाय इसके कि रेडियो बटन चयन के लिए उपयोग किए जाते हैं।

calculations("color") = $H({ fieldtype:'radio', prices:$H({white:20.95,red:49.55}) })

<input type="radio" name="color" value="white" />

<input type="radio" name="color" value="red" />