How to init object and use method in the same line? (factory patern)

Question

solution

I am still getting the hang of it, and its probally logic for a lot of you. But I've updated the post with how I got it working, might some one come here by search.

declare:

var test=Element({"id" : 1, "name" : "wrapper"}).
      append(Element({"id" : 2, "name" : "elm A"}),
             Element({"id" : 3, "name" : "elm b"})
      );

alert(test.getInfo("name"));
alert(test.aArguments["children"][1].getInfo("name"));

'class':

var Element = function ($aPassArguments) {
    aArguments: {
            "id" : false,
            "name" : false,
            "type" : false,
            "title" : false, 
            "style" : false,
            "action" : [],
            "parent" : false,
            "children" : []
        };
    for (var prop in this.aArguments)
            if (prop in $aPassArguments) 
                this.aArguments[prop] = $aPassArguments[prop];
    return {
        append: function () {
            $argList = arguments;
            for ($i = 0; $i < $argList.length; $i++)
                if (typeof $argList[$i]=="string")
                    this.setChild(this.importDB($argList[$i],true));
                else
                    this.setChild($argList[$i]);
        },
         setChild: function($oChild) {
            this.aArguments["children"][this.aArguments["children"].length]=$oChild; 
        }
    };
};

...............................................................................

old post:

I wasnt aware a new object instance in javascript is a reference instead of a copy. Now I want to have a copy of my own object Element. Apperantly (thanks @blurd) I want it to be a factory hybrid: http://javascript.info/tutorial/factory-constructor-pattern

Thanks to the help of @blurd and me defining some problems, I came up with a sollution like the following:

(but I am not happying with my usage declaration below)

var Element = function (initialConfig) {

    return {
        aArguments: {
            "id" : false,
            "name" : false,
            "type" : false,
            "title" : false, 
            "style" : false,
            "action" : [],
            "parent" : false,
            "children" : [],
        },


        create:function ($aPassArguments) {
            for (var prop in this.aArguments)
                if (prop in $aPassArguments) 
                    this.aArguments[prop] = $aPassArguments[prop];
        },
        append: function () {
            $argList = arguments;
            for ($i = 0; $i < $argList.length; $i++)
                if (typeof $argList[$i]=="string")
                    this.setChild(this.importDB($argList[$i],true));
                else
                    this.setChild($argList[$i]);
        },
         setChild: function($oChild) {
            this.aArguments["children"][this.aArguments["children"].length]=$oChild; 
        }
    };
};

usage

var test=Element();
test.create({"id" : 1, "name" : "wrapper"});
var test2=Element();
test2.create({"id" : 2, "name" : "elm A"});
var test3=Element();
test3.create({"id" : 3, "name" : "elm B"});
test.append(test2,test3);

alert(test.aArguments["name"]);
alert(test.aArguments["children"][0].aArguments["name"]);

Now I am very unhappy about the usage,I would like it be one line and use a constructor. To eventually have something like this:

var test=Element({"id" : 3, "name" : "wrapper"})
           .append(Element{"id" : 3, "name" : "elm A"}), 
                   Element({"id" : 3, "name" : "elm B"}) 
                  );

or

var test=new Element({"id" : 3, "name" : "wrapper"})
           .append( new Element{"id" : 3, "name" : "elm A"}), 
                    new Element({"id" : 3, "name" : "elm B"}) 
                  );

But the methods dont seem to be binded to the element object when I use it in this structure

For a constructor @blurd gave me this example using prototyping

var Element = function (initialConfig) {
        aArguments: {
            "id" : false,
            "name" : false,
            "type" : false,
            "title" : false, 
            "style" : false,
            "action" : [],
            "parent" : false,
            "children" : [],
        },

};
Element.prototype = {

        create:function ($aPassArguments) {
 ....

this is a follow up question on: Making a copy of an own object instead of a reference (updated post, different Q)

score 1 · Answer 1 · answered Feb 28 '14 at 15:51

Just create a factory method on Element that accepts a nested hierarchy:

var test = Element.build(
  { id: 1, name: 'wrappper', children: [
    { id: 2, name: 'elem A' },
    { id: 3, name: 'elem B' }]
  });

You're just moving the code you want to hide into a function, which hides it behind a sane interface. This is programming.

058WistWol · Answer 2 · 2014-02-28T23:12:33.653

I had to write the statement like this:

var test=Element().create({"id" : 1, "name" : "wrapper"}).
        append(Element().create({"id" : 2, "name" : "elm A"}));

I didnt really got the difference in the suggestion provided by @meagar besides that the object and inhertating is constructed in a wrapper. Instead of using, .append(). Which creates IMO the same. Perhaps its faster? saves methods? I might also just see it all wrong... its past bedtime for me :P

But thanks for the example :)

How to init object and use method in the same line? (factory patern)

solution

old post:

(but I am not happying with my usage declaration below)

usage

2 Answers2