Comparing Vanilla JS and JQuery [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I just found This and it has some comparation with JQuery and others...
Its really faster than the others.
What you guys think about this. Is it ok to use only this? Is there anything that you will HAVE/NEED to use JQuery ?
Also, when it comes to performance. Is there a big difference between:
var test = document.getElementById('test-table');
test.attr('id','123');
var test = document.getElementById('test-table');
test.dataset.id = '123';

It doesn't matter since you can always wrap any DOM element around a jQuery object if you must.
var test = document.getElementById('test-table');
// Do some vanilla stuff
var jTest = $(test);
// Do some jQuery
The jQuery library builds upon the DOM API that is available to JavaScript. The only reason you'd need jQuery is to do a complex task that requires more effort in vanilla. In terms of performance, the difference is negligible. jQuery adds checks to be cross-browser compatible. If you code to modern standards, these checks are not necessary.

Related

Javascript: Renaming built in functions [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
In Javascript, is it acceptable to rename built in functions. For example, in my code, I use document.querySelector() tons of times. This is extremely long and tedious to type every single time (even with autocomplete from the IDE's side). Therefore, I decided to create a new function with a shorter name like the following:
let qs = selector => document.querySelector(selector);
Is this an acceptable practice in the JS community? Is this considered bad code? If so, why? Additionally, if doing this is alright, what are some drawbacks?
Thanks.
No.
Someone is going to come behind you to edit your code.
They will then have to track down your renaming function to actually see what it does.
Create an snippet in your IDE if it’s that much of an issue for you.

Javascript design pattern for manipulating DOM API [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I read alot of topics, went through alot of JS plugins on github, and alot of them have their own way of structuring code and which pattern to use. In some cases there is obvious why he went that way. But when dealing with smaller stuff, not big SAP, which pattern have most "pros" to go with?
For now, i am going this way:
https://github.com/goranefbl/GENS-Javascript-Boilerplate/blob/master/main.js
Yes, it works just fine, but i am wondering for smaller plugins, especially the ones that are just manipulating DOM (creating new elements/moving around/adding events listeners etc...), what would be best pattern to go with and of course why? Maybe I dont need to pollute namespace for small stuff.
Here is the example of latest component: gist.github.com/goranefbl/1b6144ee8cd8708c7511a1a2fb7c53a6
Its just creating unordered lists below select field, for easy styling.
Going with example boilerplate from above just doesnt feel right, ie it feels to much for something like this.
You're looking for a smaller pattern than the one you posted. Let's see what parts we can get rid of:
The defaults object and extendDefaults method aren't necessary, you can use
window.GENSPlugin = function(firstoption, secondoption) {
The question is, do you really need a plugin? You said you don't want to pollute the global namespace, so what about this:
(function() {
'use strict';
// not accessible from outside the function
var obj1 = document.getElementById("...");
// accesible from outside
window.obj2 = function() {
...
}
})();

Should I rewrite my entire JavaScript code into jQuery? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I'm currently developing a web application and I was forced to use jQuery for some animations and other specific purposes, but still most of my code is written in JavaScript.
Should I rewrite these JavaScript modules if after all jQuery is being loaded every time? I know that in some cases it is better to use JavaScript instead of jQuery because it is faster and some other advantages but I'm already using jQuery throughout the page and I'm wondering should I use it everywhere instead of loading the whole library for few chunks of code.
Will there be any significant difference in the performance if the library is already loaded?
There won't be any difference, the Javascript speed is better. The performances wihout libraries still better. So keep your modules
Its up to you.
If you don't like to use any JS library, then you have code a lot.
The current jQuery v1.12.2(supports IE 6,7,8) size is 97kb. You use CDN version to reduce the loading time of it.
Will it affect the performance?? Yes, a bit it will do.
You didn't mention whether you are making any XMLHttpRequest;
if so, its better to use jQuery for better cross browser compatibility.

Are there drawbacks to using easily-written jQuery until i understand vanilla Javascript? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
As I am learning vanilla JavaScript right now, I don't always know what to ask when searching through JS documentation (mostly on Mozilla MDN). So, I use what I know in jQuery until I get there.
So, what performance or other drawbacks should I be aware of when using jQ to substitute for my lack of full JS understanding while I learn?
These days, clients run fast enough that you don't really need to worry about any performance differences between vanilla JavaScript and jQuery. Thus, it could be said that this is a sort of "premature optimization", so I give you the same answer I always give: Use what you know/what's easier to maintain until you can demonstrate a critical performance bottleneck via a profiler; only then should you figure out how to improve the performance, possibly including switching to vanilla JS.
You should learn to understand how to retrieve elements from the DOM and how javascript relates to HTML. Basically you are altering html-elements and attributes.
http://en.wikipedia.org/wiki/Document_Object_Model
http://www.w3schools.com/js/js_htmldom.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

How to convert jquery code into javascript [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
Yesterday I have put the question which was answered correctly but now I want to convert that same code into javascript. I have made some changes but its not work
working code- http://jsfiddle.net/SXzyR/8/
mycode- http://jsfiddle.net/SXzyR/11/
You want to use this.id instead of document.getElementById(this) to get the id string where this is a DOM element.
Please read some tutorials about jQuery. This is a good start, also have a look here.
jQuery isn't another language, it's a library for JavaScript. Considering the following line from your "translated" code:
txtval(document.getElementById(this)
Instead of writing document.getElementById you can simply use jQuery to write
txtval($(this))
as in the first example (working code).
Also you are mixing jQuery with "native" JavaScript/DOM functions in your code. Don't reinvent the wheel, use jQuery to accomplish your task.

Categories