Structure of javascript object

Question

used JavaScript plugins and created my own helper functions, now I like to create my own plugin that can be used site wide by creating an object and calling its methods. There seems to be lots of different ways to do this, and I am getting confused.

Hoping someone could take a look at my approach and advise, and possibly give me some good links to read through.

function AnswerQuestion(query) {
  this.query = query;
  this.template = 'answers_searchresult';
  this.container = '#answers';

  this.SearchForAnswer = function () {
    var O = this;
    $.ajax({
      type: "POST",
      datatype: 'json',
      url: "/WebServices/GlobalWebService.asmx/AnswersSearch",
      data: JSON.stringify({ q: this.query }),
      contentType: 'application/json; charset=utf-8',
      success: function (data) {
        O.SearchForAnswerSuccess(data.d);
      },
      error: function (data) { log("Answers Search Fail"); }
    });
  };

  this.SearchForAnswerSuccess = function (data) {
    var template = Handlebars.template[this.template];
    $(this.container).append(template(data));
  };
}

Is there anything wrong with what Im doing? My outcome is to have a plugin i can initalise on any page to activate a search and present results.

if you're creating `AnswerQuestion` with the `new` keyword which it looks like you are since you're using `this` then you may want to consider prototyping it with `SearchForAnswer` and `SearchForAnswerSuccess` — andrew, Oct 14 '14 at 11:42
Hmm, not sure a downvote was needed here. @DavidB you might want to consider moving your question to http://codereview.stackexchange.com/ — Raad, Oct 14 '14 at 11:46
What do you think might be wrong? Looks good enough. You don't need to store `query` on the object unless you plan to be accessing it through the object or in a prototype function. Perhaps `searchForAnswerSuccess` could be private. I assume you plan to provide some way for people to set/change the template and container. — , Oct 14 '14 at 11:46
torazaburo - thanks. Im not sure if anything is wrong, just wanted to get an opinion — DavidB, Oct 14 '14 at 12:54
About constructor functions prototype and inheritance: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 — HMR, Oct 14 '14 at 15:43

score 1 · Answer 1 · edited Oct 14 '14 at 11:52

Actually, javascript is object oriented.

What you have done is one way of creating an object - but not the best one. A better way for creating objects in javascript is to use prototype of an object (the closest you get to inheritance).

so your code will look something like this:

function AnswerQuestion(query) {
  this.query = query;
  this.template = 'answers_searchresult';
  this.container = '#answers';
};

AnswerQuestion.prototype.SearchForAnswer = function () {
    var O = this;
    $.ajax({
      type: "POST",
      datatype: 'json',
      url: "/WebServices/GlobalWebService.asmx/AnswersSearch",
      data: JSON.stringify({ q: this.query }),
      contentType: 'application/json; charset=utf-8',
      success: function (data) {
        O.SearchForAnswerSuccess(data.d);
      },
      error: function (data) { log("Answers Search Fail"); }
    });
};

AnswerQuestion.prototype.SearchForAnswerSuccess = function (data) {
    var template = Handlebars.template[this.template];
    $(this.container).append(template(data));
  };
}

than you would initialize your object like this:

var answerQuestion = new AnswerQuestion();

That's just a quick explanation of course... javascript has design-patterns for name-spacing objects, parasitic inheritance...

I suggest starting here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

Thanks, I did read this and initally used prototype but wasn't exactly sure what the differnece was. more reading I think. — DavidB, Oct 14 '14 at 12:54

Structure of javascript object

1 Answers1