Loading ...
Sorry, an error occurred while loading the content.

didactic example for clean JS

Expand Messages
  • Thomas Koch
    Hi, can somebody recommend me some small pieces of javascript code, that I can study to improve my coding style? I already study YUI, but it is to large to
    Message 1 of 2 , Jul 9 1:24 PM
    • 0 Attachment
      Hi,

      can somebody recommend me some small pieces of javascript code, that I
      can study to improve my coding style?

      I already study YUI, but it is to large to take it as a whole for a
      study subject and I also have the impression that it contains some
      legacy code. But I'm still not advanced enough to separate the good
      stuff from the bad stuff.

      Some of my questions are:

      How to build widgets that contains other widgets and interact?
      How to name things?
      How to document my code?
      In which order should I put properties so that I'll find my way also
      one month later?

      In the PHP world there are some sets of conventions and most developer
      teams agree to one set of conventions. I'm searching for the same
      thing in JS.

      Thanks for your advices,

      Thomas Koch
      http://www.koch.ro

      ----------------------------------------------------------------
      This message was sent using IMP, the Internet Messaging Program.
    • Klemen Slavič
      Hello, While I don t think there s a one paradigm to rule them all, I can testify to the elegant extension methods that jQuery employs in its plugin
      Message 2 of 2 , Jul 9 1:51 PM
      • 0 Attachment
        Hello,

        While I don't think there's a "one paradigm to rule them all," I can testify to the elegant extension methods that jQuery employs in its plugin authoring guidelines.

        Basically, a jQuery object instantiated using a selector is a DOM result set with enriched methods, like iteration. A jQuery plugin extends its functionality by extending its prototype by using code like this:

        jQuery.fn.myPlugin = function(options) {
          // iterate over each element and return the same result set
          return this.each(function() {
            /* do something with the single element */
          };
        });

        See http://docs.jquery.com/Plugins/Authoring for more details.

        I know, it's not very helpful for general Javascript coding practices, but I think it illustrates a well-defined way to managing and extending existing functionality. A lot can be learned by writing plugins for jQuery and studying its code base.

        I would recommend reading up Crockford's articles (http://javascript.crockford.com/) to better understand the language itself. Closures are the alpha and omega when it comes to widgets, since they need to be isolated from each other and from other code as much as possible for them to be able to be portable.

        Stuff like creating objects with quasi-private methods using closures enables such coding practices:

        var MyObject = function() {
          var myPrivateMethod = function() { /* ... */ };
          var myPrivateVariable = "some value";
          var myPublicMethod = function() { /* ... */ };
          var myPublicVariable = "some other value";
          return {
            someMethod: myPublicMethod,
            someVariable: myPublicVariable
          };
        };

        var a = MyObject();

        When calling a.someMethod(), you'll actually be calling the function inside the closure and someMethod() will be able to call myPrivateMethod() within its scope when it's executed like it is above. From the outside, though, you won't be able to call myPrivateMethod() (well, unless you use Firefox's eval(code, scope) - then you could bypass this).

        Executing code without creating any global objects is also possible:

        (function() {
          var a = 3;
        })();

        alert(a); // displays "undefined"

        There are also examples on how to use closures for event handlers, effectively binding values to the function being executed.

        Anyhoo, I've been verbose enough - probably best if you head to the provided URLs and start looking up the terms I've been liberally tossing around this post.

            Cheers,

            -Klmn
      Your message has been successfully submitted and would be delivered to recipients shortly.