设置JavaScript对象模块模式的构造函数

Question

下面是我使用Module Pattern首次实现JavaScript对象。我需要在对象中添加一个构造函数，但是，无论出于什么原因，我所做的每一次尝试都没有用，所以我假设我正在设置错误的对象和/或某处缺少某些语法。

如何在下面的对象中添加一个简单的无参数构造函数？

var DisplaySettings = {
    //Default display settings for each producer type
    HandleAssignedView: function () {
        var producerType = $('#drpProducerType :selected').text();
        switch (producerType) {
            case "Agency":
                this.AgencyView();
                this.AgencyOptions();
                break;
            case "Sole Proprietor":
                this.NonProducerView();
                this.NonAgencyOptions();
                break;
            default:
                this.ProducerView();
                break;
        }
    },

    //Preserves database values on Edit page load
    LoadAssignedView: function () {
        var producerType = $('#drpProducerType :selected').text();
        switch (producerType) {
            case "Agency":
                this.AgencyView();
                break;
            case "Sole Proprietor":
                this.NonProducerView();
                break;
            default:
                this.ProducerView();
                break;
        }
    },

    AgencyView: function() {
        this.DisplayAgencyFields();
        this.AgencyLabels();
    },

    ProducerView: function () {
        this.DisplayProducerFields();
        this.NonAgencyLabels();
    },

    NonProducerView: function() {
        this.DisplayNonProducerFields();
        this.NonAgencyLabels();
    },

    DisplayAgencyFields: function() {
        $('.AgencyFields').show();
        $('.NonProducerFields').show();
        $('.NonAgencyFields').hide();
        $('.ProducerFields').hide();
    },

    DisplayProducerFields: function () {
        $('.AgencyFields').hide();
        $('.NonProducerFields').hide();
        $('.NonAgencyFields').hide();
        $('.ProducerFields').show();
    },

    DisplayNonProducerFields: function() {
        $('.AgencyFields').hide();
        $('.NonProducerFields').show();
        $('.NonAgencyFields').show();
        $('.ProducerFields').show();
    },

    NonAgencyLabels: function() {
        //Change DRM labels
        $('label[for=DRMCompanyName]').text('DRM Company Name');
        $('label[for=DRMCompanyId]').text('DRM Company Id');

        //Replace header text
        var newval = $('#HeaderText').text().replace("Agency", "Agent");
        $('#HeaderText').text(newval);

        //Adjust fieldset legend text
        $('#AgentTypeFields').children('legend:first').text('Producer Info');
    },

    AgencyLabels: function() {
        //Change DRM labels
        $('label[for=DRMCompanyName]').text('DRM Parent Name');
        $('label[for=DRMCompanyId]').text('DRM Parent Id');

        //Change h2 text to 'Agency' from 'Agent'
        var newval = $('#HeaderText').text().replace("Agent", "Agency");
        $('#HeaderText').text(newval);

        //Adjust fieldset legend text
        $('#AgentTypeFields').children('legend:first').text('Agency Info');
    },

    AgencyOptions: function() {
        $('#JIT').attr('checked', false);
    },

    NonAgencyOptions: function() {
        $('#WelcomeLetter').attr('checked', false);
    }
};

Answer 1

你可以通过将所有方法移动到构造函数的原型来实现这一点：

function DisplaySettings() {
    // constructor initialization code here
}

DisplaySetttings.prototype = {
    //Default display settings for each producer type
    HandleAssignedView: function () {
        var producerType = $('#drpProducerType :selected').text();
        switch (producerType) {
            case "Agency":
                this.AgencyView();
                this.AgencyOptions();
                break;
            case "Sole Proprietor":
                this.NonProducerView();
                this.NonAgencyOptions();
                break;
            default:
                this.ProducerView();
                break;
        }
    },

    //Preserves database values on Edit page load
    LoadAssignedView: function () {
        var producerType = $('#drpProducerType :selected').text();
        switch (producerType) {
            case "Agency":
                this.AgencyView();
                break;
            case "Sole Proprietor":
                this.NonProducerView();
                break;
            default:
                this.ProducerView();
                break;
        }
    },

    AgencyView: function() {
        this.DisplayAgencyFields();
        this.AgencyLabels();
    },

    ProducerView: function () {
        this.DisplayProducerFields();
        this.NonAgencyLabels();
    },

    NonProducerView: function() {
        this.DisplayNonProducerFields();
        this.NonAgencyLabels();
    },

    DisplayAgencyFields: function() {
        $('.AgencyFields').show();
        $('.NonProducerFields').show();
        $('.NonAgencyFields').hide();
        $('.ProducerFields').hide();
    },

    DisplayProducerFields: function () {
        $('.AgencyFields').hide();
        $('.NonProducerFields').hide();
        $('.NonAgencyFields').hide();
        $('.ProducerFields').show();
    },

    DisplayNonProducerFields: function() {
        $('.AgencyFields').hide();
        $('.NonProducerFields').show();
        $('.NonAgencyFields').show();
        $('.ProducerFields').show();
    },

    NonAgencyLabels: function() {
        //Change DRM labels
        $('label[for=DRMCompanyName]').text('DRM Company Name');
        $('label[for=DRMCompanyId]').text('DRM Company Id');

        //Replace header text
        var newval = $('#HeaderText').text().replace("Agency", "Agent");
        $('#HeaderText').text(newval);

        //Adjust fieldset legend text
        $('#AgentTypeFields').children('legend:first').text('Producer Info');
    },

    AgencyLabels: function() {
        //Change DRM labels
        $('label[for=DRMCompanyName]').text('DRM Parent Name');
        $('label[for=DRMCompanyId]').text('DRM Parent Id');

        //Change h2 text to 'Agency' from 'Agent'
        var newval = $('#HeaderText').text().replace("Agent", "Agency");
        $('#HeaderText').text(newval);

        //Adjust fieldset legend text
        $('#AgentTypeFields').children('legend:first').text('Agency Info');
    },

    AgencyOptions: function() {
        $('#JIT').attr('checked', false);
    },

    NonAgencyOptions: function() {
        $('#WelcomeLetter').attr('checked', false);
    }
};

然后你会创建一个像这样的对象：

var settings = new DisplaySettings();

并调用这样的方法：

settings.LoadAssignedView();

---

仅供参考，Javascript中通常的惯例是构造函数具有DisplaySettings之类的初始上限，但方法没有初始上限。