javascript - 将变量传递给对象方法javascript

Question

试图了解 Javascript 中的对象、方法、闭包等。

不明白为什么这不起作用，我想我的想法存在一些根本性缺陷。我希望将 val 变量传递给 addNote() 函数，但事实并非如此。我认为在函数外部声明的任何变量都可用于该函数，只要它们不在另一个函数内即可。这不对吗？

if(typeof(Storage) !== "undefined") {
      console.log(localStorage);

      var $input = $('#input'),
          $submit = $('#submit'),
          $list = $('#list'),
          val = $input.val();

      var noteApp = {

        addNote : function(val) {
          var item = val.wrap('<li />');
          item.appendTo($list);

          clearField();
        },

        clearField : function() {
          $input.val = '';
        },

        delNote : function(note) {

        }

      };

      $submit.on('click', function(){
        noteApp.addNote();
      });

    } else {

    }

我正在努力了解专业人士如何设法让他们的代码如此干净、简洁和模块化。我认为笔记应用程序将是一个完美的开始，遗憾的是我卡在了第一个障碍......

干杯。

Answer 1

题目中的代码有几个问题

1. 定义一个名为 val 的参数并且不将参数传递给函数
2. 在对象字面量中调用 clearField() 时是 this.clearField()
3. 您只会获得一次值(value)，而不是每次点击都获得值(value)
4. val 是一个字符串，它没有wrap方法
5. $input.val = ''; 不是有效的 jQuery

我会这样清理它

var noteApp = {
    init: function() {
        if (this.hasStorage) {
            this.elements().events();
        }
    },
    elements: function() {
        this.input  = $('#input');
        this.submit = $('#submit');
        this.list   = $('#list');
        return this;
    },
    events: function() {
        var self = this;

        this.submit.on('click', function(){
            self.addNote();
        });
    },
    hasStorage: (function() {
        return typeof(Storage) !== "undefined";
    })(),
    addNote: function() {
        this.list.append('<li>' + this.input.val() + '</li>');
        this.clearField();
        return this;
    },
    clearField: function() {
        this.input.val('');
    },
    delNote : function(note) {

    }
}

FIDDLE

记得调用init方法

$(function() { noteApp.init(); });