Boards.ie uses cookies. By continuing to browse this site you are agreeing to our use of cookies. Click here to find out more x
View Poll Results: What do you use JavaScript and jQuery for mostly
Querying 4 40.00%
Events 5 50.00%
Attribute Manipulation 3 30.00%
Style Manipulation 5 50.00%
Ajax / Dynamic DOM 8 80.00%
Multiple Choice Poll. Voters: 10. You may not vote on this poll

Post Reply  
 
Thread Tools Search this Thread
10-03-2012, 12:14   #1
Giblet
Registered User
 
Giblet's Avatar
 
Join Date: Oct 2001
Location: Dublin
Posts: 10,695
JavaScript / jQuery: Your most common uses

I'm just wondering the most common uses of JavaScript / jQuery in your day to day web development. I have a feeling myself that the most common feature is queries (as every other operation depends on queries). And if it is, how complex are your queries and why. (This is beyond simple document.getElementById) This can be a general JavaScript thread as well.

Last edited by Giblet; 10-03-2012 at 12:17.
Giblet is offline  
Advertisement
11-03-2012, 23:56   #2
Giblet
Registered User
 
Giblet's Avatar
 
Join Date: Oct 2001
Location: Dublin
Posts: 10,695
I guess no-one gives a **** about JavaScript! And to think I was going to tell people how to write a context driven library!
Giblet is offline  
12-03-2012, 01:33   #3
CuAnnan
Registered User
 
Join Date: Aug 2011
Location: Maynooth
Posts: 124
Quote:
Originally Posted by Giblet View Post
I'm just wondering the most common uses of JavaScript / jQuery in your day to day web development.
I use jQuery to make JavaScript suck less.
Javascript's object model, particularly it's esoteric and seemingly inconsistend this keyword, is a little confounding even to the JavaScript afficionado.
jQuery allows you to always have a handy reference to what this would mean in a more object oriented context.

Its DOM and AJAX stuff are nice, too, but mostly I use it because it's convenient.

Quote:
Originally Posted by Giblet View Post
And if it is, how complex are your queries and why.
No more complex than they need to be.
CuAnnan is offline  
12-03-2012, 01:40   #4
CuAnnan
Registered User
 
Join Date: Aug 2011
Location: Maynooth
Posts: 124
Quote:
Originally Posted by Giblet View Post
I guess no-one gives a **** about JavaScript! And to think I was going to tell people how to write a context driven library!
That's not a very helpful attitude.
CuAnnan is offline  
12-03-2012, 08:17   #5
Giblet
Registered User
 
Giblet's Avatar
 
Join Date: Oct 2001
Location: Dublin
Posts: 10,695
Quote:
Originally Posted by CuAnnan View Post
I use jQuery to make JavaScript suck less.
Javascript's object model, particularly it's esoteric and seemingly inconsistend this keyword, is a little confounding even to the JavaScript afficionado.
jQuery allows you to always have a handy reference to what this would mean in a more object oriented context.

Its DOM and AJAX stuff are nice, too, but mostly I use it because it's convenient.


No more complex than they need to be.
jQuery fecks around with the this object like it made fun of it's mother. Why in some cases does it have to be wrapped, and some cases it returns the jQuery object itself, why is it so hard to allow the user to do this, and why do events behave different from functions regarding "this"? It also augments some objects with it's own sugar (breaks the original functionality see: originalEvent);

JavaScript has the following options.
apply, call, bind and passing an object to act as a surrogate this. It's well documented. Functions in window scope have this = window. Calling in object scope makes this = the object. Apply, call and bind can assign these to whatever you wish. It's a context object.

If your queries are not complex, why use Sizzle? Why not target either IE8+ with pure QSA? Or even get a smaller library such as NWMatcher which works better. All these engines use QSA anyway unless it's sub IE8, and they are painfully slow in those contexts. Use conditionals to load a query engine into sub IE8 and you've gotten rid of a lot of extra wasted space. Even better, don't write queries at all, learn how to traverse the DOM for your commons cases.

Code:
<script>
var $;

if(document && document.querySelectorAll){
    $ = function(selector){ return document.querySelectorAll(selector);}
}
</script>
<!--[if lte IE 8]>
<script src="myEngine.js"></script>
<script>
   $ = function(selector){ return myEngine.Query(selector); }
</script>
<![endif]-->
$ is a terrible name for a function though. Query would be better.

Last edited by Giblet; 12-03-2012 at 09:30.
Giblet is offline  
Advertisement
12-03-2012, 08:32   #6
Giblet
Registered User
 
Giblet's Avatar
 
Join Date: Oct 2001
Location: Dublin
Posts: 10,695
Quote:
Originally Posted by CuAnnan View Post
That's not a very helpful attitude.
It's not my attitude that's meant to be helpful. The code will suffice. Anyway, I'll dig less into jQuery, I really just want to highlight how to get things done in a concise manner with the least amount of script necessary.

Last edited by Giblet; 12-03-2012 at 08:37.
Giblet is offline  
12-03-2012, 09:35   #7
Creamy Goodness
Booooom, Blast & Ruin
 
Creamy Goodness's Avatar
 
Join Date: Nov 2001
Location: in my flippity floppity floop
Posts: 23,827
most recently, it's been used for handlebars.js templates to help with heaps of repeating data and reducing the amount of unnecessary and redundant code being created with the help of handlebars helpers.

precompiled templates sent to the user on first visit to the site, 10k json responses sent via ajax after that is quite efficient.
Creamy Goodness is offline  
12-03-2012, 09:38   #8
CuAnnan
Registered User
 
Join Date: Aug 2011
Location: Maynooth
Posts: 124
Quote:
Originally Posted by Giblet View Post
jQuery fecks aorund with the this object like it made fun of it's mother.
this is not an object.

Quote:
Originally Posted by Giblet View Post
Why in some cases does it have to be wrapped, and some cases it returns the jQuery object itself
$(this) will always work
this will not.

Quote:
Originally Posted by Giblet View Post
why is it so hard to allow the user to do this, and why do events behave different from functions regarding "this"?
Because JavaScript is object based, not object oriented.


Quote:
Originally Posted by Giblet View Post
It also augments some objects with it's own sugar
Yes, and thank the binary digital gods it does.

Quote:
Originally Posted by Giblet View Post
JavaScript has the following options.
apply, call, bind and passing an object to act as a surrogate this. It's well documented.
And poorly implemented.

Quote:
Originally Posted by Giblet View Post
If your queries are not complex, why use Sizzle?
I use jQuery, not its spin-off project Sizzle.
And I use jQuery for to make javascript suck less. I thought I was quite clear on that.

Quote:
Originally Posted by Giblet View Post
Why not target either IE8+ with pure QSA?
Because I don't write Internet Explorer applications.
I don't even use Windows to develop.

Quote:
Originally Posted by Giblet View Post
Or even get a smaller library such as NWMatcher which works better.
What's your metric?

Seriously, I see an awful lot of personal opinion that doesn't address why I use jQuery at all.

Quite frankly I'm not sure I should be listening to your advice on JavaScript development at all.
CuAnnan is offline  
12-03-2012, 09:40   #9
CuAnnan
Registered User
 
Join Date: Aug 2011
Location: Maynooth
Posts: 124
Quote:
Originally Posted by Giblet View Post
I really just want to highlight how to get things done in a concise manner with the least amount of script necessary.
You haven't. At all. You've been really obscure and not very highlighty at all.
CuAnnan is offline  
Advertisement
12-03-2012, 09:48   #10
Giblet
Registered User
 
Giblet's Avatar
 
Join Date: Oct 2001
Location: Dublin
Posts: 10,695
Quote:
Originally Posted by CuAnnan View Post
this is not an object.


$(this) will always work
this will not.
Exactly. You double wrap it in some cases.
this is not an object?. What do you mean by your next quote then?
Quote:
Because JavaScript is object based, not object oriented.
Prototype based. this is a context defined object. It's passed with call. Hell you could have done
Code:
typeof this
returns "object"
Depends on context though, but it's not special in any case.

If you want a discussion on Host Objects, Props & Methods and the dangers of doing typeof's though...

Quote:
Yes, and thank the binary digital gods it does.
Why? So it can break your code unless you fix it? (see touch events)
Quote:
And poorly implemented.
Where? (I know where and I know how to fix it)

Code:
var bind;
if(Function.prototype.bind){
    bind = function(fn, thisObject) {
        return fn.bind.apply(fn, Array.prototype.slice.call(arguments, 1));
    };
}
else {
	if(!!Function.prototype.call) {
	  bind = function(fn, context) {
		var prependArgs = Array.prototype.slice.call(arguments, 2);

		if (prependArgs.length) {
		  return function() {
			fn.apply(context, Array.prototype.concat.apply(prependArgs, arguments));
		  };
		}
		return function() {
		  fn.apply(context, arguments);
		};
	  };
	}
}
You have now got bind!

Quote:
I use jQuery, not its spin-off project Sizzle.
Sizzle is a dojo spin off, jQuery uses it, so yes, you use it.

Quote:
And I use jQuery for to make javascript suck less. I thought I was quite clear on that.
I don't think it's JavaScript that sucks.

Quote:
Because I don't write Internet Explorer applications.
I don't even use Windows to develop.
It works in all current browsers (webkit, trident, mozilla) besides IE browsers less than IE8 and other edge cases. Good news! You can use it right now.

Quote:
What's your metric?
JSPerf. Or do you want to compare a native function to a wrapper of a native function?



Quote:
Quite frankly I'm not sure I should be listening to your advice on JavaScript development at all.
Why not? Do I not know what I'm talking about? Or do you just not want to learn?

Also, my personal opinion doesn't matter. Ask the right questions, I'll give you the answers if you need. jQuery is not a context driven API, so if you need one, you need to write it yourself. If you don't, fine! People who might need one.
Mobile Application developers.
Low Powered Devices.

Adding a huge library isn't going to help. People on shared hosting deliverin 90k (no gzipping on many shared hosts) scripts to mobile devices that won't cache the data might want a solution.

If you don't need this, then why continue to bash Answer the poll if you'd like though.

Last edited by Giblet; 12-03-2012 at 11:56.
Giblet is offline  
12-03-2012, 10:25   #11
Giblet
Registered User
 
Giblet's Avatar
 
Join Date: Oct 2001
Location: Dublin
Posts: 10,695
Quote:
Originally Posted by Creamy Goodness View Post
most recently, it's been used for handlebars.js templates to help with heaps of repeating data and reducing the amount of unnecessary and redundant code being created with the help of handlebars helpers.

precompiled templates sent to the user on first visit to the site, 10k json responses sent via ajax after that is quite efficient.
I've used something similar before (I've moved away from this though, but it's still nice). I can see the advantage if you were continuously loading json data to be templated and you always had the same cached template loaded (or inlined), and the templates remind me of Razor. I use server side snippets more though, for big loads of JSON, the JSON might have more overhead than sending the processed HTML! (If the JSON contains a serialised object for example, you might not use all of that object in generating a list, but the whole things gets sent down the wire unless you just send the required properties, most frameworks do the full object by default or rather it's the most common thing done, which is why it's important to highlight)

Last edited by Giblet; 12-03-2012 at 10:33.
Giblet is offline  
12-03-2012, 10:29   #12
Giblet
Registered User
 
Giblet's Avatar
 
Join Date: Oct 2001
Location: Dublin
Posts: 10,695
Quote:
Originally Posted by CuAnnan View Post
You haven't. At all. You've been really obscure and not very highlighty at all.
I've gleamed you need an XMLHttpRequest Wrapper (you don't use IE, so you don't need to probe for ActiveX objects!), document.querySelectorAll (which i've provided). And you need bind it seems! (which i've provided).

That's about 2k of script, or 15k if you need to get a query selector engine in there which in fairness is mostly for older IE (still under the iphone limit and about 4k if you count gzip which iPhone doesn't unfortunately). If it's obscure, I'm sorry, but can you see the point of what I'm doing at least? You might not do the sort of development that needs granular scripting to improve performance, which is lucky!

Last edited by Giblet; 12-03-2012 at 10:33.
Giblet is offline  
14-03-2012, 19:18   #13
CuAnnan
Registered User
 
Join Date: Aug 2011
Location: Maynooth
Posts: 124
No, I use jQuery because it makes DHTML generation on the fly (particuarly regarding binding events) easier to cross platform. It gives a consistent, cross platform, reference to the calling object. I like its XHR wrapper. I use its Tree walking abilities in processing returned XML.

I'd say I use about 60-80% of jQuery's functionality, project dependant.
CuAnnan is offline  
14-03-2012, 19:52   #14
Giblet
Registered User
 
Giblet's Avatar
 
Join Date: Oct 2001
Location: Dublin
Posts: 10,695
Event delegation for dynamic DOM is trivial, it's taken until 1.7 for jQuery to have a unified method of doing so. Again, creating a consistent, cross platform reference to the calling object is also trivial. You just write a wrapper to handle forking for different browsers (I mean, jQuery can't do anything JavaScript can't do). Fair enough about the XHR wrapper, although they've gone and changed that again. And DOM is a pretty simple node list to traverse, which is handy for XML. Although jQuery can mess this up with expando properties and should never be used for XML if you are serious into accurate processing of properties (jQuery will in some cases create new properties on the fly just by calling .attr / .data but you could do this yourself anyway if you didn't know what properties your XML had)

Again, you have use for jQuery, I want to talk about how to get to the root of what people need rather than throwing the kitchen sink at a problem. I think I can help with that.

Last edited by Giblet; 14-03-2012 at 19:59.
Giblet is offline  
Post Reply

Quick Reply
Message:
Remove Text Formatting
Bold
Italic
Underline

Insert Image
Wrap [QUOTE] tags around selected text
 
Decrease Size
Increase Size
Please sign up or log in to join the discussion

Thread Tools Search this Thread
Search this Thread:

Advanced Search



Share Tweet