1
\$\begingroup\$

I'm at the very beginning of starting to learn object-oriented programming patterns in JavaScript and PHP. Up until now I've always coded in a purely functional pattern. I'm doing a lot of reading, but I think what would really help me is being able to see a direct correlation between how my code is currently written and how it would be written in OO.

Could someone explain to me how I could write something like this, which consists of several event functions, in an object-oriented fashion?

(function ( $, window, document, undefined ) {
setTimeout(function(){
    $(document.body).append('<div id="instruction"><div class="inner"></div></div>');
    $(document.getElementById('instruction')).animate({'opacity':1},1500);
},400);

$( document ).on( 'click', '*', function () {
    $(document.getElementById('instruction')).animate({'opacity':0},1500,function(){
        $(this).remove();
    });
});

var l = document.getElementById('left');
var r = document.getElementById('right');

// Expand right section
$('hr').on('click', function(){
    $('article').show().removeClass('short').animate({'opacity':1}, function(){
        $(this).find('p').show();
        var m = $(document.getElementById('middle'));   
        var h = Math.max(l.offsetHeight,r.offsetHeight);
        m.css({'height':h + 'px'});
    });
});

$('#step2').on('click', function(){
    $(this).remove();
    $('<button id="shuffle">SHUFFLE</button>').appendTo('footer');
});

// remove list items
$( document ).on( 'click', 'span', function () {
    var subtract = $(this).parent().height();
    $(this).parent().remove();
    var m = $(document.getElementById('middle'));

    var h = Math.max(l.offsetHeight,r.offsetHeight);
    m.css({'height':h + 'px'});
})

// shuffle
$( document ).on( 'click', '#shuffle', function () {
    var ul = document.querySelector('ul');
    for (var i = ul.children.length; i >= 0; i--) {
        ul.appendChild(ul.children[Math.random() * i | 0]);
    }
});
var load = false;
$(window).resize(function(){
    var m = $(document.getElementById('middle'));
    if (load == false) { // only need to do this once
        $.getJSON('',
            function(e) { // load data from Google Spreadsheet
                var t = 1,a,l;
                for (var n = 0; n < e.feed.entry.length; n++) {
                    a = e.feed.entry[n].gsx$name.$t;
                    l = '<li class="list" aria-role="list-item">' + a + '<span class="noselect" aria-role="radio">remove</span></li>';
                    $("ul").prepend(l);
                }
                t++
            }
        )
        .success(function(){ // evaluate height, set vertical rule
            var h = Math.max(l.offsetHeight,r.offsetHeight);
            m.css({'height':h + 'px'});
        })
        .fail(function() { // load something even if there is no connection
            var s = ['Lorem','ipsum'];
            var a = s.length;
            for (var i = 0; i < a; i++) {
                l = '<li class="list">' + s[i] + '</li>';
                $("ul").prepend(l);
            }
        });

        $.getJSON('',
            function(e) {
                var t = 1,a,l;
                for (var n = 0; n < e.feed.entry.length; n++) {
                    a = e.feed.entry[n].gsx$paragraph.$t;
                    l = '<p>' + a + '</p>';
                    $("article").prepend(l);
                }
                t++
            }
        )
    }
    var h = Math.max(l.offsetHeight,r.offsetHeight);
    m.css({'height':h + 'px'});

    load = true;
}).resize();


})( jQuery, window, document );

The code block is not really relevant beyond serving as an example for me, but its purpose is merely a test, visible here. It consists of a 2-column layout with a border between the two. The middle border must always equal the tallest column and each columns height needed to be manipulable, with a secondary step to shuffle the order of the content on the left side.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.