JQuery: What is a "value callback"?

I work through jQuery Training (third edition).

Chapter 4: “Manipulating the DOM” has a section explaining something called “ Value Callback ”. This is new to me.

The author explains this using an example of a list of links in which the identifier of each of them must be unique.

From the book:

“A value callback is simply a function that is provided instead of a value for the argument. Then this function is called once for each element in the matched set. No matter what data is returned from the function, it is used as a new value for. For example, we can use this a method for generating a different id value for each element as follows: "

Chaffer, Jonathan (2011-09-23). JQuery Training, Third Edition (p. 116). Packt Publishing. Kindle Edition.

jQuery(document).ready(function($){ // get all external links $('div.chapter a').attr({ rel:'external', title:'Learn more at Wikipedia', id: function ( index, oldValue ) { return 'wikilink-' + index; } }); }) 

Works like a charm, but identifier mechanics : escape me property.

  • How does parameter 1 (index) know as an integer?
  • How does a function know the index is incrementing ?
  • How does the second parameter (oldValue) for storing the old property value (until it is changed) know?
  • Is this a jQuery construct? What is JSON? That's cool. it works, but ... what the hell is this "value callback" thing from?

Please inform

+7
source share
2 answers

1) How does parameter 1 (index) know as an integer?

jQuery passes an integer.

2) How does a function know to increase the index?

The callback does not increment index , the jQuery method does.

3) How is the second parameter (oldValue) known for storing the old property value (before modification)?

jQuery passes it.

Answers to questions 1-3 are perhaps best understood by a function that does something similar to $.attr :

 Array.prototype.each = function (f) { var i; for (i=0; i < this.length; ++i) { f(i, this[i]); } }; ['zero', 'one', 'two'].each(function (i,item) {console.log({i: item})}); 

f is a callback. each is responsible for iterating over the collection and calling f for each index and element. The same code structure can be used for functions:

 /* Map each item in a sequence to something else, * returning a new sequence of the new values. */ Array.prototype.map = function (f) { var i, result = []; for (i=0; i < this.length; ++i) { result[i] = f(i, this[i]); } return result; }; ['zero', 'one', 'two'].map(function(i,item) {return item.length}); // result: [4, 3, 3] /* Return a sequence of the items from this sequence * for which 'keep' returns true. */ Array.prototype.filter = function (keep) { var i, result = []; for (i=0; i < this.length; ++i) { if (keep(i, this[i])) { result.push(this[i]); } } return result; }; ['zero', 'one', 'two'].filter(function(i,item) {return item.length <= 3}); // result: ['one', 'two'] 

Running mapconcat , foldl and foldr remains as an exercise. As another exercise, rewrite map and filter in terms of each .

Note. These functions are intended only to illustrate how callbacks work. They can cause production code problems.

4) Is this a jQuery construct? What is JSON? That's cool. it works, but ... what is this “callback value” made from?

Callbacks are a common method that jQuery makes extensive use of. They are a key feature of functional programming , where functions are data that can be used in the same way as other types of data. That way, you have functions that take functions as arguments and can return functions. In certain contexts, callbacks are also known as “continuations” and form the basis of the Continuation Continuation Style ( CPS ). This is especially important for asynchronous function calls [ 2 ] (where the function returns before completion of the calculations, as against synchronous calls ), for example, it is used for Ajax requests. To see some of the features of CPS, read Use Continuation to Develop Complex Web Applications .

Another aspect of this is the “value” in the “callback”, since JS is a dynamically typed language (types are associated with data, not variables), formal parameters can be bound to objects of any type. Then the function can behave differently depending on what is being transmitted. This is sometimes accomplished by examining the type of argument that ad-hoc polymorphism operates (a function, not a language, must be manually submitted). However, parametric polymorphism or (otherwise) duck typing should always be preferable to studying argument types. Parametric polymorphism is achieved due to the fact that all types that can be passed to this function support the same interface (method names, arguments, preconditions, postconditions, etc.). For example, all types of sequences must have the length property and be indexed with integers; as long as this is done, you can use your own sequence type with many functions that take arrays.

I'm not sure what you mean by JSON, but that is probably not what is usually meant. JSON is a data exchange format based on a limited version of the JS object literal syntax. JSON is not involved in any example code or quoted text.

+6
source

This is a jQuery construct. If you look at the source, you will find that jQuery checks the parameter to see if you have passed a value or function. If it is a function, it is processed as you see.

+4
source

All Articles