jQuery Plugin Conditional Logic

[dyr]

http://codepen.io/shawkdsn/pen/emFpG

Working on a basic jQuery plugin with some binary parameters (insofar as there are two options for the value.) For example: ‘limitDirection’ == ‘up’ || ‘down’, ‘limitMode’ == ‘word’ || ‘character’.

Then I have a bunch of logic in various functions that branches based on one or more of these parameters. I don’t like how many conditionals there are checking these two parameters. See the getText method for the most heinous example.

So what are some strategies for avoiding this type of situation? Is my approach sound?

Thanks everyone.

[dyr]

Nice Mottie, I like that change. You’ve removed two if statements which is great :D

I wonder how this sort of thing is handled in more complex situations with more configuration options. Perhaps switch statements are the logical next step?

I had considered that but it seems totally overkill for situations where there are only two options.

Also I found it slightly humorous that you linked to the ternery operators page when I’m already using a bunch of those elsewhere in the code. :) :)

[dyr]

Two more questions to throw out there.

When I’m checking certain parameters I’m using ternary operators since there are only two options, for example:

getLimitMode: function() {
      // set mode based on data-attr's
      var mode = !!this.element$.attr( 'data-limit-char'  )
        ? "character"
        : !!this.element$.attr( 'data-limit-word' )
          ? "word"
          : "";

    // set max based on mode
    this.limitMax = mode == "character"
      ? this.element$.attr( 'data-limit-char' )
      : this.element$.attr( 'data-limit-word' );

    // crude check of improper data attr
      if ( mode == "" ) {
        console.log( "Please set a data-limit-word or data-limit-char attribute!" );
      }
      return mode;
}

You can see there’s a super crude check to see if the data-attribute is not set, however that’s the only validation of configuration I’m doing at this point. I’m wondering what a better approach to this would be. I’ve seen some suggestions that I could check if the value is invalid first and throw an exception then check the values individually and assign the correct string.

And secondly, I’m wondering how I might optimize this function which has some compound conditionals (is that a real term?):

validateCount: function( count ) {
      if (
        // direction is up and count exceeds max OR
        // direction is down and count is less than 0
        ( this.settings.limitDirection == "up"   && count > this.limitMax ) ||
        ( this.settings.limitDirection == "down" && count < 0 ) ) {

        // invalidate
        this.limitElement$
          .removeClass( this.settings.limitValidClass )
          .addClass( this.settings.limitInvalidClass );

      } else if (
        // direction is up and count is greater than 0 and less than or equal to max OR
        // direction is down and count is greate than or equal to 0 and not equal to max
        ( this.settings.limitDirection == "up"   && count > 0  && count <= this.limitMax ) || 
        ( this.settings.limitDirection == "down" && count >= 0 && count != this.limitMax ) ) {

        // validate
        this.limitElement$
          .removeClass( this.settings.limitInvalidClass )
          .addClass( this.settings.limitValidClass );           
      }
    }

Cheers

[dyr]

Haha, I figured as much. :)

That’s a neat example. So you’re just using two arrays as a sort of association between css selectors and functions used as a click handler more or less? Then you basically loop through the controls and bind each to it’s corresponding function, if I understand correctly.

This is similar to the “decision tables” style of computing “complex” logic, right?

Thanks Mottie, you’re always super helpful.

[dyr]

PSA:

According to this: http://jsperf.com/if-else-vs-arrays-vs-switch-vs-ternary it seems that switch statements are the most performant.

In my case I’m 99% sure the difference is negligible but it’s something to be aware of.

[Mottie]

Yeah, it’s sort of like a decision table :P

I was looking at some of those other jsPref revisions and found this one: http://jsperf.com/if-else-vs-arrays-vs-switch-vs-ternary/24 which doesn’t show really any difference.

[dyr]

Thanks for all your help Mottie!

In looking at my code did you have any other general suggestions for ways to improve it? ( organization, naming, etc.)

I’ve updated the PEN with a few changes:
http://codepen.io/shawkdsn/pen/emFpG

I think it makes less sense to have a default mode and limit for a plugin of this type since it’s more or less impossible to assume either of those values so to me there are no “safe” defaults. Instead I believe configuration should be mandatory and the plugin should throw errors if things are not correctly set up. Thoughts?

[Author]

Posts