Javascript全局变量和命名空间

Javascript global variable and namespace

本文关键字：命名空间 全局变量 Javascript      更新时间：2023-09-26

我试图理解为什么一个选项卡不通过表单输入值更新。

程序由三部分组成:

  1. tasks10.html的形式和tasks10.js调用
  2. utilites10 .js将函数分组到一个对象U ={…}来创建命名空间。用于填充选项卡的函数名为plusTask。
  3. tasks10.js是一个立即调用的函数，目的是为'onsubmit'事件分配函数u.p ulstask

我把声明var tasks = [];In tasks10.js => failed;in plutask => failed。在这两种情况下，选项卡都没有被填充，索引仍然保持为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

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

我认为你的意思是使用生命来创建闭包。同时，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

第44行:

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

但是您想要的任务是闭包中的任务，而"this"是窗口。所以你要改成:

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

另外，如果你在这里按下submit，它会重新加载页面。所以plusTask应该像这样开始:

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

本姆，卡塞尔，干得好!我应该考虑结束，而没有使用这个。最终的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>
相关文章：