Using the $ Shortcut in Your Plugin - J Query

Problem
Other JavaScript libraries make use of the $ shortcut. jQuery itself uses $ only as a shortcut, with the main object being named jQuery. How can you ensure that your plugin maintains compatibility with other plugins and libraries?

Solution

jQuery itself uses the $ function as a custom alias for the jQuery object. When jQuery is set into compatibility mode, it passes back control of the $ alias to the original library that defined it. Plugins can be crafted to use the same technique.
By wrapping your plugin in an anonymous function and immediately executing that function, the $ shortcut is kept inside the plugin. Code outside of the plugin can use $ normally. Inside the plugin, $ will reference the jQuery object as normal:

Discussion

Wrapping your distributed code in an anonymous function is a very straightforward and simple step that adds several features and ensures that your plugin code can play nicer in the wider world that your users may live within.
Adding a semicolon at the beginning of your function definition helps protect against another developer who may have forgotten to include an ending semicolon in their library. The JavaScript language breaks statements on new line by default, but many users take advantage of minimization tools that compress the entire set of JavaScript in their projects into a single file. This process removes the line endings and can cause errors if your code follows immediately after. Adding the initial semicolon is a quick and easy trick to protect against that possibility.
The open parenthesis immediately begins the anonymous function definition. Within our anonymous function, we define a function that passes the variable that we want to use in place of the fully named jQuery object. In this case, we want to take advantage of using $ as the variable. Defining an additional function is required because of the way the JavaScript language handles scoping. In more traditional languages such as Java and C++, scope is limited to the block statement. In JavaScript, scope is wrapped in functions. Therefore, the reason for using a function here is really to set up a scope boundary that we can define our plugin within.
What follows is a new version of our plugin, with the sole change of swapping out the way we utilize the jQuery object. Because we’ve wrapped this plugin anonymously and limited the scope of the $ variable, we can now use $ freely without conflict from any other code.
The last line wraps up the scoping function and anonymous function with a close bracket and close parenthesis, respectively. The last bit is what actually calls our anonymous function immediately after it has been defined. This is where we tell our function to pass in the jQuery object, which is what gets renamed to $ within our function.
Lastly, we close off our new statement with a semicolon to protect against JavaScript minimization and compression errors.
The $ shortcut can be incredibly useful in writing JavaScript code. It cuts down on code size, promotes good code design, and has become extremely popular and well known.
Thus, many libraries take advantage of the $ shortcut, tying it into their own context.
With each library supporting their own version of the $ shortcut, conflicts can easily arise. By wrapping your plugin code within an anonymous function, you can ensure that your plugin maintains a level of scope around usage of the $ shortcut that will reduce the potential for conflicts with other JavaScript libraries.
One additional side effect of wrapping your plugin in an anonymous function, as described earlier, is that a closure is created. Utilizing a closure in JavaScript aids in properly name spacing any methods or variables that you may need to define, further reducing the chance for variable names or function names to conflict with other code.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics