Question

我需要将setter添加到以下JavaScript模块中：

在下面的代码中，我只是将表单数据返回给模块对象。我需要添加setter功能，以便我可以对用户输入进行最少的检查。

var Mod = (function(){

    var module = {};
    var element = document.forms.[0];

    Object.defineProperty(module, 'Country', {

        get: function () {

            return element.txtCountry.value;            
        }

    });

        Object.defineProperty(module, 'City', {

        get: function () {

            return element.txtCity.value;           
        }

    });

    return module;

})();

但是，我遇到的所有示例，包括MDN上的示例都显示了具有文字值的对象：

喜欢这个：

var module = {

  Country: "United States",

  get function() { 

    return this.Country;

  },

  set function(x) {

    this.Country = x + ' ' + somethingElse;
  }

};

如何添加setter以将数据返回给没有文字对象成员的对象？

最后，我正在调用这样的模块：

var btn = document.getElementById( 'btnDataEntry' );
var result = document.getElementById('result');

btn.addEventListener('click', function(e) {

    var t = document.createTextNode(Mod.Country + ',' + Mod.City);  

    result.appendChild(t);

    e.preventDefault();
}, false);

更新（附加信息）： 以最简单的形式，我想在setter执行检查，如下所示：

var Mod = (function(){

    var module = {};
    var element = document.forms.dataEntry;

    Object.defineProperty(module, 'Country', {

        get: function () {

            return Country;

        },

        set: function(val) {

            if( val == 'A') {

              val = element.txtCountry.value;

            }
        }
    });

    return module;

})();

更新:(解决方案）。

尽管看起来很简单，但它可能会让人感到困惑，因为当涉及到如何完成某项任务时， JavaScript 更抽象。

问题是，在Object.defineProperty()方法中使用setter时，必须使用点表示法将值传递给对象，并且还使用函数范围内的变量来模拟私有成员

如果您查看我的 之前的 代码，您会看到我直接在getter内传递表单数据，这会破坏整个目的拥有getter/setter。

这是一个完整的工作代码：基于以下书中的读物和示例：面向对象JavaScript的原理：作者：Nicholas C. Zakas。

代码：

var LocationData = (function(){

    var location = {};

    //Private member to eliminate global scope
    var _country;

    Object.defineProperty(location, "Country", {

        get: function() {

            return this._country;

            },

            set: function(value) {

            if(value === 'A') {

                this._country = value;

            } else {

                this._country = 'X';
            }

        }

    });

    return location;

})();


var btn = document.getElementById( 'btnDataEntry' );
var result = document.getElementById('result');

btn.addEventListener('click', function(e) {

    var element = document.forms[0];

    //Pass the value to the method
    LocationData.Country = element.txtCountry.value;

    var t = document.createTextNode(LocationData.Country);  

    result.appendChild(t);

    e.preventDefault();

}, false);

Answer 1

在定义getter的同一defineProperty调用中定义setter：

Object.defineProperty(module, 'City', {

        get: function () {

            return element.txtCity.value;           
        },
        set: function (value) {
            // do minimal check
            element.txtCity.value = value;           
        }

    });

如何在不使用对象文字值的情况下从setter访问表单数据？

1 个答案: