So, I'm requesting some info from the community.  If you have a
standard you follow for Javascript and implement it into a best
practice for jQuery, I'd be interested in hearing it.

Thanks in advance...

On Aug 13, 10:07 am, Joe <joseph.is...@gmail.com> wrote:

I admit though that off the top of my head it's hard to come up with
best practices... it seems to me that jQuery just lends itself to well
structured layout, though I know you can go overboard.

I know for me I hate when chaining is done as:

$('selector').func1
                 .func2
                 .func3
                 ...etc

To me it's easier to see $('selector').func1.func2.func3

Beyond that though nothing really jumps out at me.  I'd browse through
most of the plugin's source, see how people are writing their plugins
and either a) pick what I like about what folks are doing and create
standards based on that or b) create standards based on what the
"majority" appear to be doing.

 - unobtrusive scripting (try to do things in a way that visitors
   with disabled JavaScript still have functional page)
 - use closures
 - have your namespace clean (all my global variables and methods
   are enclosed into jQuery.extend({...}) , so i invoke them by
   $.myCustomMethod(), or $.myGlobalVariable
 - since you are working in a team try to make chaining obvious,
   so your college doesn't miss a part (every part in new line)
 - write short and clear comments

This lets the reader easily comprehend which subset of elements are to
be affected by nested actions.

+ Each function gets a new line.
+ Each sub function indents from the above function.
+ Change the jQuery alias from $() to jq() to make sure no other
libraries interfere with my jQuery and to make the code more clear
that I am calling jQuery functions. To do this in the head of your
site before any other javascript (from jQuery) is called, simply add
this line: var jq = jQuery.noConflict();
+ NO documentation. Clean code reads fine, documentation is prone for
errors as it grows outdated and is never maintained well (in my
experience)

--
Mike

Accidentally sent this to David, sorry about that.

On Aug 15, 4:43 am, erroneousBolock <erroneousBoll...@gmail.com>
wrote:

One practice that isn't always used and makes you code really portable
and encapsulated:

(function($){
    // so inside here we can safely assume that $ really *is* jQuery

function test(options)
    var options = $.extend({
         width: 500,
         height: 250
    }, options);

Instead of user mouseover/mouseout, which will probably get you some
quirks anyway, use:

$('#element').hover(function(){
    // mouseover event

If it can be achieved simply with CSS it probably better be CSS

== Get DOM element ==

// Bad:
$('.elements')[0];

// Good
$('.elements').get(0);

== Set/unset many styles ==

// Bad
$('#element').addClass('hello').addClass('world');

// Good
$('#element').addClass('hello world');

== Collecting ==

// Not really bad
$('#element1').addClass('hello').show()
$('#element2').show()

// Better
$('#element1').addClass('hello')
    .add('#element2').show();

I probably could list more advices but time is lacking .. sorry

On Aug 13, 11:07 am, Joe <joseph.is...@gmail.com> wrote:

-- Josh

    hover: function(fnOver, fnOut) {
        return this.bind('mouseenter', fnOver).bind('mouseleave', fnOut);
    },

As you can see, hover does nothing more than hook up the 'mouseenter' and
'mouseleave' events to your two handlers. So, if you only need to listen for
one of these events and not both, it's perfectly OK to use one of those two
events (but not, as you note, mouseover and mouseout).

var a = [ 'a', 'b', 'c' ];
var x = a[0];

The only reason that .get(n) even exists is for historical backward
compatibility. In the very first version of jQuery, the $(...) return object
was not an array-like object. It had an undocumented property that contained
the array of DOM elements, and .get(n) was the only supported way to access
that array.

Very early on, we converted the code to make the jQuery object actually be
an array-like object with [0], [1], etc. properties. But since there was
already code out there using .get(n), it remained for backwards
compatibility.

I'm not sure I prefer it in this simple test case, though. I think the "not
really bad" example is easier to understand. But I can see where there would
be other cases where this trick may help make the code more clear - so
thanks for pointing it out!

Indeed, jQuery gave up that bit of freedom when the underlying array was
exposed directly as [0]..[n] and .length properties on the jQuery object
itself, and documented as such. This can no longer be changed without
breaking a lot of code.

If you don't like it, blame me: I'm the one who talked John into the change
and came up with the initial patch. :-)

As to whether you should use .get(n) or [n] today, I would look at it this
way: Even if you use .get(n) in your code, that won't give jQuery the
freedom to change its implementation. jQuery will still have to support [n]
whether you use it or not. It's a done deal.

So, you may as well use the shorter and more efficient [n].

A couple things to note about this:

1. The .hover() wasn't always written that way internally. It was a  
change in one of the 1.2.x versions. So if you're using an old version  
of jQuery, you might want to double check for those mouseenter and  
mouseleave events before attempting to use them.

2. At this point there is no shorthand .mouseenter(fn)  
or .mouseleave(fn) like this is .mouseover(fn) and .mouseout(fn).  
Instead, we have to use .bind('mouseenter', fn)  
and .bind('mouseleave', fn)

Leanan, sure, if you have a short chain of functions, by all means put it on
one line. But if it gets complex, you may start thinking about breaking it
up into smaller chunks - and you're right, this is NOT the way to do it:

    $('selector').func1()
                 .func2()
                 .func3();

If you view that in a monospaced font the periods line up perfectly - but in
a proportional font it's ugly.

That's why I don't like this style: I code in a proportional font! If you
write this code in a monospaced font, it will look like that last example in
my editor. I can read it OK, but who wants to?

If you convert that to erroneous's style, it works fine in any editor,
proportional or monospaced:

    $('selector')
        .func1()
        .func2()
        .func3();

It doesn't even matter if you indent with spaces or tabs, as long as you use
them consistently. It just works.

Again, if they're short method calls just string them together on one line:

    $('selector').func1().func2().func3();

But if they're longer and you want to break it into multiple lines for
clarity, erroneous's style is the way to do it.

BTW, if you haven't coded in a proportional font, you ought to try it - if
your editor supports it. Programmer's editor support for proportional fonts
is spotty, but my favorite editor, Komodo [1], handles them fine.
Proportional fonts are great - I use Georgia on a high-density display with
ClearType enabled, so my code is more readable and I can see more of it at a
time.

-Mike

So what's the intent with these two events? Are they intended for apps to
use and will remain stable - in that case they just need to be added to the
documentation.

Thanks,

I don't think you're off base. It's my impression that the two events  
are sticking around. But, then again, it's just an impression. And  
it's just mine.

They actually are in the documentation -- but they're kind of hidden:

Possible event values: blur, focus, load, resize, scroll, unload,  
click, dblclick,  mousedown, mouseup, mousemove, mouseover, mouseout,  
mouseenter, mouseleave, change, select,  submit, keydown, keypress,  
keyup, error

( http://docs.jquery.com/Events/bind#typedatafn )

They were also mentioned in the Release Notes for jQuery 1.2.2 [1].  
I'd love to see them given their own shorthand methods to put them on  
par with their mousey brethren.

Not sure, but it could be just a matter of adding them to the list  
around line 2386:

jQuery.each( ("blur,focus,load,resize,scroll,unload,click,dblclick," +
        "mousedown,mouseup,mousemove,mouseover,mouseout,change,select," +
        "submit,keydown,keypress,keyup,error").split(","), function(i, name){

        // Handle event binding
        jQuery.fn[name] = function(fn){
                return fn ? this.bind(name, fn) : this.trigger(name);
        };

[1] http://docs.jquery.com/Release:jQuery_1.2.2#.bind.28.22mouseenter.22....

cheers.

Joe

On Aug 15, 10:38 pm, Karl Swedberg <k...@englishrules.com> wrote: