max-mapper / callback-hell Goto Github PK
View Code? Open in Web Editor NEWinformation about async javascript programming
Home Page: http://callbackhell.com
information about async javascript programming
Home Page: http://callbackhell.com
Where are the semicolons?!
I understand that it is intentional (whyyy), but since you are using vanilla JS it makes no sense to me.
right now it just shows a giant runon sentence of unformatted markdown text
Hi. all
You can check my implementation here:
https://gist.github.com/askucher/7751044
What you think?
Using callbacks comes with many issues and indentation with curly braces jungle is but one of them. By passing a callback you are passing the control over to a potentially buggy code with undesired behaviour.
The callback problems are:
I did not invent all of it myself, I learned a lot in YDKJS: https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/ch2.md
Yet the webpage only mentions the last one, from my point the least important one. Is it possible to at least mention that there are other, more serious problems, which actually turn this whole area into a real hell?
You showed an example (reading sizes of files) that seems very difficult to make better and even after following your steps, it is tough to read and understand. I would love to see the right way to do that.
Thanks for doing this!
Something which throws me whenever I look at callback code, is where the "err, response, body" arguments to postResponse come from. I feel like this is a stumbling block for many people. Thanks again!
var name = document.querySelector('input').value
request({
uri: "http://example.com/upload",
body: name,
method: "POST"
}, postResponse)
}
function postResponse(**err, response, body**) { // <<<<<< here
var statusMessage = document.querySelector('.status')
if (err) return statusMessage.value = err
statusMessage.value = body
}
document.querySelector('form').onsubmit = formSubmit
An example could be:
app.get('something', function (req, res) {
res.render('view1');
});
app.get('other', function (req, res) {
res.render('view1');
});
Refactor to:
function respondWithView (viewName) {
return function ( req, res ) {
res.render(viewName);
};
}
app.get('something', respondWithView('view1'));
app.get('other', respondWithView('view2'));
Hi, could you please enable HTTPS support for this GitHub Pages site? Should be as easy as flipping a switch in repo settings: https://help.github.com/en/articles/securing-your-github-pages-site-with-https
Maybe it would be useful to mention callback binding, I know that personally was confusing for me in the beginning. For instance, you might expect this to work:
Something.prototype.foo = function (cb) {
someOtherObj.bar(function (err, res) {
cb(null, this.value)
})
}
But actually it will not work since the innermost callback is called from the context of someOtherObj
, and this
doesn't resolve to the Something
instance (so this.value
end up being something else).
The solutions are foo(function () { this.value... }.bind(this))
, var self = this; foo(function () { self.value... })
, or maybe ES6 arrow functions (since they take their context from wherever they were created), () => { this.value... }
.
I sorta slept through web2.0 and when I got back into it EVERYONE was doing what Max calls callback hell so so did I. But it's more than just callback hell it's insane nesting
. At the top you typically have a (function(){...}()) and everything inside ... is nested to the 27th degree. It's so easy to get confused about where a } or ; or , belongs that it can really waste your time compared to named functions.
I get it about keeping code out of the global namespace. I can also see some benefit in IDEs which collapse the various sections but are there any other reasons? Why did the JS developer community start using anonymous functions and "infinite" nesting?
Good stuff! I think it's worth also mentioning async.js (https://github.com/caolan/async/). I use it a lot to keep async stuff in check, especially parallel().
First, the section has nothing to do with closures, at all. No variables are being closed over. It is maybe an example of factory functions, if anything.
Second, it has nothing to do with the rest of the page, and callback hell in general. It's more about someone's favorite pattern for decoupling DOM events from "business logic."
Finally, at the end it's trying to advertise hootroot.com, whatever that is.
IMO it doesn't belong on callbackhell.com.
I think more emphasis could be done on how to rewrite code from callback hell style to async style, also, more effor could be made in order to explain why async is a good idea, including async examples and await try catch stuff.
Check it out https://github.com/Guseyn/cutie (Node.js)
I think you should not write code as below:
if (err) return statusMessage.value = err
There will throw some error like: Uncaught SyntaxError: Illegal return statement
File Path:
callback-hell/index.html
The ultimate solution to all of your callback troubles. Sample implementation: when.js.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.