I am trying to learn how to write more object oriented javascript code, but I am having a hard time understanding the correct way to do it, and how it is useful for front end development. As you can see below, I tried to rewrite my old javascript code to be more object oriented, but it just doesn't seem necessary for what I am doing. I am not even sure if I am doing it correctly (would it be better to use a self executing anonymous function for this?). Could someone take a look at my code and tell me how I can improve it? Also, explain to me why it is important to write object oriented javascript for the development of a websites frontend?Original Code// Document and Windows Variablesvar $document = $(document),    $window = $(window);// Equalizefunction equal_heights() {    var $row = $('.equal');    if ($row.length > 0) {        $row.each(function() {            var $sections = $(this).children(),                largest_height = 0;            $sections.height('auto');            $sections.each(function() {                var h = $(this).height();                if (largest_height < h) largest_height = h;            });            $sections.height(largest_height);        });    }}// Position Popupsfunction position_popup() {    var $popup = $('.popup'),        pop_height = $popup.outerHeight(true),        pop_width = $popup.outerWidth(true),        browser_height = $(window).height(),        pop_top = 10,        page_pos = document.documentElement.scrollTop || document.body.scrollTop;    if (pop_height < browser_height) {        pop_top = browser_height / 2 - pop_height / 2;    }    $popup.css({        top: page_pos + pop_top    });}// Page Animation Fade (On Scroll)function page_animations() {    $('.fade-me').each(function(i) {        if ($window.scrollTop() > $(this).offset().top - ($window.height() / 1)) {            $(this).addClass('is-showing');        }    });}page_animations();/********************Run Functions********************/$window.on({  load: function() {   equal_heights();   position_popup();  }});OOP// Document and Windows Variablesvar $reuseVars = {    window: $(window),    document: $(document)}//  Functions Objectfunction AllFunctions() {}AllFunctions.prototype = {    // Equal Heights    equalHeights: function() {        var $row = $('.equal');        if ($row.length > 0) {            $row.each(function() {                var $sections = $(this).children(),                    largest_height = 0;                $sections.height('auto');                $sections.each(function() {                    var h = $(this).height();                    if (largest_height < h) largest_height = h;                });                $sections.height(largest_height);            });        }    },    // Popup Position    positionPopup: function() {        var $popup = $('.popup'),            pop_height = $popup.outerHeight(true),            pop_width = $popup.outerWidth(true),            browser_height = $(window).height(),            pop_top = 10,            page_pos = document.documentElement.scrollTop || document.body.scrollTop;        if (pop_height < browser_height) {            pop_top = browser_height / 2 - pop_height / 2;        }        $popup.css({            top: page_pos + pop_top        });    },    // Page Fade Animation - On Scroll    pageAnimation: function() {        $('.fade-me').each(function(i) {            if ($reuseVars.window.scrollTop() > $(this).offset().top - ($reuseVars.window.height() / 1)) {                $(this).addClass('is-showing');            }        });    }};// Create All Functions Objectvar allFunctions = new AllFunctions();// Run Functions on doc readyallFunctions.pageAnimation();/******************** Run Functions********************/$reuseVars.window.on({   load: function() {     allFunctions.equalHeights();     allFunctions.positionPopup();   }});
OOP and non-OOP versions of layout and page animation code
javascript;jquery;object oriented;comparative review;layout