Tips to Become a Better JavaScript Developer
justinchmura.com
justinchmura.com
var $ = document.querySelectorAll;
var $ = document.querySelectorAll.bind(document);
While I avoid jQuery I awknowledge the value of it, esp with old and mobile browsers. I avoid it precisely because my apps need modern HTML5/WebGL capable browsers anyway.
I suspect he didn't even bother to run the code. His example throws an error when I try it: "ReferenceError: x is not defined" (as expected).
blind-leading-the-blind etc.
>>What I’m saying is don’t rely heavily on jQuery, or any other library, without having some sort of understanding of how that library is accomplishing it’s tasks.
Which I think is fair. (However, I don't agree with his assertion that using vanilla JS will be more efficient - in most cases, it won't.)
These days it is negligible though. The argument for using jQuery for DOM manipulation is oftentimes just one of readability.
Probably in older browsers it still uses the old method but for modern browsers it just passes [selctor] in $("[selector]") through document.querySelectorAll; no string parsing necessary.
EDIT: In this case, I'm wrong, the author seems to think you should write vanilla when given the option which is wrong for a lot of reasons.
No. Just no. It is not more efficient to do so 90% of the time. jQuery is mature and battle proven. It is already doing what it can do with an efficient way, which comes with years of experience.
Saying, write your vanilla javascript and ditch jQuery, your implementation will be more efficient, is a no-no. Especially in javascript world!
You can replace most uses of jQuery by aliasing querySelector to $ and querySelectorAll to $$. You lose some of the automatic array iteration stuff, but really, if you were writing good code you would know how many elements you are about to select.
jQuery is a gigantic dependency and it's kind of sad if you need that crutch to write js. Beyond the selector stuff, its promises and xhr stuff is dubious as hell and can be done much better by several node.js libs like superagent and async.js or bluebird.js.
jQuery goes in direct opposition to a composable module-based approach, because it is a massive dependency.
(Sounds a little like the NoSQL crowd telling me how much easier their databases are to develop in, without any thought for why the relational model became so popular).
Also, you'd be surprised how many otherwise competent javascript programmers don't understand this and simply avoid it most of the time. Heck, I wrote some pretty ridiculously awesome (and robust) stuff without really understanding this, and it's quite possible someone telling everyone they need to understand this, doesn't.
var $ = document.querySelectorAll;
wat
fixed.
I apologize for the inaccuracies. I was just looking to help some beginner JavaScript developers.
1) "this" is whatever you set it to with call/apply/bind, or, if you didn't,
2) if you're using "use strict"
2.a) "this" is whatever is to the left of the dot when you call the function.
2.b) otherwise, "this" is wherever you got the function from.
So, if you got a function from the global scope, it's "this" is in the global scope. If you got it from an object, it's "this" is that object.
function AClass(){ this.id = "bar"; }
AClass.prototype.func = function(){ console.log(this.id); };
var id = "foo";
var obj1 = new AClass();
var obj2 = {id: "baz"};
var func = obj1.func;
obj2.func = obj1.func; // or even just "func"
console.log(func === obj1.func, func === obj2.func, obj1.func === obj2.func);
func(); // prints "foo"
obj1.func(); // prints "bar"
obj2.func(); // prints "baz"
with(obj1){ func(); } // prints "bar"
with(obj2){ func(); } // prints "baz"
Think of the global scope in a browser as looking something like this:
function window(){
with(this){
// your code
}
}
window.call(window);
myButton.onclick = function(){
// do something
}
Using addEventListener does the same thing. And if the browser vendors don't actually store the event callbacks in the object, then I guess they must be using "call" to maintain backwards compatibility with the old event wiring syntax.
the scoping sucks, e.g.
(function() {
var x = 1;
console.log( x );
if ( x ) {
var y = 2;
}
console.log( y );
})()
there's no proper foreach using other files is an effort and requires hacks to get them loaded. callbacks everywhere. variable names as object keys is a pain regex is a pita
i just don't like it, i have no idea why it's become so popular recently, i can understand it runs in the browser and everyone has a browser, but why server side stuff?
but whatever, each to their own i guess
Javascript doesn't have block scope; above example is equivalent to:
(function() {
var x, y;
x = 1;
console.log( x );
if ( x ) {
y = 2;
}
console.log( y );
})()