কীভাবে জাভাস্ক্রিপ্টে গ্লোবাল ভেরিয়েবল এড়ানো যায়?

Question 1

আমরা সকলেই জানি যে গ্লোবাল ভেরিয়েবলগুলি সর্বোত্তম অনুশীলন ছাড়া কিছু নয় are কিন্তু বেশ কয়েকটি উদাহরণ রয়েছে যখন এগুলি ছাড়া কোড করা কঠিন। গ্লোবাল ভেরিয়েবলের ব্যবহার এড়াতে আপনি কোন কৌশল ব্যবহার করেন?

উদাহরণস্বরূপ, নিম্নলিখিত দৃশ্যের পরিপ্রেক্ষিতে আপনি কীভাবে বিশ্বব্যাপী পরিবর্তনশীল ব্যবহার করবেন না?

জাভাস্ক্রিপ্ট কোড:

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">। বিশাল অনুরোধ রোধ করতে এটি একবারে ফাইলগুলি আপলোড করে। এটি iframe- এ পোস্ট করে এটি করে , প্রতিক্রিয়াটির জন্য অপেক্ষা করে যা iframe অনলোডটি জ্বালিয়ে দেয় এবং তারপরে পরবর্তী জমা দেয়।

আপনাকে এই উদাহরণটির বিশেষভাবে জবাব দিতে হবে না, আমি কেবলমাত্র এমন পরিস্থিতির উল্লেখের জন্য এটি সরবরাহ করছি যা আমি বৈশ্বিক পরিবর্তনশীলগুলি এড়ানোর উপায় সম্পর্কে ভাবতে অক্ষম।

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();
        }
    });

})();

এইচটিএমএল:

<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>

সতর্কতাটি প্রতিবারই আমি সাফারি, ফায়ারফক্স, আই 6, 7 এবং 8 এর জমা বোতামটি ক্লিক করি click

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>

যাইহোক, যদি এটি হয় তবে আপনার সম্ভবত কোনও অবজেক্ট আক্ষরিক বা তাত্পর্যপূর্ণ অবজেক্টটি ব্যবহার করা উচিত এবং এটি স্বাভাবিক ওও পদ্ধতিতে করা উচিত (যেখানে আপনার অভিনবতাকে আঘাত করা হলে আপনি মডিউল প্যাটার্নটি ব্যবহার করতে পারেন)।

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);
};

এইভাবে, কেবলমাত্র 'অবজেক্ট' উন্মুক্ত করা হয় এবং এর সাথে সম্পর্কিত পদ্ধতিগুলি। এটি নামের জায়গায় যুক্ত করার সমতুল্য।

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>

আপনার ফায়ারব্যাগ খুলুন , আপনি কোনও গ্লোবাল পাবেন না, এমনকি ফ্যানসিটনও পাবেন না :)

সম্পূর্ণ ডকুমেন্টেশনের জন্য, দয়া করে এখানে দেখুন ।

একটি ডেমো পৃষ্ঠার জন্য, দয়া করে দেখুন এই ।

গিটহাবের উত্স কোড ।

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());

স্নিপেট প্রসারিত করুন

আমি জেএসের কাছে একজন নবজাতক, বর্তমানে এটি একটি প্রকল্পে ব্যবহার করছি। (আমি কোন মন্তব্য এবং সমালোচনা প্রশংসা)

Question 12

আমি এটি এইভাবে ব্যবহার করি:

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

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

    localFunc();
}

সমস্ত গ্লোবাল স্কোপের জন্য 'ভার' ব্যবহার করুন এবং স্থানীয় স্কোপের জন্য 'লেট' ব্যবহার করুন।