BuddyPress JavaScript Complete Audit

[aaclayton]

I have a stock BuddyPress javascript file. I'm sure the way I've templated the new theme has broken some of the JS.

I need to go through the full buddypress.js file and update it to be compatible with our new theme, as well as adding any additional JS functionality in the process.

[aaclayton]

I got started on this today, I've made my way about 25% through the buddypress.js file making sure all the jquery works.

[jaspervalero]

Just remember jQuery factories $() and reading from the DOM isn't cheap. From what I've seen so far you create a factory for almost every selector. Better to create one and then for elements around it use jQuery's traversal to build out your var DOM values.

Quick Example:

Bad

var form = $( '#some-form' ); // Factory, reads from DOM var userName = $( '#user-name' ); // Factory, reads from DOM var address1 = $( '#address1' ); // Factory, reads from DOM var submitBtn = $( 'input["submit"]); Factory, reads from DOM

Good

var form = $( '#some-form'), // Factory, reads from DOM userName = form.children( '#user-name'), // Reads from form (cached as far as JS goes), address1 = form.children( '#address1' ), // Reads from form (...) submitBtn = form.children( 'input["submit"] ) // Reads from form (...) ;

This example uses children, but plenty of ways to traverse, siblings(), find(), hasAttr(), etc. Point is one you do the first factory the DOM is stored (cached) in JS. So might as well use it rather than reading from the DOM again. With practice you can write a 1,000 line piece of code that only uses one factory.

[aaclayton]

Hmm, good tip. I thought that the DOM would be cached at the point that $(document).ready() was invoked, and any $ selectors within the ready() would use that cache.

I'll try to minimize the number of factories that I create. JavaScript isn't really my thing, which is one of the reasons I left it this late in the project.

[jaspervalero]

$(document).ready() is just jQuery's window.load with fallbacks for different browsers/versions, etc. It just tells the script you write to hold off on execution until the DOM is fully loaded.

[aaclayton]

All done (tentatively)!