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



我需要添加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);

Update (Additional Info):在最简单的形式中,我想在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的整个目的。

这是一个完整的工作代码:基于以下书的阅读和示例: the Principles of Object-Oriented JavaScript: By 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);

在定义getter的defineProperty调用中定义setter:

Object.defineProperty(module, 'City', {
        get: function () {
            return element.txtCity.value;           
        },
        set: function (value) {
            // do minimal check
            element.txtCity.value = value;           
        }
    });

相关内容

最新更新