What is the difference between jQuery and d3.js?
Category Archives: JS
EXPLAIN “DEFERREDS”?
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.
EVENT DELEGATION SIMPLIFIED?
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.
<body onclick=”alert(“I am the body”)>
<section onclick=”alert(“I am a section”)>
<div>
<button onclick=”alert(“I am a button”)>-
Click Me</button>
</div>
</section>
</body>
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 <li> element below. Instead of adding an event to each <li> 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.
<ul id=”parent-list”>
<li id=”post-1″>Item 1</li>
<li id=”post-2″>Item 2</li>
<li id=”post-3″>Item 3</li>
<li id=”post-4″>Item 4</li>
<li id=”post-5″>Item 5</li>
<li id=”post-6″>Item 6</li>
</ul>
- 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!”);
}
});
Do we repopulate or recreate the view in backbone or just get rid of the objects?
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).
What’s the difference between .call and .apply?
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.