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

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 时，您必须使用点符号将值传递给对象，并且还使用范围内的变量模拟私有(private)成员的函数。

如果您查看我的之前代码，您会发现我直接在getter内传递表单数据，这击败了拥有 getter/setter 的全部目的。

这里是一个完整的工作代码:基于以下书籍中的阅读 Material 和示例:面向对象 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;           
        }

    });