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 competently build code for 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 to search for the required fragment takes much more than the development. Next, I would like to offer my own vision of the proper 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 that found in other programming languages ​​and looks like this:
- "constructor" (the method allows you to create or return the desired object)
- base class (structure containing basic methods)
- inherited class (structure containing additional methods, in addition to the base).
Thus, you can rank JQuery to OOP, because at least polymorphism is present.
Consider the constructs examined above in more detail. First, consider the "constructor". It is a function that allows you to create or obtain 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 was created otherwise an empty object

if (! instance) {
instance = $ .data (this, name, Object.create (object)); // create an object
instance. (options, this);} // initialization
});
};
};
')
As you can see from the code, the mechanism is simple. The task is reduced to the so-called caching of objects that are 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 how 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" options options
this.element = $ (element); // saves a reference to the base object
},

options: {
name: ''
},

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

The class contains the 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 inheritable:

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

options: {
name: ''
},

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

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

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

$ .widget ('child', ChildCl);

$ (document) .ready (function () {

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

//or
$ ('# 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.