Pro-Tek Blog » JS

WHAT IS THE DIFFERENCE BETWEEN JQUERY AND D3.JS?

admin — Thu, 04 May 2017 03:11:07 +0000

What is the difference between jQuery and d3.js?

The post WHAT IS THE DIFFERENCE BETWEEN JQUERY AND D3.JS? appeared first on Pro-Tek Blog.

EXPLAIN “DEFERREDS”?

admin — Thu, 13 Aug 2015 04:37:43 +0000

Explain “Deferreds”?

In their simplest form, deferreds allow you to specify what will occur when a computation/task completes or fails. jQuery’s specific implementation allows you to register callback functions that will run if a deferred resolves successfully, if it is rejected with errors, or if it is notified of some “progress” towards a resolved state (more on that later).
The “Deferred” pattern describes an object which acts as a proxy for some unit of computation that may or may not have completed.
The pattern can apply to any asynchronous process: AJAX requests, animations or web workers to name a few.

Important to understand:

Deferreds can be passed around indefinitely, and callbacks can continue to be added during the entire lifetime of the deferred object.
The key to this behavior is callbacks registered with the deferred will run immediately if the deferred is already resolved.
You don’t need to worry if the asynchronous unit of computation (e.g. an AJAX request) is finished or not.

The post EXPLAIN “DEFERREDS”? appeared first on Pro-Tek Blog.

EVENT DELEGATION SIMPLIFIED?

admin — Thu, 13 Aug 2015 04:12:47 +0000

Event delegation simplified?

First let’s understand few terms in Event model in JS. When an event is trigged on an element (say a click on a button), then such event goes UP to all it’s ancestors elements and triggers “click” on all of button’s parents.

Clicking on the button will show up 3 alert boxes in the following order:

I am a button
I am a Section
I am the body

Whether an onclick is attached on each of it’s ancestors elements or not, the “click” event is fired on each of them. This is event bubbling. The “clicked” element (in this case button) is stored in ‘target’ property of the event object.

Now the event delegation:

Let’s say that we wanted to have a click event to each list item
element below. Instead of adding an event to each
element, we add the event at the parent level (ul in this case). The reason is that whenever a list item is clicked, the event bubbles up to top of DOM tree. When this happens, we can capture the event at UL (event bubbling) and easily determine from which element the event originated and perform the functionality to that element.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

When the event bubbles up to the UL element, you check the event object’s target property to gain a reference to the actual clicked node.
JS Example

// Get the element, add a click listener…
document.getElementById(“parent-list”).addEventListener(”
click”,function(e){
// e.target is the clicked element!
// If it was a list item
if(e.target && e.target.nodeName ==”LI”){
// List item found! Output the ID!
console.log(“List item “, e.target.id.replace(”
post-“),” was clicked!”);
}
});

The post EVENT DELEGATION SIMPLIFIED? appeared first on Pro-Tek Blog.

Do we repopulate or recreate the view in backbone or just get rid of the objects?

admin — Fri, 29 May 2015 04:01:50 +0000

Do we repopulate or recreate the view in backbone or just get rid of the objects?

It all depends on the Backbone application an individual is creating. We have to take into consideration of the lifespan of the objects created or involved. Because if the scope of the object is going to be for the entire application, then it is better not to kill the objects, which are going to be used. And it is better to delete the one’s which are of local scope / temporary. Also, repopulating the view in backbone suits well in the case when the data objects are dynamic (like just a data-refresh).

The post Do we repopulate or recreate the view in backbone or just get rid of the objects? appeared first on Pro-Tek Blog.

What’s the difference between .call and .apply?

admin — Wed, 06 May 2015 05:17:13 +0000

What’s the difference between .call and .apply?

Call( ) and Apply( ) in JS is most commonly used to invoke a method or used in constructors & classes for Inheritance purposes.

The first parameter to be passed in these two methods is an Object (current reference/current context). The difference comes in the concluding parameters.

Apply( ) takes Array as it’s next parameter. The array represents the arguments for the target method.

Call( ) takes arguments in comma separated format.

Usage:
Use apply ( ), if you don’t know the number of arguments you will be passing, or if they are already in an array.
With call ( ), you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.

The post What’s the difference between .call and .apply? appeared first on Pro-Tek Blog.