Application scalability Javascript

[Botan]

Anyone who has developed a small application or a simple interactivity in JavaScript you will come across at least one time in a way that provided for a callback function. Structures of this type are encountered most often by using libraries like jQuery:

 $ ('A'). Click (function () {
     // Here the code of the callback
 });

Many developers do not find any problem in using this pattern in their programming code, and very often the main cause of this behavior is the lack of emphasis on planning applications and the use of JavaScript language as a replacement for Flash or panacea to the limitations of Sun. Indeed, although the code in question is entirely legitimate, it introduces the architectural limitations that preclude the modularity and scalability. The heaviest consequence of all this is that often there is to rewrite whole portions of code to accommodate a single change of the application.

[Mentos]

The limitations in the use of callback derived mainly from the fact that too often there are associated with anonymous functions, a powerful but dangerous feature of the JavaScript language:

the () {
     // This is an anonymous function
 };

 var myFunction = function () {
     // This is also an anonymous function
 };

These functions are not identifiable in any way from other parts of the application and then serve a single purpose and often are associated with duplicate code:

 the. () {
     var box = document.getElementById ('box');
     box.style.color = '# F00';
 };

 the2. () {
     // Duplicate code
     var box = document.getElementById ('box');
     box.style.color = '# F00';
 };

A first step to optimize the code above is to instantiate a function assigning a name:

 changer function () {
     var box = document.getElementById ('box');
     box.style.color = '# F00';
 }

[Preetish]

The second step in the scalability of an application is to abstract the specific operations required for interaction from the interaction itself. This is possible through the planning application in accordance with the event programming, which creates a centralized program (dispatcher) which attach custom events triggered by the interaction. In this way on a particular function, for example, the opening of A dialog box will be launched at the event openDialogo , rather than a click or submit on a specific interface element. The most obvious benefit of this approach is that the interface changes do not involve a change in logic, also allow you to fit a function to different types of events in the document. Let's see an example implementation in jQuery is based on the previous code:

var = {myFunctions
     changers: function () {
         $ ('# Box'). Css ('color', '# F00');
     }
     otherFunction function () {
         / / Code
     }
 };

 $ (Document). Bind ({
     'Changer': myFunctions.changeColor,
     'OtherEvent': myFunctions.otherFunction
 });

 $ ('# MioEl'). Bind ('click', function () {
     $ (Document). Trigger ('changer');
 });

 $ ('# MioEl2'). Bind ('click', function () {
     $ (Document). Trigger ('OtherEvent');
 });

[Aienstaien]

Although the code mentioned by the Preetish, may seem wordy script, it allows a very high level of abstraction:

• defines a namespace myFunctions unique and comprehensive in order to contain the program code;
• attaches to a single element (dispatcher) custom events that are not to interfere with native DOM events;
• Finally, untie the specific events of the interface controls (onclick , onsubmit, onchange) event which actually launches the function.

In this case the use of anonymous functions to attach custom events to the click does not affect the application, as the functional part of the code is still needed both by the global object myFunctions or through the dispatcher $(document).

[Quattro]

Another advantage of using custom events and event programming is that it allows us to design applications in a modular fashion. This means we could think of as an interface to a set of small independent applications, linked together through the dispatcher. For example, suppose you want to add a document to the logger to record every time you change the color #box :

// <ul Id="logger"> </ ul>
 // Create the new method
 myFunction.log = function () {
     $ ('<li />')
     . Text ('The color has been changed!')
     . AppendTo ('# logger');
 };

 // Custom event hook method
 $ (Document). Bind ('changer', myFunction.log);

The end result will be that when you click on #myEl or by sending #myForm will also add a new line to the logger. The two modules are independent, since neither is a direct reference to the other, however, respond in a consistent manner throughout the interface.

[Gefry]

In particular, Dojo provides a built in implementation of the dispatcher object unrelated document through the methods and manageable .subscribe() and .publish(). This system, called Topics in is based on the creation of channels through which they will broadcast the event on which the related functions are in play:

 // Add a function to listen on channel 'mychannel'
 dojo.subscribe ('mychannel', function (message) {
     alert ('New Message:' + message);
 });

 // Will display a dialog box 'New Message: It works!'
 dojo.publish ('mychannel', ['works !']);

The advantage of this system is to be completely detached from the DOM and not be tied to its context with regard to the property this, which can create problems in other implementations:

$ (Document). Bind ('mioEvento', function () {
     // This document is
 });

 $ ('# MioForm'). Bind ('submit', function () {
     / / This is only in this context # mioForm
     / / In the context. Trigger () becomes a document       
     $ (Document). Trigger ('changer');
 });

Despite the environment are often little consideration of web developers, JavaScript has become increasingly important in recent years, see that increasing the size and complexity of applications based on it. Designing and coding scalable through the use of custom events is becoming a key requirement to ensure reliability and longevity of our projects.