-1

In our workplace we use simple ajax library for getting page data and submitting changes to the server. Sometimes we need to change the form’s field values. We know that fields can be of any type (dropdown, textbox, radio buttons, etc.) and one of the most annoying and tedious tasks was remembering each field’s ID so could do the manipulation. (The task can exceed a few days, so I had to keep the IDs in a text document). So I made this design pattern for easily working with the fields.

 function FormFieldsManager() {
            var FormMgr = {
                txtGradeName: function (txt) {
                    if (txt) {
                        $('#txtGradeName').val(txt);
                    }
                    else {
                        return $('#txtGradeName').val();
                    }
                },
                txtGradeDesc: function (txt) {
                    if (txt) {
                        $('#txtGradeDesc').text(txt);
                    }
                    else {
                        return $('#txtGradeDesc').text();
                    }
                },
                ddStatus: function (txt) {
                    if (txt) {
                        if (isNaN(txt)) {
                            $("#ddStatus").val(txt);
                        }
                        else {
                            $("#ddStatus")[0].selectedIndex = txt;
                        }
                    }
                    else {
                        return $('#ddStatus :selected').val();//selected value: A
                    }
                }
            };
        return FormMgr;
        };

To use this function, I just call the method and I could navigate the form fields and get full JavaScript intellisense.

var form = FormFieldsManager();
form.txtGradeName('Software Developer');//to set the field value
form.txtGradeName();//to get the field value

So my questions are,

  1. What specific design pattern is this?
  2. What suggestions for improvement can you give?

P.S.: I like to call it jsPageObject.

  • Most of the if checks are useless. val already does them. – Florian Margaine Mar 24 '13 at 15:16
  • @FlorianMargaine Well I used if for checking if there is a value passed then set it to the field value else just return the field value ,I don't see them useless can you make a post and kindly point them out – Owais Qureshi Mar 24 '13 at 15:23
  • 1
    Just do return obj.val(txt) and you have exactly the same behavior. val() does what your checks are doing. Same for text(). – Florian Margaine Mar 24 '13 at 15:30
  • @FlorianMargaine hmm,I never thought like that :), Well I don't wanna set empty string into text field that's one thing I have to take care of. – Owais Qureshi Mar 24 '13 at 15:35
  • @FlorianMargaine There is a slight difference: '' will clear the value with .text(), but is false so here it acts as a getter. Might be the same with .val(). – Izkata Dec 7 '13 at 19:07
1

This is superfluous since you will only need a once instance of that object ever because it has no state. You can simply do

var FormFieldsManager = {
    txtGradeName: function (txt) {
        ...
    },
    txtGradeDesc: function (txt) {
        ...
    },
    ddStatus: function (txt) {
        ...
    }
};

You can simply refer to that, no need to create it. This is simply namespacing static functions somewhere, dunno if that even has a name.


If it was an actual object with state, I guess an improvement would be to use prototype so it's not as cast in concrete as it is now. You also won't create the function objects from scratch everytime but that only really matters when you create 100+ instances of something.

//This causes an error when you forgot to specify `new` as in `new FormFieldsManager()`
"use strict";

var method = FormFieldsManager.prototype;

function FormFieldsManager() {
    this.state = "something";
}

method.txtGradeName = function (txt) {
    ...
};

method.txtGradeDesc = function (txt) {
    ...
};

method.ddStatus = function (txt) {
    ...
};
  • hmm ,I agree with the One Instance tip. +1 for that – Owais Qureshi Mar 24 '13 at 14:44
  • As a C# developer I see no benefit of using prototypes ,when I can still do what I want , the last snippet of your's can be written without prototype , why using prototype can be helpful, can you throw some light? – Owais Qureshi Mar 24 '13 at 14:57
  • @dotNetSoldier because it's more extensible and flexible. Your function always returns a plain object that has no inheritance at all. It's the equivalent of using concrete final class in Java that doesn't even implement any interfaces, I dunno what's C# equivalent. – Esailija Mar 24 '13 at 15:11
  • A comparison can help b/w your snippet and mine ,I'm reading on prototype now... – Owais Qureshi Mar 24 '13 at 15:14
  • 1
    Yes, there are multiple instances, all using a single instance of the prototype. Thus, saving memory usage... – Florian Margaine Mar 24 '13 at 15:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.