Organization of web application development with jQuery widgets

Problem

In this article I wanted to share my experience in developing web applications using jQuery.
During the process of writing business logic for a web application, it became necessary to correctly build code for the further development and refactoring of the project. Since this was the first experience in the "web industry", it was decided to go ahead. After some time, it became clear that the time it takes to search for the necessary fragment takes much more than to develop. Next, I would like to offer my vision of the correct organization and structuring of jQuery code.

Decision

Having studied the existing fashion trends, it became clear that the best use of patterns. Their organization is similar to what is found in other programming languages ​​and looks as follows:
- “constructor” (a method that allows you to create or return the necessary object)
- base class (structure containing the basic methods)
- inherited class (structure containing additional methods, in addition to basic).
Thus, you can classify jQuery as OOP, because at least polymorphism is present.
Consider the structures described above in more detail. First, consider the "constructor." It is a function that allows you to create or receive an instance of an object for further work with it. The following code demonstrates its structure:

$ .widget = function (name, object) {
$ .fn [name] = function (options) {
return this.each (function () {
var instance = $ .data (this, name); // get the object if it otherwise an empty object was created

if (! instance) {
instance = $ .data (this, name, Object.create (object)); // creating an
instance object . (options, this);} // initialization
});
};
};

As you can see from the code, the mechanism is simple. The task boils down to the so-called caching of objects accessed by the key (name). Also, when an object is created, it is initialized, but this action is not necessary, since delayed initialization is possible.
Now consider what the classes should look like. Let's start with the base class:

var BaseCl = {
init: function (options, element) {
this.options = $ .extend ({}, this.options, options); // "glues" the options options
this.element = $ (element); // saves reference to the base object
},

options: {
name: ''
},

func1: function (val) {
...
},
func2: function (val) {
...
}
};

The class contains an init method for initializing the necessary parameters as well as a set of additional methods and structures.
And the last class, which is an extension of the base class, is inherited:

var ChildCl = BaseCl.extend ({
init: function (options, element) {
this.options = $ .extend ({}, this.options, options); // "sticks together" options options
this.element = $ (element); // stores a link to the base object
},

options: {
name: ''
},

func3: function () {
...
},
func4: function () {
...
}
});

As you can see, this class is unified with the base. Since there is a definition of the initialization method in the definition of the class being inherited, this method will be overridden. In addition, ChildCl allows you to call both methods defined in your body and methods of the inheriting class.

Lastly, I will give methods that allow you to access the created objects:

$ .widget ('child', ChildCl);

$ (document) .ready (function () {

// call like that
$ ('# div'). child ({name: 'hello world'});
var chld = $ ('# div'). data ('child ');
chld.func1 (' ');
chld.func3 ();

// either
$ (' # div '). child ({name:' hell '});
$ (' # div '). child (' func1 ',' ');

});

Conclusion

This structuring helped to more fully organize the interaction of application objects and reduce the time spent on searching and refactoring code.