What I Learned From a Pure OOJS Web App

In the past 2.5 months, I have been quite a workoholic... I worked so many hours that it practically took up all of my time to enjoy and do anything else. But at the same time, I learned quite a bit of Object Oriented JS thanks to my current gig. It is a pure JS web application with some of jQuery without other JS framework. So no documentations... quite a leanring curve... Also I need to mention I always claimed that my JS sucks, so the following maybe trivial to some, but these are things I learned and understand better about JS:

  1. Think less about jQuery

    Many times I tried to do something, I let thinking in the "jQuery Way" got in the way. Instead of thinking "How do I manipulate objects/arrays?", I was still stuck in the mindset of "How do I get to this DOM?". It is still very hard to turn that off so that's why I really like AngularJS, it slowly steers me away from that mindset. And I never knew manipulating arrays can be that much fun such as pushing all of the contents into an array, then do stuff with it then render. Instead of the other way...
  2. Over-thinking

    If I need to for some reasons reconstruct an object to send to the server from a bunch of strings, it really no point of doing this:

    var test = "Apple, Orange, Kiwi",
                testSplit = test.split(','),
                testArr = [], newValues;
            for (var i = 0; i < test.length; i++){
                testArr.push(testSplit[i]);
            }
            newValues = testArr.join('|'); /*Need to convert to "Apple|Orange|Kiwi"*/

    In fact... all I had to do was...

    var test = "Apple, Orange, Kiwi",
            newValues = test.replace(',', '|');  /* "Apple|Orange|Kiwi" */

    Or convert the string to Array:

    var test = "Apple|Orange|Kiwi",
            testArr = test.split('|'); /*['Apple', 'Orange', 'Kiwi'];*/

    Here's another 'duh' if I want to starts an array object at 1 instead of 0... (I was looping a whole bunch of stuff the array, pushing this and that before this...)

    var arr = [], value = 'blah';
        arr[1] = {'name':value};

    Yeah... face palm moments right there...

  3. Debugging

    To be honest, before this gig, I didn't have to use Break points that much before. If it wasn't this gig, I wouldn't have an opportunity learn how to debug properly. I am still poking with Profiling, but another face palm moment that I didn't learn this sooner.

  4. this

    Of course in the JS world, this is very important for scoping. I already got a pretty good understanding but this gig really helps me understand this thoroughly. I guess the easiest trick not to mess up this is to declare var _this = this beginning of a method, so you would always have access to the this = window object

  5. Prototype inheritance

    If I have methods within a Contructor, when I declare new Foo(), all of the methods within it are "shared". But if I want to add methods that can be different from one to another, Foo.prototype.method is the way to go.

  6. You can't set paired objects dynamically...

    In general, you just can't do this...

    var keyName = 'field_key',
                    value = 'I am a value',
                    object = {};
    
                object.push({keyName:value}); /* Object now has {keyName:'I am a value'} */
    But you can do:
    var keyName = 'field_key',
                    value = 'I am a value',
                    object = {};
    
                object[keyName] = value; /* Object now has {'field_key':'I am a value'} */
    Loopy! (pun intended)
  7. Where using === doesn't make sense

    I'm sure plenty of people say YOU MUST ALWAYS use === !!!! Well, I don't always remember whether it is typeof blah === undefined or typeof blah === "undefined", with == I don't have to remember (yes, I know what coersion is thanks to Kyle Simpson and Nicholas Zarkas): blah == undefined whether I forget the quotes or not. It's just practical. Besides, in certain cases that I really don't know whether the backend guys decide to send me 1 as an integer or a string, blah === 1 will fail if they decided to give me a string . Tell me the point of (besides being anal) by doing this:

    if(blah === 1 || blah === '1')
  8. IE7 / IE8 doesn't like $.remove()??

    I googled a bit on that and on stackoverflow a few people had the same issue. To solve this, use removeChild()

    /* jQuery method */
    $(node).remove();
    
    /* JS method that IE7 / IE8 likes */
    node.parentNode.removeChild(node)
  9. indexOf with String is supported from IE6+

    One of the confusions I have is indexOf. For Array, it's not supported for IE8 and below. But for String, it is.

    /* Not supported IE8 below */
        var arr = ['cow','dog','cat'];
        arr.indexOf('cat'); /*<IE8 - whaaa? */
    
        var str = 'Cats are kute!';
        str.indexOf('kute'); /* 9 */

© 2015 - Mon Sucher