javascript - 在 Javascript 模块模式中获取和分配表单元素值

Question

我需要使用模块模式 访问表单中的所有元素。简而言之，我想避免重复代码，并且只使用一个模块来进行组织。

如何在不从模块本身调用匿名函数的情况下执行此操作:

而不是这样写:FormData.LastName() 我只想让它看起来像这样:FormData.LastName;

下面是我试过的例子:

'use strict';

FormData = (function() {

    var formElement = document.forms.signup;

    return {

        LastName: function(){
            return formElement.lName.value;
        },

        SendBtn: function(){
            return formElement.submitSignupForm;
        }
    };

})();

无需 Global 和 exposure 即可调用模块并访问其内部对象值。

FormData.SendBtn().addEventListener('click', function(e){

    document.getElementById('result').innerHTML = FormData.LastName();

    e.preventDefault();
}, false);

另一种变体:

'use strict';

FormData = (function() {

    var formElement = document.forms.signup;

    var LName = function(input){

            return input.lName.value;
        };

    var SendBtn = function(input){

            return input.submitSignupForm;
        };

    return {

        LastName: LName(formElement),
        SendBtn:  SendBtn(formElement)
    };

})();

FormData.SendBtn.addEventListener('click', function(e){

    document.getElementById('result').innerHTML = FormData.LastName;

    e.preventDefault();

}, false);

Answer 1

使用 Object.defineProperty

示例:https://msdn.microsoft.com/en-us/library/dd548687%28v=vs.94%29.aspx
更好的文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties

var Mod = (function(){
    var module, formElement;
    module = {};
    formElement = document.forms.signup;

    Object.defineProperty(module, 'LastName', {
        get: function () {
            return formElement.lName.value;
        },
        writable: false,
        enumerable: true,
        configurable: true
    });
    return module;
})();