避免全局变量的正确方法

Question

在我的 JavaScript 示例中是否有适当的方法（ES6 友好）避免使用全局变量？我看到我们可以使用一个函数将我们的代码包装在一个闭包中？..

<textarea name="fileEdition" id="fileEdition" placeholder="Some content from a file, editable"></textarea>
<button id="saveFile">Save</button>

<script>
    const files = document.querySelector('#RandomFileListGotInPHP');
    const fileEdition = document.querySelector('#fileEdition');
    const saveButton = document.querySelector('#saveFile');

    function openFile() {
        fileEditionBackup = fileEdition.value;    
    }

    function saveFile() {
        console.log(`backup content before save in PHP: ${fileEditionBackup}`);
    }

    files.addEventListener('change', openFile);
    saveButton.addEventListener('click', saveFile);
</script>

感谢您的帮助。

Answer 1

我看不出反对 IIFE 的理由：

(function () {

    const files = document.querySelector('#RandomFileListGotInPHP');
    const fileEdition = document.querySelector('#fileEdition');
    const saveButton = document.querySelector('#saveFile');

    function openFile() {
        fileEditionBackup = fileEdition.value;    
    }

    function saveFile() {
        console.log(`backup content before save in PHP: ${fileEditionBackup}`);
    }

    files.addEventListener('change', openFile);
    saveButton.addEventListener('click', saveFile);
})();

当然，+function(){ ... }()或(_=>{ ... })()也可以。

避免全局变量的正确方法

Proper way to avoid global variable

javascript

variables

global