javascript - 为 JavaScript 对象模块模式设置构造函数

Question

下面是我使用模块模式对 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

您可以通过将所有方法移至构造函数的原型(prototype)来实现:

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，但方法没有初始上限。