2

私はjavascriptでモジュールパターンを勉強しています.以下のコードは私の最初の試みであるタスクのリストです. 変数のスコープに小さな問題があります。

私のパブリック メソッドの 1 つで、tasks 変数にアクセスできますが、別のメソッドではアクセスできません。詳細をお伝えしようと思います。

私は、tasks.push(values);この瞬間に配列で基本的に「プッシュ」を行うパブリックメソッド「addItem」を持っています。これはうまく機能し、私の配列は新しいデータを取得します。

しかし、他のパブリック メソッド「deleteTask」で同じ変数を表示しようとすると、例: console.log('deleteTask: ', tasks);. 「deleteTask：未定義」が返されます

2 番目のコード スニペットでは、メソッドにアクセスする方法を示しています。

さて、基本的に私は理解しようとしていますが、なぜ「deleteTask」のプライベート変数にアクセスできないのですか? そして、なぜ「addItem」に入れることができるのですか? 違いは何ですか？単純なように見えますが、私はそこまで進んでいません。

var todoModule = (function ($) {
    var tasks = [];

    function doListOfTasks() {
        for(var i=0; i<tasks.length; i++){
            $('<li>', {
                name    : 'liTask',
                id      : 'liTask'+i,
                html    : tasks[i].title + ' - '
            }).appendTo('#listOfTasks');

            $('<input>', {
                type    : 'button',
                name    : 'delTask',
                id      : 'delTask'+i,
                value   : 'Del'
            }).appendTo('#liTask'+i);

            $('#delTask'+i).data('idTask', i);
        }
    }

    function clearListTasks(){
        $('#listOfTasks').html('');
    }

    return { 
        init: function(){
            this.getListTasks();
        },

        getListTasks: doListOfTasks,

        addItem: function( values ) {
            tasks.push(values);
            clearListTasks();
            this.getListTasks();

            console.log('addItem: ', tasks);
        },

        deleteTask: function(item) {
            console.log('deleteTask: ', tasks);

            var tasks = $.grep(tasks, function(value, item) {
                        //console.log('value: ', value);
                        //console.log('item: ', item);
                        return value != item;
                    });

            clearListTasks();
            doListOfTasks();
        }
    };
}(jQuery));

私のHTML：

ここでは、イベントを通じてパブリック メソッドにアクセスしています。

<script type="text/javascript">
    $( document ).ready(function() {
            todoModule.init();

            $( '#btnAdd' ).click(function() {
                todoModule.addItem({
                    title: $('#tarefa').val(),
                    date: '01/01/1999',
                    flag: 0
                });
            });

            $('ul').on('click', 'input', function() {
                var idTask = $('#'+this.id).data('idTask');
                todoModule.deleteTask(idTask);
            });
        });
</script>

このリンクからこのパターンを研究しています

4

2 に答える 2

1

「addItem」でプライベート変数にアクセスできるのはなぜですか?

それがデフォルトです。より高い (囲んでいる) スコープの変数は、その内部で定義されたすべての関数にアクセスできます。

「deleteTask」に入れられないのはなぜですか?

その行のために：

    var tasks = $.grep(tasks, …)
//  ^^^

tasksここでは、関数のスコープの名前を持つ別の変数を宣言していdeleteTaskます。それは他のものを影にします。おそらく、あなたはそれをしたくなくて、tasks変数を上位スコープから上書きしたかったのでしょう - ただvarキーワードを省略してください。

于 2013-09-09T20:21:04.940 に答える
0

これは、deleteTaskメソッドで という名前の新しいローカル変数を定義するために発生しますtasks。これは、使用時には未定義です (値が割り当てられていません)。

 deleteTask: function(item) {
      console.log('deleteTask: ', tasks);
      var tasks = $.grep(tasks, function(value, item) {
        //console.log('value: ', value);
        //console.log('item: ', item);
         return value != item;
      });
      clearListTasks();
      doListOfTasks();
 }

最初に使用してから定義するかどうかは問題ではありません - var 定義は、まだ値が割り当てられていないtaskslocal で使用する予定の をオーバーライドします(grep の実行まで値はありません)。javascript での var hoistingtasksについて読むことをお勧めします。この問題をすばやく修正するに は、ローカル変数の名前を変更します。ただし、Bergi が言ったように、関数のスコープ外にある を変更する可能性があるため、キーワードを回避するだけで十分です。
taskstasksvar

于 2013-09-09T20:16:04.670 に答える