CODEWITHSUNDEEP
jquery
Samantha J T Star
Samantha J T Star

Reputation: 32828

Simple explanation for why datatables uses $.fn.dataTableExt.afnSortData

I saw a post out there:

what does $.fn mean

However I still don't understand it. Can someone explain this in very simple terms to me. Why did they choose to specify it this way?

Upvotes: 1

Views: 1844

Answers (2)

Andrea Turri
Andrea Turri

Reputation: 6500

In jQuery, the fn property is just an alias to the prototype property.

The jQuery identifier (or $) is just a constructor function, and all instances created with it, inherit from the constructor's prototype.

Source: What does jQuery.fn mean?

So it stand just for jQuery.prototype.

$.fn === jQuery.prototype

What .prototype is?

In JavaScript, the prototype is the mechanism which provides inheritance.

Example: String.prototype refers to the prototype object of Strings, which contains (among other things) methods which can be invoked on any String.

Upvotes: 1

João Silva
João Silva

Reputation: 91349

$.fn is just an alias for jQuery.prototype. To write a jQuery plugin, such as DataTables, one usually starts by adding a new function property to $.fn.

In simpler terms, when you write $.fn.pluginName, you are extending jQuery's prototype, by adding a new function called pluginName to it. This way, you can call it using, for example, $("#myElement").pluginName(). That's basically what DataTables does, it provides an extension to jQuery called dataTablesExt.

Now, this plugin has several properties. One of them, is called afnSortData (which you could also refer to using jQuery.prototype.dataTableExt.afnSortData). This way, the plugin properties are scoped to the dataTableExt object/plugin. DataTables could have opted to define it in the global namespace, but this way, someone could overwrite afnSortData with, say, {} and break the plugin.

Upvotes: 5

Related Questions