CODEWITHSUNDEEP
javascripthtml
user3815508
user3815508

Reputation: 399

How do I write a function with extend functionality in javascript?

I try to realize a function e.g. MyFn() with some features as follows:
1. MyFn('Id') > It must be result the value of document.getElementById('Id');
2. MyFn('Id').MyMethode(); > It must be result the performing of a function.
Below this is realized by means of "Object.prototype" as follows:

Object.prototype.MyFn =function(param1){ return document.getElementById(param1); };
alert( MyFn('mydiv1') );
MyFn('mydiv1').posi = function() { alert("Hello, I'm the function posi!"); };
MyFn('mydiv1').posi();
alert( MyFn('mydiv1') );

Just the above example is what I'm trying to realize. But I don't want to use Object.prototype or jQuery.
Below is my wrong approach (it is maybe helpfully what I'm trying to say or to do):

var MyObj = {
    method: function(args, callback) {
        if(typeof callback == "function") {
            callback();
        }
        return 123;
    }
}

MyFn = function(sId) { 
    return MyObj;
};

alert( MyFn("mydiv1").method() ); // This is ok, because it calls the method: MyObj.method() as it was expected.
alert( MyFn("mydiv1") ); // <-- But here I like to get document.getElementById("mydiv1").

Note: The syntax of code (how the functions are to call) is important! The functions are to call as follows: MyFn('Element-Id') or MyFn('Element-Id').posi(), but not something as follows: MyObj.MyMethode()
Do you have any idea how can I it realize? Thanks in advance.

Upvotes: 1

Views: 87

Answers (4)

adeneo
adeneo

Reputation: 318212

Should be rather straight forward, seeing as functions are objects as well.
The way it's usually done, and the way jQuery does it, is to return a new instance of the function, which is done with a simple check

function MyFn(selector, context) {

    if ( !(this instanceof MyFn) ) { // not an instance

        return new MyFn(arguments);  // calls itself with the "new" keyword

    } else { // now it is an instance

        context = context || document;
        this[0] = context.getElementById(id);
    }

    return this;
}

Now building on that, we can add methods, but that requires prototyping them, which is the correct way to do this anyway

MyFn.prototype.width = function() {
    return this[0].style.width;
}

and even make those methods chainable

MyFn.prototype.width = function(width) {

    if ( width ) {
        this[0].style.width = width + 'px';
        return this;
    } else {
        return this[0].style.width;
    }

}

FIDDLE

Upvotes: 1

Alex
Alex

Reputation: 4934

You could try something like:

var MyObj = {
    method: function(args, callback) {
        if(typeof callback == "function") {
            callback();
        }
        return 123;
    }
}

var MyFn = function(sId) { 
    this.elem = document.getElementById(sId);
    this.MyObj = MyObj;
    return this;
};

alert( MyFn("mydiv1").MyObj.method() ); 
alert( MyFn("mydiv1").elem );

This returns a reference to the function, after the function executes, so offers syntax much like C# extension methods for example.

Upvotes: 1

meskobalazs
meskobalazs

Reputation: 16041

This is a bit hacky solution:

var MyObj = function (id) {
    var obj = document.getElementById(id);
    // attach functions here
    obj.myFun = function () {
        // ...
    }
    // ...
    return obj;
}

You get the object, attach your own functions to the object (hopefully without redefining existing ones), then return it.

Upvotes: 0

Remy Grandin
Remy Grandin

Reputation: 1686

Ugly, not recomended by almost all design patern, but should work :

MyFn = function(sId) {
    var obj = document.getElementById(param1);

    obj.method = function(args, callback) {
        if(typeof callback == "function") {
            callback();
        }
        return 123;
    }
    return MyObj;
};

Basicly you add the function manualy to the object.

It's not a good desing patern as someone external won't know in advance that the object has an extra method.

Upvotes: 0

Related Questions