Javascript 全局变量和命名空间答案

【问题标题】：Javascript global variable and namespaceJavascript 全局变量和命名空间
【发布时间】：2017-01-04 02:58:38
【问题描述】：

我试图了解为什么选项卡没有使用通过表单输入的值进行更新。

程序由三部分组成：

tasks10.html 带有表单和 tasks10.js 调用
utilities10.js 将函数分组到对象 U = {...} 以创建命名空间。用于填充选项卡的函数名为 plusTask。
tasks10.js 是一个立即调用的函数，其目的是将“onsubmit”事件分配给函数 U.plusTask

我把声明 var tasks = [];在 tasks10.js => 失败；在 plusTask => 失败。在这两种情况下，选项卡都没有填充，索引仍然保持为 0。

HTML

<!doctype html>
<head>
    <title>List</title>
    <link rel="stylesheet" href="css/form.css">
</head>
<body>      
    <form action="#" method="post" id="theForm">
        <fieldset><legend>Enter an Item To Be Done</legend>
            <div><label for="task">Task</label><input type="text" name="task" id="task" required></div>
            <input type="submit" value="Add It!" id="submit">
            <div id="output"></div>
            <p id='test'> -- </p>
        </fieldset>
    </form>
    <script src="js/utilities10.js"></script>
    <script src="js/tasks10.js"></script>
</body>
</html>

tasks10.js

(function() {   // immediately invoked function
    'use strict';
    //window.addEventListener('onsubmit',U.plusTask,false);
    U.$('theForm').onsubmit = U.plusTask;
})(); // End of anonymous function.

utilities10.js

var U = {
    // For getting the document element by ID:
    $: function(id) {
        'use strict';
        if (typeof id == 'string') {
            //alert("cxcwcw  $"+ id);
            return document.getElementById(id); 
        }
    }, // End of $() function.

    plusTask : function() {
        var tasks = [];

        // Function called when the form is submitted.
        // Function adds a task to the global array.

        function innerCalculate(){
            alert(tasks.length);
            'use strict';

            // Get the task:
            //var task =this.$('task');
             var task =U.$('task'); alert("task : " + task);
            //var task =document.getElementById('task'); 

            // Reference to where the output goes:
            //var output = this.$('output');
            var output = U.$('output');
            //var output = document.getElementById('output');
            alert("in");

            // For the output:
            var message = '';

            if (task.value) {
            U.$('test').innerHTML = tasks.length;
            //document.getElementById('test').innerHTML = tasks.length;
                // Add the item to the array:
                tasks.push(task.value);

                // Update the page:
                message = '<h2>To-Do</h2><ol>';
                for (var i = 0, count = tasks.length; i < count; i++) {
                    message += '<li>' + this.tasks[i] + ' - ' + count + '</li>';
                }
                message += '</ol>';
                output.innerHTML = message;

            } // End of task.value IF.

            // Return false to prevent subssmission:
            return false;

        } // End of innerCalculate
        innerCalculate();

    } // End of plusTask function
} // End of U

【问题讨论】：

标签： javascript namespaces global

【解决方案1】：

plusTask 函数在每次调用时都会重置其所有局部变量。

我认为您的意思是使用 IIFE 来创建闭包。另外，this.tasks[i] 应该是 tasks[i]。

plusTask : (function() { // IIFE
    var tasks = [];
    function innerCalculate() {
        alert(tasks.length);
        'use strict';
        var task = U.$('task');
        alert("task : " + task);
        var output = U.$('output');
        alert("in");
        var message = '';
        if (task.value) {
            U.$('test').innerHTML = tasks.length;
            tasks.push(task.value);
            message = '<h2>To-Do</h2><ol>';
            for (var i = 0, count = tasks.length; i < count; i++) {
                message += '<li>' + tasks[i] + ' - ' + count + '</li>';
            }
            message += '</ol>';
            output.innerHTML = message;
        }
        return false;
    }
    return innerCalculate; // return closure
})() // invoke plusTask IIFE

【讨论】：

【解决方案2】：

在第 44 行你有：

message += '<li>' + this.tasks[i] + ' - ' + count + '</li>';

但是您想要的任务是来自闭包的任务，而“this”是 Window。所以你想要：

message += '<li>' + tasks[i] + ' - ' + count + '</li>';

此外，如果您在此处按下提交，它将重新加载页面。所以 plusTask 应该像这样开始：

plusTask : function(event) {
    event.preventDefault();
    ...

【讨论】：

实际上，在这种情况下，this 将是 U，因为它位于对象内部。好收获
嗯，也许我犯了一个错误，但我在调试器中查看该行的“this”并强烈记得它说它是“Window”。
你说得对，我在想一旦它被用作闭包，它的价值是什么。

【解决方案3】：

Bemmu，Castle，干得好！我应该考虑关闭并错过使用它。最终的 js 代码正在完成这项工作。谢谢你们俩。：

<pre>
plusTask : (function(e) { // IIFE           
   var tasks = [];

   function innerCalculate(e) {
       if(typeof e == 'undefined') e = window.event;            
          alert(tasks.length);
          'use strict';
          var task = U.$('task');
          alert("task : " + task);
          var output = U.$('output');
          alert("in");
          var message = '';
        if (task.value) {
              U.$('test').innerHTML = tasks.length;
              tasks.push(task.value);
             message = '<h2>To-Do</h2><ol>';
                for (var i = 0, count = tasks.length; i < count; i++) {
                    message += '<li>' + tasks[i] + ' - ' + count + '</li>';
                }
                message += '</ol>';
                output.innerHTML = message;
            }
            // Return false to prevent submission:
            if (e.preventDefault) {
                e.preventDefault();
                } else {
                e.returnValue = false;
                    }

     return false;
      }
    return innerCalculate; // return closure
  })() // invoke plusTask IIFE
 </pre>

【讨论】：

如果您想表达感谢，请点赞和接受答案。
我正在为 Stakoverflow 中的新用户阅读文档。还不知道如何投票和接受答案。 ?