Create jquery function

Question

I would like to know how to create jquery function that I could then call with parameters name and value declared in it.

Instead of giving in correct order variables to function like this:

myFunction("My function name",true,false);

I would like to give to function something like that:

function({
  displayName: "My function name",
  editable: true,
  displayForm: false;
})

where order of parameters dosnt matter, cause I am giving it by theier name.

I've saw that configuration in every jquery lib (jqPlot,JqGrid,noty etc.) Here is example:

$(document).ready(function(){
  var plot1 = $.jqplot('chart1', [cosPoints], {  
      series:[{showMarker:false}],
      axes:{
        xaxis:{
          label:'Angle (radians)'
        },
        yaxis:{
          label:'Cosine'
        }
      }
  });
});

--Edited--

I have my own js function to print trees from json, but I have so much parameters, that it is so hard to read and edit.

Just pass the object as a parameter and use it within the function. — Rory McCrossan
– Rory McCrossan, Commented Nov 26, 2014 at 11:31

George · Accepted Answer · 2014-11-26 11:37:23Z

3

There is no reason why you can't do what you are asking, just have your function expect an object literal:

function MyFunction(o){
    // Do whatever you need to do with your object properties,
    // like set some corresponding scoped variables.
    // 0 would be their default values, change as appropriate.
    var displayName = o.displayName || 0,
        editable = o.editable || 0,
        displayForm = o.displayForm || 0;
}

Then call it how you wanted:

myFunction({
    displayName: "My function name",
    editable: true,
    displayForm: false;
});

For the record, there is no jQuery functionality here. This is all vanilla JavaScript.

Note, if you are using jQuery, you could check that the parameter is in fact an object literal before going on to carry out functionality, with $.isPlainObject(o).

edited Nov 26, 2014 at 11:37

answered Nov 26, 2014 at 11:32

George

36.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonast92 Over a year ago

Beat me to it. The most solid solution. Except for the default values which should probably be in sync with the expected datatypes.

George Over a year ago

@Jonast92 Sure, but in this case I'm not going to go ahead and assume data-types. I will add a note though, thanks.

Samuel Caillerie · Accepted Answer · 2014-11-26 11:42:26Z

Just declare your function taking an object as the argument :

function myFunction(obj) {
    if(obj.displayName) {
    // do something with obj.displayName
    }

    // ....
}

And you can call it as you indicated :

myFunction({
    displayName: "My function name",
    editable: true,
    displayForm: false;
});

or even with this :

myFunction({
    editable: true,
    displayForm: false;
});

In order to test if a property exists in your object passed as the argument, just put the test as I have done : obj.myProperty.

Another point is that you can put default values with $.extend :

function myFunction(obj) {
    var myDefaults = {
        displayName: "My default name",
        editable: false
    };

    // Fill `obj` with the missing values that have to be supplied
    // and that we take in `myDefaults`
    $.extend(obj, myDefaults);

    // ...
}

Tejesh · Accepted Answer · 2014-11-26 11:34:27Z

jQuery Extension

jQuery.fn.extend({
    zigzag: function () {
        var text = $(this).text();
        var zigzagText = '';
        var toggle = true; //lower/uppper toggle
            $.each(text, function(i, nome) {
                zigzagText += (toggle) ? nome.toUpperCase() : nome.toLowerCase();
                toggle = (toggle) ? false : true;
            });
    return zigzagText;
    }
});

console.log($('#tagline').zigzag());
//output: #1 jQuErY BlOg fOr yOuR DaIlY NeWs, PlUgInS, tUtS/TiPs &amp; cOdE SnIpPeTs.

//chained example
console.log($('#tagline').zigzag().toLowerCase());
//output: #1 jquery blog for your daily news, plugins, tuts/tips &amp; code snippets.

For more references you can check : http://www.sitepoint.com/5-ways-declare-functions-jquery/

dotty · Accepted Answer · 2014-11-26 11:34:30Z

0

The {} is just shorthand for an object.

Take this example

var person = {firstName:"John", lastName:"Doe", age:46};

If you pass that as an unnamed object to a function, you can pick our the values from that. For example:

function myFunc( myArg ){
    alert( myArg.firstName );
}

and call it with

myFunc({firstName:"John", lastName:"Doe", age:46});

answered Nov 26, 2014 at 11:34

dotty

41.7k67 gold badges155 silver badges197 bronze badges

Comments

S.Pols · Accepted Answer · 2014-11-26 11:35:28Z

0

It's is working properly if you just pass your object as parameter to the function.

test({a:"TestA", b:"TestB"});

function test(object)
{
    alert(object.a);
    alert(object.b);
}

answered Nov 26, 2014 at 11:35

S.Pols

3,4592 gold badges23 silver badges44 bronze badges

Collectives™ on Stack Overflow

Create jquery function

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related