[RFC|Merged] Include and use jQuery (originally for 3.2)

[RMcGirr83]

If a user installs, eg prototype, that may take control of the $ that is used throughout the code now from jQuery. Maybe set a var of, eg

Code: Select all

var $phpBB = jQuery;

Just tossing stuff out there Igor.

[igorw]

I'll consider doing that:

Code: Select all

(function($) {

    // ... our code

})(jQuery);

If manage to get our inline javascript fully moved to external files this will be a lot easier too.

Thanks!

[Oleg]

In the meantime I think we should spell out jQuery() instead of $().

Consider using jquery-min.js for the minified version.

I don't very much like the idea of including jquery on every page. The pages that need it should indicate so using some method, and it should only be included if it is needed. Unless over, say, 2/3 of the pages need it.

Which versions of jquery is our code compatible with? If there is a security release in 1.5.x branch can we update? If there is an unfixed security issue in 1.5 can we update to 1.6? 2.0? Consider including a prefix of version number into jquery(-min).js file name to indicate the acceptable update versions.

[MattF]

Some jQuery optimization tips for faster and efficient use (may be known to most of you, but I thought it worth mentioning):

1. Do not use classes as the only selector, instead cascade down from ids and/or tags
Selecting by classes is much slower than by IDs or even by html tags.

• $('.some_link') is very slow because every single HTML tag on the page is searched for this class
• $('a.some_link') is better, now only every <a href> tag is searched for this class
• $('#myDiv a.some_link') is best, because now only <a href> tags inside MyDiv are searched for this class

2. Cache selectors if they are to be used more than once.
This example is no good, because the element MyDiv has to be searched for twice:

Code: Select all

$('a.open').show('#MyDiv');
$('a.close').hide('#MyDiv');

Instead, we search for MyDiv once, cache the result, like this:

Code: Select all

var targetDiv = $('#MyDiv');
$('a.open').show(targetDiv);
$('a.close').hide(targetDiv);

3. Chain jQuery functions being applied to the same selector whenever possible.
Instead of this:

Code: Select all

$('#MyDiv').show();
$('#MyDiv').html('hello world');

Do this:

Code: Select all

$('#MyDiv').show().html('hello world');

[Oleg]

An idea from the template engine pull request: if dE() is desired, put it into a compat.js file that modifications can request.

[RMcGirr83]

Code: Select all

$('#MyDiv').show().html('hello world');

Code: Select all

$('#MyDiv').show('fast',function(){$(this).html('hello world');});

[hanakin]

also not sure if you noticed igorw but I started to make some conversions for some features already in the scripts folder of my theme that you can use for reference. not all of them were fully working but some were. that way you don't have to complete reinvent. I can send it to you over msn if you want or you can find it under the backup version under scripts labeled "phpbb.fn.jquery.js" on git.

[igorw]

Selecting by classes is much slower than by IDs or even by html tags.

Well, CSS is matched from right to left, so some of those may even be slower in some cases.

The suggestions are good, but for phpBB3's use of JavaScript it's barely significant. If something really is sluggish then we can do some performance optimizations there.

In the meantime I think we should spell out jQuery() instead of $().

I'd rather encapsulate in a closure than writing jQuery all over the place.

Consider using jquery-min.js for the minified version.

Any specific benefits except that it's more descriptive? People may want to switch it out to non-minified for dev purposes.

I don't very much like the idea of including jquery on every page. The pages that need it should indicate so using some method, and it should only be included if it is needed. Unless over, say, 2/3 of the pages need it.

Will analyze this, but it's being cached, so probably not all that bad. And it adds a burden to MOD authors, so needs to be carefully considered I suppose.

Which versions of jquery is our code compatible with? If there is a security release in 1.5.x branch can we update? If there is an unfixed security issue in 1.5 can we update to 1.6? 2.0? Consider including a prefix of version number into jquery(-min).js file name to indicate the acceptable update versions.

I'm not very familiar with the API history of jQuery. But I believe there have been hardly any API breakages so far. Thus, I would suggest sticking with the latest 1.x. I'm not really a fan of having the version in the file name, because it means you have to change it in several places when a new version comes out.

An idea from the template engine pull request: if dE() is desired, put it into a compat.js file that modifications can request.

Yes, paul already suggested that and it's a good idea.

@RMcGirr83 mind to explain? What's the difference / benefit?

Thanks for the feedback so far everyone.

[RMcGirr83]

@RMcGirr83 mind to explain? What's the difference / benefit?

As I understand it, which may be totally incorrect, in this way

Code: Select all

$('#MyDiv').show().html('hello world')

show will happen, then .html for "hello world"

in this way

Code: Select all

$('#MyDiv').show('fast',function(){$(this).html('hello world');});

html happens prior to show occurring.

As I said that is the way I understand it which may, or may not, be correct and it may be minutia anyway. Being a Dev the choice is, ultimately, yours.

[MattF]

@RMcGirr83 mind to explain? What's the difference / benefit?

As I understand it, which may be totally incorrect, in this way

Code: Select all

$('#MyDiv').show().html('hello world')

show will happen, then .html for "hello world"

in this way

Code: Select all

$('#MyDiv').show('fast',function(){$(this).html('hello world');});

html happens prior to show occurring.

As I said that is the way I understand it which may, or may not, be correct and it may be minutia anyway. Being a Dev the choice is, ultimately, yours.

Jeez Louise, I was just trying to show an example of chaining to avoid multiple selector calls... You didn't have to jQuery police me

So better yet, I'll just refer one of the many jQuery best practices listings:
http://www.tvidesign.co.uk/blog/improve ... -tips.aspx
In particular, Rules 5 through 10