為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類的初始大寫字母，但是方法沒有初始大寫字母。