Skip to content

Instantly share code, notes, and snippets.

@mveteanu
Last active January 18, 2017 15:18
Show Gist options
  • Save mveteanu/d40f344802f18be67caccdf22ee98b82 to your computer and use it in GitHub Desktop.
Save mveteanu/d40f344802f18be67caccdf22ee98b82 to your computer and use it in GitHub Desktop.
Encapsulation in JavaScript

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:

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

<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>
<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>
<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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment