javascript: passing as object or function

Question

My question is rather weird, it has to do with something i have seen in jQuery but so far i have been unable to recreate it.

in jQuery you can go like this

jQuery('div').append

or

jQuery.ajax

the application i am making would need a similar syntax, i notice if you use new like

var that=new function(){
}

you can call the function with just that, without the (), but in some cases i would need it.

The reason for this is some functions i have need to select a dom element just like jQuery so.

that('[data-something="this"]').setEvent('click',functin(){})

and some automatically do it so:

that.loadIt('this','[data-something="that"]') 

the reason for this is that the dom elements are loaded externally and pushed, then the script waits for it to be ready before continuing. and doing it this way, to me anyway seems like the most cleanest way to get this functionality (i am coding a full javascript framework so i avoid libraries to keep the scripts fast)

Answer 1

Functions are objects.

Just get rid of new, and add properties directly to that.

var that = function() {
    // do some work
}

that.loadit = function() {
    // do other work
}

Since you're trying to achieve something like jQuery does, then have that call a constructor.

;(function(global) {

       // function to be publicly exposed
    var that = function(foo, bar) {
        return new MyLibrary(foo, bar);
    }

       // publicly expose the function
    global.that = that;

       // use the function as a namespace for utilities
    that.loadit = function() {
        // do other work
    }

       // The actual constructor function, like the internal jQuery constructor
    MyLibrary(foo, bar) {
        // constructor function
    }

       // Prototypal inheritance of objects created from the constructor
    MyLibrary.prototype.setEvent = function() {
        // do some work
        return this;  // allows for method chaining
    };
    MyLibrary.prototype.otherMethod = function() {
        // do something else
        return this;  // allows for method chaining
    };
})(this);

Answer 2

Functions are objects and can have properties, just like other objects can. So, you can add a property to a function like this:

function myFunc(){}
myFunc.someFunc = function(){}

If you use new myFunc the resulting object won't have someFunc as it's not part of the prototype.

So, you can make something like this:

function myFunc(){
    // This lets you do "myFunc()" instead of "new myFunc()"
    if (!(this instanceof myFunc)) {
        return new myFunc();
    }
    else{
        this.val = 0;

        this.setVal = function(x){
            this.val = x;
            // for function chaining
            return this;
        }

        this.getVal = function(){
            return this.val;
        }
    }
}

// This function is not part of the prototype
myFunc.test = function(){
    alert('hi');
}

// Some tests
var obj = myFunc();
obj.setVal(12).getVal(); // 12

myFunc.test();

obj.test(); // Error: 'test' is not a function

myFunc.getVal(); // Error: 'getVal' is not a function