jQuery Attribute Wildcard Selectors

You most likely already know it but I thought I'd highlight some common wildcard selector patters that can be used in jQuery .. I've added a jsFiddle here (http://jsfiddle.net/roeburg/mkTvx/) ..

Attribute Contains Prefix Selector [name|="value"]

Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-). (jQuery Api Link :  http://api.jquery.com/attribute-contains-prefix-selector/)

Attribute Contains Selector [name*="value"]

This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value. Compare this selector with the Attribute Contains Word selector (e.g. [attr~="word"]), which is more appropriate in many cases. (Jquery Api Link: http://api.jquery.com/attribute-contains-selector/)

Attribute Ends With Selector [name$="value"]

Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive. (jQuery Api Link: http://api.jquery.com/attribute-ends-with-selector/)

Attribute Contains Word Selector [name~="value"]

Selects elements that have the specified attribute with a value containing a given word, delimited by spaces. This selector matches the test string against each word in the attribute value, where a "word" is defined as a string delimited by whitespace. The selector matches if the test string is exactly equal to any of the words. (jQuery Api Link: http://api.jquery.com/attribute-contains-word-selector/)

There are of course others ..

Attribute Equals Selector [name="value"]

Selects elements that have the specified attribute with a value exactly equal to a certain value.

Selectors > Attribute | Selectors > jQuery Extensions

Attribute Not Equal Selector [name!="value"]

Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value.

Selectors > Attribute

Attribute Starts With Selector [name^="value"]

Selects elements that have the specified attribute with a value beginning exactly with a given string.

Selectors > Attribute

Has Attribute Selector [name]

Selects elements that have the specified attribute, with any value.

Selectors > Attribute

Multiple Attribute Selector [name="value"][name2="value2"]

Matches elements that match all of the specified attribute filters.

Venturing into the Revealing Module Pattern with JavaScript

I came across Addy Osmani's blog post about Learning JavaScript Design Patterns the other day. Loved it!

I think I'm one of those silly developers that gets super-duper excited when I see something that I like and then get to put it in practice. Well, I did exactly that. :)

I loved what Addy said about design patterns:

"Patterns are not an exact solution. It’s important that we remember the role of a pattern is merely to provide us with a solution scheme. Patterns don’t solve all design problems nor do they replace good software designers, however, they do support them".  

Let's get into it then ..

I was writing a rule engine for a part of our application. As you can see in the code below, the sp.editor.rules namespace contains the methods such as MeetsButtonCriteria that I can call.

 
$(function () {
    if (sp && sp.editor) {
        // Initialise the rules namespace
        sp.editor.rules = sp.editor.rules || {};
        
        // Private methods
        sp.editor._AreMultipleNodesSelected = function () {
            // Logic goes here.
        };


        // Rules for buttonize
        sp.editor.rules.MeetsButtonCriteria = function (editor) {
            if (sp.editor._AreMultipleNodesSelected(editor)) {
                // More Code Here ..
            } else {
                // More Code Here ..
            }

            return true; // Temp Return True
        };
    }
});

The namespace also contains other helper methods that MeetsButtonCriteria calls such as _AreMultipleNodesSelected. In the code I simply used a convention that private methods begin with an underscore.

While that seems to do the trick, I still found that rather clunky and non-defensive. This is where I thought that the Revealing Module Pattern might help.

The main benefit of the pattern is that the pattern allows the syntax of our scripts to be more consistent. It also makes it more clear at the end of the module which of our functions and variables may be accessed publicly which eases readability.

So this is what the modified script looks like.

 
sp.editor.rules = function () {
    // Declare the Private Functions Here!
    
    var areMultipleNodesSelected = function () {
        // Logic goes here.
    };
    
    var meetsButtonCriteria = function (editor) {
        if (areMultipleNodesSelected(editor)) {
            // More Code Here ..
        } else {
            // More Code Here ..
        }

        return true; // Temp Return True
    };

    // This is what gets returned (REVEALED).
    return {
        MeetsButtonCriteria: meetsButtonCriteria
    };
}();

Easy-peasy na? Also, just a word of advise, I forgot to convert sp.editor.rules to a self executing function and spent like 15 minutes trying to figure out what was wrong. Yikes! So don't forget that.