Home/ Questions/Q 6845131
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T00:27:46+00:00

I really have trouble with OO coding in js. I have written a piece

  • 0

I really have trouble with OO coding in js. I have written a piece of code which rotates through 3 divs, and pauses on hover of any div. This code is just regular js using an array/json as the input. the code is a bit long so sorry about that. I just need some guidance on how I can convert this primitive code to a better form, as in OO and encap. When I tried myself I could not pass the slides array/json to my defined object. Is there a trick or guideline i can follow on how to rewrite this to a better form?

Edit – What is a good guideline to follow so I can rewrite this with objects instead of global variables and loose functions

var slideIndex = 0;
var prevIndex = 0;
var t;

function initPromo(){
sortSlides();
nextPromo();
addListeners();
}    

function addListeners(){
for(var i=0; i<slides.length; i++) 
    $(slides[i].el).hover(function(){ stopPromo(); }, function(){ resumePromo(); });
}
function resumePromo(){ startTimer(); }

function stopPromo(){ clearTimeout(t); }

function nextPromo(){
    if(slideIndex > 0 || prevIndex > 0) $(slides[prevIndex].el).css("display","none");
    $(slides[slideIndex].el).css("display","block");
    prevIndex = slideIndex;
    slideIndex = (slideIndex<slides.length-1) ? slideIndex+1 : 0;
    startTimer();
}

function startTimer(){ t = setTimeout("nextPromo()", 3000); }

function SortByWeight(a,b) { return b.weight - a.weight; }
function SortByWeightFr(a,b) { return b.frWeight - a.frWeight; }

function sortSlides(){
    ($("body.en").length > 0) ? slides.sort(SortByWeight) : slides.sort(SortByWeightFr);    
}

var slides = [
{
    el:'#ps1',
    weight:1,
    frWeight:3
},
{
    el:'#ps2',
    weight:0.5,
    frWeight:6
},
{
    el:'#ps3',
    weight:4,
    frWeight:9
}
];
window.onload = function () {
    initPromo();    
};

HTML

<body class="en">
<div id="homepageSlides">
    <div id="promoSlides">
        <div id="ps1">ps1</div><div id="ps2">ps2</div><div id="ps3">ps3</div>
    </div>
</div>
</body>

Edit: Early days in OO coding, not asked in the right way

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well your “plain javascript” code is already taking you part way there. The first function you have defined identies the domain object: Promo.

    var Promo = function () { };

    You have actions on an instance of promo, init, start, stop, resume, etc. These can be defined on the prototype of Promo.

    Promo.prototype.init = function() {
  // ...
};

    It could get a little annoying typing prototype each time, so we could bundle the prototype into a pointer that allows us a lot easier access…

    var Promo = function () { };
(function(obj) {

    obj.init = function() {
        // ...
    };

})(Promo.prototype);

    So we’ve got some structure but we need to now separate concerns. Throughout your plain javascript you’ve got config type data strewn through the code. It’s generally a good idea to isolate these bits of data to a single entry point for your object.

    obj.init = function(_el) {
     // where _el is the base element of this widget
};

    I see you’re also using jQuery which is good because it gives you a lot of power. One convention I like to use is instead of passing a huge amount of config data into a given widget, I like to give my objects minimal config and let them inspect the HTML to determine additional configuration data. This has the added advantage of if you wanted to add slides in the future or otherwise make changes to the slide content you need’nt worry about changing the JS.

    Let’s say we were to alter the slide HTML to look like…

    <div id="promoSlides">
    <div data-type="slide" data-slide-id="1">ps1</div>
    <div data-type="slide" data-slide-id="2">ps2</div>
    <div data-type="slide" data-slide-id="3">ps3</div>
</div>

    Using jQuery we could identify how many slides are present.

    obj.init = function(_el) {
    this.baseElement = $(_el);
    this.slides = this.baseElement.find('*[data-type="slide"]');
};

    Now we’re passing in minimal config, we’ve separated out the identification of the slides to the HTML, and we’ve got a nice pattern for a self-sufficient object. The rest would be to fill in the details (totally untested, but something like this)…

    var Promo = function () { };
(function (obj) {

    obj.init = function(_el, _delay) {

        // Initialize markup
        this.baseElement = $(_el);
        this.slides = this.baseElement.find('*[data-type="slide"]');
        this.slideDelay = _delay;

        // Sort slides
        // (not sure what's going on here)

        // Bind events
        this.baseElement
            .on('mouseenter', this.stop.bind(this))
            .on('mouseleave', this.start.bind(this));
    };

    obj.start = function() {
        this.timer = setInterval(this.advance.bind(this), this.slideDelay);
    };

    obj.stop = function() {
        clearInterval(this.timer);
    };

    obj.advance = function() {
        // Slide the visible slide off screen
        // (note: the parent tag will need overflow:hidden)
        var visible = this.baseElement.find('*[data-type="slide"]:visible');
        visible.animate({ left: '-' + (visible.width()) + 'px' }, 1000);
        // Slide the next slide in
        var next = visible.next();
        next.css('left', this.baseElement.width() + 1).animate({ left: '0' }, 1000);
    };

})(Promo.prototype);

    Note that I made use of bind which isn’t supported yet in older versions of IE.

    • 0