जावास्क्रिप्ट में वैश्विक चर से कैसे बचें?

Question 1

हम सभी जानते हैं कि वैश्विक चर कुछ भी हैं लेकिन सबसे अच्छा अभ्यास हैं। लेकिन ऐसे कई उदाहरण हैं जब उनके बिना कोड करना मुश्किल है। वैश्विक चर के उपयोग से बचने के लिए आप किन तकनीकों का उपयोग करते हैं?

उदाहरण के लिए, निम्नलिखित परिदृश्य को देखते हुए, आप वैश्विक चर का उपयोग कैसे नहीं करेंगे?

जावास्क्रिप्ट कोड:

var uploadCount = 0;

window.onload = function() {
    var frm = document.forms[0];

    frm.target = "postMe";
    frm.onsubmit = function() {
        startUpload();
        return false;
    }
}

function startUpload() {
    var fil = document.getElementById("FileUpload" + uploadCount);

    if (!fil || fil.value.length == 0) {
        alert("Finished!");
        document.forms[0].reset();
        return;
    }

    disableAllFileInputs();
    fil.disabled = false;
    alert("Uploading file " + uploadCount);
    document.forms[0].submit();
}

प्रासंगिक मार्कअप:

<iframe src="test.htm" name="postHere" id="postHere"
  onload="uploadCount++; if(uploadCount > 1) startUpload();"></iframe>

<!-- MUST use inline JavaScript here for onload event
     to fire after each form submission. -->

यह कोड एक वेब फॉर्म से कई के साथ आता है <input type="file">। यह भारी अनुरोधों को रोकने के लिए एक समय में एक फाइल अपलोड करता है। यह POST के द्वारा iframe को ingr करता है, प्रतिक्रिया के लिए इंतजार कर रहा है जो iframe onload फायर करता है, और फिर अगले सबमिशन को ट्रिगर करता है।

आपको इस उदाहरण का विशेष रूप से जवाब देने की आवश्यकता नहीं है, मैं इसे केवल एक ऐसी स्थिति के संदर्भ में प्रदान कर रहा हूं जिसमें मैं वैश्विक चरों से बचने का तरीका नहीं सोच पा रहा हूं।

Question 2

सबसे आसान तरीका यह है कि अपने कोड को एक क्लोजर में लपेटें और मैन्युअल रूप से केवल उन वेरिएबल्स को उजागर करें जिनकी आपको वैश्विक स्तर पर आवश्यकता है:

(function() {
    // Your code here

    // Expose to global
    window['varName'] = varName;
})();

क्रिसेंट फ्रेश की टिप्पणी को संबोधित करने के लिए: वैश्विक चर को पूरी तरह से परिदृश्य से हटाने के लिए, डेवलपर को प्रश्न में ग्रहण की गई कई चीजों को बदलने की आवश्यकता होगी। यह इस तरह बहुत अधिक दिखाई देगा:

जावास्क्रिप्ट:

(function() {
    var addEvent = function(element, type, method) {
        if('addEventListener' in element) {
            element.addEventListener(type, method, false);
        } else if('attachEvent' in element) {
            element.attachEvent('on' + type, method);

        // If addEventListener and attachEvent are both unavailable,
        // use inline events. This should never happen.
        } else if('on' + type in element) {
            // If a previous inline event exists, preserve it. This isn't
            // tested, it may eat your baby
            var oldMethod = element['on' + type],
                newMethod = function(e) {
                    oldMethod(e);
                    newMethod(e);
                };
        } else {
            element['on' + type] = method;
        }
    },
        uploadCount = 0,
        startUpload = function() {
            var fil = document.getElementById("FileUpload" + uploadCount);

            if(!fil || fil.value.length == 0) {    
                alert("Finished!");
                document.forms[0].reset();
                return;
            }

            disableAllFileInputs();
            fil.disabled = false;
            alert("Uploading file " + uploadCount);
            document.forms[0].submit();
        };

    addEvent(window, 'load', function() {
        var frm = document.forms[0];

        frm.target = "postMe";
        addEvent(frm, 'submit', function() {
            startUpload();
            return false;
        });
    });

    var iframe = document.getElementById('postHere');
    addEvent(iframe, 'load', function() {
        uploadCount++;
        if(uploadCount > 1) {
            startUpload();
        }
    });

})();

HTML:

<iframe src="test.htm" name="postHere" id="postHere"></iframe>

आपको इनलाइन ईवेंट हैंडलर की आवश्यकता नहीं है<iframe> , यह अभी भी इस कोड के साथ प्रत्येक लोड पर फायर करेगा।

लोड घटना के संबंध में

यहां एक परीक्षण मामला दिखाया गया है कि आपको इनलाइन onloadघटना की आवश्यकता नहीं है । यह एक ही सर्वर पर एक फ़ाइल (/emptypage.php) को संदर्भित करने पर निर्भर करता है, अन्यथा आपको इसे केवल एक पृष्ठ में पेस्ट करने और इसे चलाने में सक्षम होना चाहिए।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>untitled</title>
</head>
<body>
    <script type="text/javascript" charset="utf-8">
        (function() {
            var addEvent = function(element, type, method) {
                if('addEventListener' in element) {
                    element.addEventListener(type, method, false);
                } else if('attachEvent' in element) {
                    element.attachEvent('on' + type, method);

                    // If addEventListener and attachEvent are both unavailable,
                    // use inline events. This should never happen.
                } else if('on' + type in element) {
                    // If a previous inline event exists, preserve it. This isn't
                    // tested, it may eat your baby
                    var oldMethod = element['on' + type],
                    newMethod = function(e) {
                        oldMethod(e);
                        newMethod(e);
                    };
                } else {
                    element['on' + type] = method;
                }
            };

            // Work around IE 6/7 bug where form submission targets
            // a new window instead of the iframe. SO suggestion here:
            // http://stackoverflow.com/q/875650
            var iframe;
            try {
                iframe = document.createElement('<iframe name="postHere">');
            } catch (e) {
                iframe = document.createElement('iframe');
                iframe.name = 'postHere';
            }

            iframe.name = 'postHere';
            iframe.id = 'postHere';
            iframe.src = '/emptypage.php';
            addEvent(iframe, 'load', function() {
                alert('iframe load');
            });

            document.body.appendChild(iframe);

            var form = document.createElement('form');
            form.target = 'postHere';
            form.action = '/emptypage.php';
            var submit = document.createElement('input');
            submit.type = 'submit';
            submit.value = 'Submit';

            form.appendChild(submit);

            document.body.appendChild(form);
        })();
    </script>
</body>
</html>

हर बार जब मैं सफ़ारी, फ़ायरफ़ॉक्स, IE 6, 7 और 8 में सबमिट बटन पर क्लिक करता हूँ तो आग लग जाती है।

Question 3

मैं मॉड्यूल पैटर्न का सुझाव देता हूं ।

YAHOO.myProject.myModule = function () {

    //"private" variables:
    var myPrivateVar = "I can be accessed only from within YAHOO.myProject.myModule.";

    //"private" method:
    var myPrivateMethod = function () {
        YAHOO.log("I can be accessed only from within YAHOO.myProject.myModule");
    }

    return  {
        myPublicProperty: "I'm accessible as YAHOO.myProject.myModule.myPublicProperty."
        myPublicMethod: function () {
            YAHOO.log("I'm accessible as YAHOO.myProject.myModule.myPublicMethod.");

            //Within myProject, I can access "private" vars and methods:
            YAHOO.log(myPrivateVar);
            YAHOO.log(myPrivateMethod());

            //The native scope of myPublicMethod is myProject; we can
            //access public members using "this":
            YAHOO.log(this.myPublicProperty);
        }
    };

}(); // the parens here cause the anonymous function to execute and return

Question 4

सबसे पहले, वैश्विक जावास्क्रिप्ट से बचना असंभव है, कुछ हमेशा वैश्विक दायरे को खतरे में डाल देगा। यहां तक कि अगर आप एक नाम स्थान बनाते हैं, जो अभी भी एक अच्छा विचार है, तो यह नाम स्थान वैश्विक होगा।

हालांकि, वैश्विक दायरे का दुरुपयोग न करने के लिए कई दृष्टिकोण हैं। सबसे सरल में से दो या तो बंद करने का उपयोग करने के लिए हैं, या चूंकि आपके पास केवल एक चर है जिसे आपको ट्रैक करने की आवश्यकता है, बस इसे फ़ंक्शन की संपत्ति के रूप में सेट करें (जिसे तब एक staticचर के रूप में माना जा सकता है )।

समापन

var startUpload = (function() {
  var uploadCount = 1;  // <----
  return function() {
    var fil = document.getElementById("FileUpload" + uploadCount++);  // <----

    if(!fil || fil.value.length == 0) {    
      alert("Finished!");
      document.forms[0].reset();
      uploadCount = 1; // <----
      return;
    }

    disableAllFileInputs();
    fil.disabled = false;
    alert("Uploading file " + uploadCount);
    document.forms[0].submit();
  };
})();

* ध्यान दें कि यहां वेतन वृद्धि uploadCountआंतरिक रूप से हो रही है

कार्य संपत्ति

var startUpload = function() {
  startUpload.uploadCount = startUpload.count || 1; // <----
  var fil = document.getElementById("FileUpload" + startUpload.count++);

  if(!fil || fil.value.length == 0) {    
    alert("Finished!");
    document.forms[0].reset();
    startUpload.count = 1; // <----
    return;
  }

  disableAllFileInputs();
  fil.disabled = false;
  alert("Uploading file " + startUpload.count);
  document.forms[0].submit();
};

मुझे यकीन नहीं है कि क्यों uploadCount++; if(uploadCount > 1) ...आवश्यक है, क्योंकि ऐसा लगता है कि स्थिति हमेशा सच होगी। लेकिन अगर आपको चर की वैश्विक पहुंच की आवश्यकता है, तो मैंने ऊपर वर्णित फ़ंक्शन प्रॉपर्टी विधि आपको चर के बिना वास्तव में वैश्विक होने की अनुमति देगा।

<iframe src="test.htm" name="postHere" id="postHere"
  onload="startUpload.count++; if (startUpload.count > 1) startUpload();"></iframe>

हालांकि, अगर ऐसा है, तो आपको संभवतः एक वस्तु शाब्दिक या तात्कालिक वस्तु का उपयोग करना चाहिए और इस बारे में सामान्य OO तरीके से जाना चाहिए (यदि आप अपने फैंसी को मारते हैं तो आप मॉड्यूल पैटर्न का उपयोग कर सकते हैं)।

Question 5

कभी-कभी यह जावास्क्रिप्ट में वैश्विक चर रखने के लिए समझ में आता है। लेकिन उन्हें खिड़की की तरह सीधे लटकते हुए नहीं छोड़ना चाहिए।

इसके बजाय, अपने ग्लोबल्स को शामिल करने के लिए एक एकल "नेमस्पेस" ऑब्जेक्ट बनाएं। बोनस अंक के लिए, अपने तरीकों सहित, वहां सब कुछ डाल दें।

Question 6

window.onload = function() {
  var frm = document.forms[0];
  frm.target = "postMe";
  frm.onsubmit = function() {
    frm.onsubmit = null;
    var uploader = new LazyFileUploader();
    uploader.startUpload();
    return false;
  }
}

function LazyFileUploader() {
    var uploadCount = 0;
    var total = 10;
    var prefix = "FileUpload";  
    var upload = function() {
        var fil = document.getElementById(prefix + uploadCount);

        if(!fil || fil.value.length == 0) {    
            alert("Finished!");
            document.forms[0].reset();
            return;
         }

        disableAllFileInputs();
        fil.disabled = false;
        alert("Uploading file " + uploadCount);
        document.forms[0].submit();
        uploadCount++;

        if (uploadCount < total) {
            setTimeout(function() {
                upload();
            }, 100); 
        }
    }

    this.startUpload = function() {
        setTimeout(function() {
            upload();
        }, 100);  
    }       
}

Question 7

ऐसा करने का अन्य तरीका एक ऑब्जेक्ट बनाना और फिर इसमें विधियाँ जोड़ना है।

var object = {
  a = 21,
  b = 51
};

object.displayA = function() {
 console.log(object.a);
};

object.displayB = function() {
 console.log(object.b);
};

इस तरह, केवल ऑब्जेक्ट 'obj' ही उजागर होता है और इससे जुड़ी विधियाँ। इसे नामस्थान में जोड़ना बराबर है।

Question 8

वैश्विक नेमस्पेस में कुछ चीजें होने जा रही हैं - अर्थात्, जो भी फ़ंक्शन आप अपने इनलाइन जावास्क्रिप्ट कोड से बुला रहे हैं।

सामान्य तौर पर, समाधान एक बंद में सब कुछ लपेटने के लिए है:

(function() {
    var uploadCount = 0;
    function startupload() {  ...  }
    document.getElementById('postHere').onload = function() {
        uploadCount ++;
        if (uploadCount > 1) startUpload();
    };
})();

और इनलाइन हैंडलर से बचें।

Question 9

छोटे से मध्यम प्रोजेक्ट के लिए क्लोजर का उपयोग करना ठीक हो सकता है। हालाँकि, बड़ी परियोजनाओं के लिए, आप अपने कोड को मॉड्यूल में विभाजित करना चाहते हैं और उन्हें विभिन्न फ़ाइलों में सहेज सकते हैं।

इसलिए मैंने समस्या को हल करने के लिए jQuery गुप्त प्लगइन लिखा ।

इस प्लगइन के साथ आपके मामले में कोड कुछ इस तरह दिखेगा।

जावास्क्रिप्ट:

// Initialize uploadCount.
$.secret( 'in', 'uploadCount', 0 ).

// Store function disableAllFileInputs.
secret( 'in', 'disableAllFileInputs', function(){
  // Code for 'disable all file inputs' goes here.

// Store function startUpload
}).secret( 'in', 'startUpload', function(){
    // 'this' points to the private object in $.secret
    // where stores all the variables and functions
    // ex. uploadCount, disableAllFileInputs, startUpload.

    var fil = document.getElementById( 'FileUpload' + uploadCount);

    if(!fil || fil.value.length == 0) {
        alert( 'Finished!' );
        document.forms[0].reset();
        return;
    }

    // Use the stored disableAllFileInputs function
    // or you can use $.secret( 'call', 'disableAllFileInputs' );
    // it's the same thing.
    this.disableAllFileInputs();
    fil.disabled = false;

    // this.uploadCount is equal to $.secret( 'out', 'uploadCount' );
    alert( 'Uploading file ' + this.uploadCount );
    document.forms[0].submit();

// Store function iframeOnload
}).secret( 'in', 'iframeOnload', function(){
    this.uploadCount++;
    if( this.uploadCount > 1 ) this.startUpload();
});

window.onload = function() {
    var frm = document.forms[0];

    frm.target = "postMe";
    frm.onsubmit = function() {
        // Call out startUpload function onsubmit
        $.secret( 'call', 'startUpload' );
        return false;
    }
}

प्रासंगिक मार्कअप:

<iframe src="test.htm" name="postHere" id="postHere" onload="$.secret( 'call', 'iframeOnload' );"></iframe>

अपना फायरबग खोलें , आपको कोई ग्लोबल्स नहीं मिलेंगे, यहां तक कि कवक भी नहीं :)

पूर्ण प्रलेखन के लिए, कृपया यहाँ देखें ।

एक डेमो पृष्ठ के लिए, कृपया इस ।

GitHub पर स्रोत कोड ।

Question 10

बंद का उपयोग करें। ऐसा कुछ आपको वैश्विक के अलावा एक गुंजाइश देता है।

(function() {
    // Your code here
    var var1;
    function f1() {
        if(var1){...}
    }

    window.var_name = something; //<- if you have to have global var
    window.glob_func = function(){...} //<- ...or global function
})();

Question 11

"वैश्विक" वैरिएबल "सुरक्षित" के लिए:

function gInitUploadCount() {
    var uploadCount = 0;

    gGetUploadCount = function () {
        return uploadCount; 
    }
    gAddUploadCount= function () {
        uploadCount +=1;
    } 
}

gInitUploadCount();
gAddUploadCount();

console.log("Upload counter = "+gGetUploadCount());

स्निपेट का विस्तार करें

मैं JS के लिए एक नौसिखिया हूं, वर्तमान में एक परियोजना में इसका उपयोग कर रहा हूं। (मैं किसी भी टिप्पणी और आलोचना की व्याख्या करता हूं)

Question 12

मैं इसे इस तरह से उपयोग करता हूं:

{
    var globalA = 100;
    var globalB = 200;
    var globalFunc = function() { ... }

    let localA = 10;
    let localB = 20;
    let localFunc = function() { ... }

    localFunc();
}

सभी वैश्विक scopes के लिए 'var' का उपयोग करें, और स्थानीय scopes के लिए 'let' का उपयोग करें।