Design Pattern Learning - (11. Bridge Pattern)

Bridge mode: Extract the common ground of requirements, the key here is to decouple from this

// extract common ground
    function changeColor( dom ,color ,bg){
        dom.style.color = color;
        dom.style.background = bg;
    }

    var spans = document.getElementsByTagName('span');
    spans[0].onmouseover = function () {
        changeColor( this, 'red' , '#ddd' );
    };
    spans[0].onmouseout = function () {
        changeColor( this, '#333' , '#df5f5f5' );
    };

    spans[1].onmouseover = function () {
        changeColor( this.getElementsByTagName('strong')[0], 'red' , '#ddd' );
    };
    spans[1].onmouseout = function () {
        changeColor( this.getElementsByTagName('strong')[0], '#333' , '#df5f5f5' );
    };

 // Diversified objects, similar to the builder pattern, except that the classification is not implemented in the way of closures

function Speed( x,y ){
        this.x = x;
        this.y = y;
    }
    Speed.prototype.run = function () {
        console.log( 'moving up' );
    };

    function Color( cl ){
        this.color = cl;
    }
    Color.prototype.draw = function () {
        console.log( 'Draw color' );
    };

    function Ball( x, y ,c ){
        this.speed = new Speed( x, y );
        this.color = new Color( c );
    }
    Ball.prototype.init = function () {
        this.speed.run();
        this.color.draw();
    };
    var ball = new Ball (1, 2, 3);
    ball.init();