aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Don't mistake this for a troll post. Elegant Javascript Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Don Watch "Don New topic
Author

Don't mistake this for a troll post. Elegant Javascript

Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17257
    
    6

It is pretty amazing how one language's elegant, clean easy to read code, is another language's completely wrong way that is unreadable code.

Sorry Bear, but this post is based on the appendix A in JQuery in Action. Even though the "design" is the "best practice" in JavaScript

You talk about functions and how it is a waste to assign a function to a "name" in the window object. So it is easier to add it inline, such as a method parameter.

Basically the same as in Java making an Inner Class, and basically an anonymous inner class. Which, while in some places is the best approaches. Swing as an example.

But as far as readability if I saw something like



I find it difficult for me to read because there are so many functions there, and some might be run at different times.

And there most likely be lots more code there, that I would find that long and confusing and my Java instincts would want to break it up into functions that are named to the window object. But, now I know that my approach is the bad practice way. And no, I am not re-using those functions elsewhere. (In case you were going to say that if you reuse it, it is a best practice to "name" the function)

Mark


Perfect World Programming, LLC - Two Laptop Bag - Tube Organizer
How to Ask Questions the Smart Way FAQ
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61433
    
  67

Most jQuery users will make copious use of inline functions. I personally find it concise and easier to keep related things in one place. It also permits the heavy use of closures, without which it becomes hard to do certain things.

Those coming from a functional programming background find this very natural. For me, I had to grow into it.

But if you're more productive and happy with lots of discrete named functions, I don't see any reason that you shouldn't code that way.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
You can use named functions, just keep them out of the global scope.

I use them since it makes it easier for other programmers on my team to understand the code with less comments.

Eric
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61433
    
  67

Good point Eric -- named functions can be defined within discrete scopes as well.
David Newton
Author
Rancher

Joined: Sep 29, 2008
Posts: 12617

It's pretty rare I've had more than 2-3 nested functions, actually. (But I come from a Lisp background, where we hurl lambdas around with reckless abandon.) I'll name them *sometimes*, depending on their complexity. Sometimes I'll define the function very locally, like inside one of the enclosing functions, to both isolate it, and to indicate that it's very tightly coupled to what follows.
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17257
    
    6

Eric Pascarello wrote:You can use named functions, just keep them out of the global scope.

I use them since it makes it easier for other programmers on my team to understand the code with less comments.

Eric


So how do you keep them out of the global space?

Also, I can see Bear's point about closures and access.

So is there a clean way to do this, make "named" functions for separation but also have closures have access them. Is it like making JQuery functions to add on to JQuery. Like what was it chapter 6 or 7 in JQuery in Action?

Mark
David Newton
Author
Rancher

Joined: Sep 29, 2008
Posts: 12617

You keep them out of the global space by putting them in your own space, either following one of the JavaScript module patterns, or by doing what I said, and defining them within the enclosing function. Depending on where you put them they may not be part of the closure you want them to be; in that case pass the closure argument(s) to the function rather than accessing them directly.
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17257
    
    6

"or by doing what I said, and defining them within the enclosing function."

But that was what my point more or less is about, by defining them within the enclosing function can make things get pretty nested.

I just took Gregg's JQuery/Grails tutorial and re-wrote what I think was the way I would think looks to be the cleanest.

http://www.coderanch.com/t/488514/Groovy/Grails-Tutorials-Available

Like I said in my first post, I am so used to Java coding, where I really never ever want my methods to be more than say 10 lines of code. Because it ends up being lower cohesion, the method tends to be doing more than one thing, and unfortunately, my Java "bias" is getting in the way.

In that post, the two methods are in the global space attached to the window object. I could make a markFunctions object and assign them to that, Is that what you mean by "my space"?

Thanks

Mark
David Newton
Author
Rancher

Joined: Sep 29, 2008
Posts: 12617

> by defining them within the enclosing function can make things get pretty nested.

No no, I mean like this:If you need access to enclosed objects they can be passed to the handlers as parameters, rather than getting them from the closure. Have fun with the "this" keyword.

But yes, any of the JavaScript module patterns (of which the above is sort of one) could be used to namespace the functions. I'm partial to the immediate-execution module pattern myself, but I don't know if I have a compelling technical reason to prefer it (and there may be some pretty good arguments against it).
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17257
    
    6

Thanks David, that does look cleaner except for the one function defined inside the first function.

But yeah, I can see that as a good mix.

Mark
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Mark Spritzler wrote:Thanks David, that does look cleaner except for the one function defined inside the first function.

But yeah, I can see that as a good mix.

Mark


Most of the time it is important that you define functions inside of others so you do not have to pass in a bunch of variables.

Eric
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17257
    
    6

Eric Pascarello wrote:
Mark Spritzler wrote:Thanks David, that does look cleaner except for the one function defined inside the first function.

But yeah, I can see that as a good mix.

Mark


Most of the time it is important that you define functions inside of others so you do not have to pass in a bunch of variables.

Eric


Do you always have to pass a bunch of variables in those cases?

In the other thread, I don't think it was necessary to pass in more variables. However, I can definitely understand when the this context could be different because they are not inside of others.

Mark
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Mark Spritzler wrote:

Do you always have to pass a bunch of variables in those cases?

In the other thread, I don't think it was necessary to pass in more variables. However, I can definitely understand when the this context could be different because they are not inside of others.



It really depends on how you structure your code as you mentioned. JavaScript has a lot of trade-offs between maintainability, readability, and speed. It is a delicate balancing game that can really can be a challenge to master. I know I still struggle and I code in JavaScript for a living.

I would advise you to pick up Crockford's The Good Parts and read it ASAP. I would say sit down and read the entire thing straight through and do not analyze it in depth. After you read the whole thing, go back and study the details. After you read that book, you will get a better understanding of JavaScript, why it does certain things, and some ideas on "OOP" with JavaScript.

The problem with the book is you should not treat everything he writes in that book as perfect or the standard way of writing JavaScript. If you follow all of his advice, you can find yourself making your application perform a lot slower.

[This is a little off topic, but thought I would say it here] One thing I tell people about writing applications in JavaScript that I work with: Write your application so it gets the task done and do not worry about performance. After you get it running correctly, check out the performance. If you find issues, look for areas to improve in. The problem areas are normally for loops, variable/element look-ups, object detection/creation, code re-evaluation, and document updating.

The great thing is changing one thing in one browser may make another one slower!

Eric



David Newton
Author
Rancher

Joined: Sep 29, 2008
Posts: 12617

His videos and website are really great resources, too.
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17257
    
    6

Thanks guys.

I have read the good parts before. But at a time when I wasn't as serious about learning Javascript because I still hate HTML and would like to see it disappear. ;)

Mark
David Newton
Author
Rancher

Joined: Sep 29, 2008
Posts: 12617

Me too, but JavaScript itself is kinda cool except for a few major stupid things (I hate this's semantics :(
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Mark Spritzler wrote:Thanks guys.

I have read the good parts before. But at a time when I wasn't as serious about learning Javascript because I still hate HTML and would like to see it disappear. ;)

Mark


You prefer command line interfaces instead?

Eric
David Newton
Author
Rancher

Joined: Sep 29, 2008
Posts: 12617

Yes!

 
It is sorta covered in the JavaRanch Style Guide.
 
subject: Don't mistake this for a troll post. Elegant Javascript