Encapsulation in JavaScript

README.md

Encapsulation in JavaScript

These examples shows to JavaScript programmers coming from standard OOP languages how to achieve encapsulation in JavaScript.

To try these examples, just download the gist on your local computer and open the .html files.

Alternatively, you can play with these examples online via jsbin.com:

• Encapsulation in javascript - method 1a/3
• Encapsulation in javascript - method 1b/3
• Encapsulation in javascript - method 2/3
• Encapsulation in javascript - method 3/3

... you can also run them via bl.ocks.org:

• Encapsulation in javascript - method 1a/3
• Encapsulation in javascript - method 1b/3
• Encapsulation in javascript - method 2/3
• Encapsulation in javascript - method 3/3

p01a.html

<h1>Encapsulation in javascript - method 1a/3</h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.min.js"></script>
<script>

var shape;


function setup()
{
    createButton("Inc").mousePressed(onbtnIncClick);
    createButton("Dec").mousePressed(onbtnDecClick);
    createP("");

    createCanvas(800, 600);

    shape = CreateShapeObject();
}

function draw()
{
    clear();  // clears the background

    shape.draw( width / 2, height / 2);    
}

function onbtnIncClick()
{
    shape.inc(10);
}

function onbtnDecClick()
{
    shape.dec(10);
}

// Use closure to protect private data
function CreateShapeObject()
{
    var radius = 50;

    function incRadius(n)
    {
        radius += n;
    }

    function decRadius(n)
    {
        radius -= n;
    }

    function drawShape(x, y)
    {
        ellipse( x, y, radius * 2, radius * 2 );
    }

    // Public API (module pattern)
    return {
        inc : incRadius,
        dec : decRadius,
        draw : drawShape,
    }
}


</script>

p01b.html

<h1>Encapsulation in javascript - method 1b/3</h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.min.js"></script>
<script>

var shape;


function setup()
{
    createButton("Inc").mousePressed(onbtnIncClick);
    createButton("Dec").mousePressed(onbtnDecClick);
    createP("");

    createCanvas(800, 600);

    shape = CreateShapeObject();
}

function draw()
{
    clear();  // clears the background

    shape.draw( width / 2, height / 2);    
}

function onbtnIncClick()
{
    shape.inc(10);
}

function onbtnDecClick()
{
    shape.dec(10);
}


// This is the similar to the example in p14.html
function CreateShapeObject()
{
    var radius = 50; // private
    
    return {
        color: "black",  // public

        inc : function(n)
        {
            radius += n;
        },

        dec : function(n)
        {
            radius -= n;
        },

        draw : function(x, y)
        {
            stroke(this.color);
            ellipse( x, y, radius * 2, radius * 2 );
        }
    }
}


</script>

p02.html

<h1>Encapsulation in javascript - method 2/3</h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.min.js"></script>
<script>

var shape;


function setup()
{
    createButton("Inc").mousePressed(onbtnIncClick);
    createButton("Dec").mousePressed(onbtnDecClick);
    createP("");

    createCanvas(800, 600);

    shape = new ShapeObject();
}

function draw()
{
    clear();  // clears the background

    shape.draw( width / 2, height / 2);    
}

function onbtnIncClick()
{
    shape.inc(10);
}

function onbtnDecClick()
{
    shape.dec(10);
}


function ShapeObject()
{
    this.radius = 50;

    this.inc = function(n)
    {
        this.radius += n;
    }

    this.dec = function(n)
    {
        this.radius -= n;
    }

    this.draw = function(x, y)
    {
        ellipse( x, y, this.radius * 2, this.radius * 2 );
    }
}


</script>

p03.html

<h1>Encapsulation in javascript - method 3/3</h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.min.js"></script>
<script>

var shape;


function setup()
{
    createButton("Inc").mousePressed(onbtnIncClick);
    createButton("Dec").mousePressed(onbtnDecClick);
    createP("");

    createCanvas(800, 600);

    shape = new ShapeObject();
}

function draw()
{
    clear();  // clears the background

    shape.draw( width / 2, height / 2);    
}

function onbtnIncClick()
{
    shape.inc(10);
}

function onbtnDecClick()
{
    shape.dec(10);
}


function ShapeObject()
{
    this.radius = 50;
}

ShapeObject.prototype.inc = function(n)
{
    this.radius += n;
}

ShapeObject.prototype.dec = function(n)
{
    this.radius -= n;
}

ShapeObject.prototype.draw = function(x, y)
{
    ellipse( x, y, this.radius * 2, this.radius * 2 );
}


</script>