Làm cách nào để tránh các biến toàn cục trong JavaScript?

Tất cả chúng ta đều biết rằng các biến toàn cục là bất cứ điều gì ngoại trừ phương pháp hay nhất. Nhưng có một số trường hợp rất khó viết mã nếu không có chúng. Bạn sử dụng kỹ thuật nào để tránh việc sử dụng các biến toàn cục?

Ví dụ, với tình huống sau, bạn sẽ không sử dụng biến toàn cục như thế nào?

Mã JavaScript:

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

Đánh dấu có liên quan:

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

Mã này đến từ một biểu mẫu web có nhiều <input type="file">. Nó tải lên từng tệp một để ngăn chặn các yêu cầu lớn. Nó thực hiện điều này bằng cách ĐĂNG nhập vào iframe, đợi phản hồi kích hoạt tải iframe và sau đó kích hoạt gửi tiếp theo.

Bạn không cần phải trả lời ví dụ này một cách cụ thể, tôi chỉ cung cấp nó để tham khảo cho một tình huống mà tôi không thể nghĩ ra cách để tránh các biến toàn cục.

Cách dễ nhất là bọc mã của bạn trong một vùng đóng và chỉ hiển thị theo cách thủ công những biến bạn cần trên phạm vi toàn cầu:

(function() {
    // Your code here

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

Để giải quyết nhận xét của Crescent Fresh: để loại bỏ hoàn toàn các biến toàn cục khỏi kịch bản, nhà phát triển cần phải thay đổi một số điều được giả định trong câu hỏi. Nó sẽ trông giống như thế này hơn:

Javascript:

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

Bạn không cần một trình xử lý sự kiện nội tuyến <iframe>, nó vẫn sẽ kích hoạt trên mỗi lần tải với mã này.

Về sự kiện tải

Đây là một trường hợp thử nghiệm chứng minh rằng bạn không cần một onloadsự kiện nội tuyến . Điều này phụ thuộc vào việc tham chiếu một tệp (/emptypage.php) trên cùng một máy chủ, nếu không, bạn có thể chỉ cần dán tệp này vào một trang và chạy nó.

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

Cảnh báo kích hoạt mỗi khi tôi nhấp vào nút gửi trong Safari, Firefox, IE 6, 7 và 8.

Tôi đề nghị mô-đun mô-đun .

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

Trước hết, không thể tránh được toàn cầu JavaScript, một thứ gì đó sẽ luôn nằm trong phạm vi toàn cầu. Ngay cả khi bạn tạo một không gian tên, vẫn là một ý tưởng hay, không gian tên đó sẽ là toàn cầu.

Tuy nhiên, có nhiều cách tiếp cận để không lạm dụng phạm vi toàn cầu. Hai trong số các cách đơn giản nhất là sử dụng hàm bao đóng, hoặc vì bạn chỉ có một biến cần theo dõi, chỉ cần đặt nó làm thuộc tính của chính hàm (sau đó có thể được coi là một staticbiến).

Khép kín

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

* Lưu ý rằng sự gia tăng của uploadCountđang diễn ra nội bộ tại đây

Thuộc tính chức năng

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

Tôi không chắc tại sao lại uploadCount++; if(uploadCount > 1) ...cần, vì có vẻ như điều kiện sẽ luôn đúng. Nhưng nếu bạn cần truy cập toàn cục vào biến, thì phương thức thuộc tính hàm mà tôi đã mô tả ở trên sẽ cho phép bạn làm như vậy mà biến thực sự không phải là toàn cục.

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

Tuy nhiên, nếu đúng như vậy, thì bạn có thể nên sử dụng một đối tượng theo nghĩa đen hoặc đối tượng được khởi tạo và thực hiện điều này theo cách OO thông thường (nơi bạn có thể sử dụng mô-đun nếu nó phù hợp với bạn).

Đôi khi việc có các biến toàn cục trong JavaScript là rất hợp lý. Nhưng đừng để chúng treo thẳng ngoài cửa sổ như vậy.

Thay vào đó, hãy tạo một đối tượng "không gian tên" để chứa hình cầu của bạn. Để có điểm thưởng, hãy đặt mọi thứ vào đó, bao gồm cả phương pháp của bạn.

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

Cách khác để làm điều này là tạo một đối tượng và sau đó thêm các phương thức vào nó.

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

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

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

Bằng cách này, chỉ có đối tượng 'obj' được hiển thị và các phương thức gắn liền với nó. Nó tương đương với việc thêm nó vào không gian tên.

Một số thứ sẽ nằm trong không gian tên chung - cụ thể là bất kỳ hàm nào bạn đang gọi từ mã JavaScript nội tuyến của mình.

Nói chung, giải pháp là đóng tất cả mọi thứ lại:

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

và tránh trình xử lý nội tuyến.

Sử dụng bao đóng có thể phù hợp cho các dự án vừa và nhỏ. Tuy nhiên, đối với các dự án lớn, bạn có thể muốn chia mã của mình thành các mô-đun và lưu chúng trong các tệp khác nhau.

Do đó tôi đã viết plugin jQuery Secret để giải quyết vấn đề.

Trong trường hợp của bạn với plugin này, mã sẽ giống như sau.

JavaScript:

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

Đánh dấu có liên quan:

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

Mở Firebug của bạn , bạn sẽ không tìm thấy hình cầu nào, thậm chí không phải là funciton :)

Để có tài liệu đầy đủ, vui lòng xem tại đây .

Để có trang demo, vui lòng xem phần này .

Mã nguồn trên GitHub .

Sử dụng các đóng cửa. Một cái gì đó như thế này cung cấp cho bạn một phạm vi khác với toàn cầu.

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

Để "bảo mật" các biến toàn cục trực quan:

function gInitUploadCount() {
    var uploadCount = 0;

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

gInitUploadCount();
gAddUploadCount();

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

Tôi là người mới làm quen với JS, hiện đang sử dụng cái này trong một dự án. (Tôi đánh giá cao bất kỳ nhận xét và chỉ trích nào)

Tôi sử dụng nó theo cách này:

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

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

    localFunc();
}

Đối với tất cả phạm vi toàn cục sử dụng 'var' và đối với phạm vi cục bộ sử dụng 'let'.