add an example of singleton in js (#18504)
parent
a293769892
commit
82267b8051
|
@ -1,32 +1,19 @@
|
||||||
---
|
---
|
||||||
title: Creating Singleton In JavaScript
|
title: Creating a Singleton in JavaScript
|
||||||
---
|
---
|
||||||
|
|
||||||
## Creating Singleton In Javascript Guide
|
## Creating a Singleton in JavaScript
|
||||||
|
|
||||||
This Article is about creating the Singletons in Native(Pure) Javascript. This concept can be useful to maintain clean code.
|
|
||||||
|
|
||||||
|
|
||||||
If you want to maintain your code or somedata should remain same for through out your application this is the way you can get it done.
|
|
||||||
|
|
||||||
|
|
||||||
**Prior knowledge**
|
|
||||||
This is just to help you understand concept more easily otherwise you can always copy-paste code and change it accordingly.
|
|
||||||
|
|
||||||
- Basic Javascript Syntax
|
|
||||||
- Javascript Functions
|
|
||||||
- IIFE in Javascript
|
|
||||||
|
|
||||||
|
|
||||||
|
A singleton is an object that only allows one instance of itself to be created and allows a global point of access to it. The singleton design pattern can be useful if you have some data that should remain the same throughout your application.
|
||||||
|
|
||||||
### Let's Get Started
|
### Let's Get Started
|
||||||
|
|
||||||
Let's create object with IIFE function that will get executed instantly to give us effect of Singleton.
|
Let's create an object with an immediately-invoked function expression (or _IIFE_, pronounced "iffy") that will give us the effect of a singleton.
|
||||||
|
|
||||||
```
|
```
|
||||||
var singletonFn = (function(){ //Created IIFE Function
|
var singletonFn = (function(){ // Created IIFE Function
|
||||||
var dataCounter = 0;
|
var dataCounter = 0;
|
||||||
return { //Any code inside this return stuff will be accessible directly using objectname.
|
return { // Any code inside this return stuff will be accessible directly using objectname.
|
||||||
|
|
||||||
getDataCounter: function(){
|
getDataCounter: function(){
|
||||||
return dataCounter;
|
return dataCounter;
|
||||||
|
@ -36,25 +23,66 @@ var singletonFn = (function(){ //Created IIFE Function
|
||||||
dataCounter = val;
|
dataCounter = val;
|
||||||
},
|
},
|
||||||
|
|
||||||
fishNames: ["SimpleFish"] //Can create variables, Arrays, etc.
|
fishNames: ["SimpleFish"] // Can create variables, arrays, etc.
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
```
|
|
||||||
|
|
||||||
Now to execute or use your singleton. in browser after saving this to js file and loading it.
|
console.log(singletonFn.getDataCounter()); // 0 by default
|
||||||
|
|
||||||
```
|
|
||||||
console.log(singletonFn.getDataCounter()); //0 as bydefault it will be 0.
|
|
||||||
|
|
||||||
singletonFn.setDataCounter(20);
|
singletonFn.setDataCounter(20);
|
||||||
|
|
||||||
console.log(singletonFn.getDataCounter()); //20 as we assigned.
|
console.log(singletonFn.getDataCounter()); // 20
|
||||||
|
|
||||||
console.log(fishNames); //will Print array with "SimpleFish".
|
console.log(singletonFn.fishNames); // ["SimpleFish"]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Here's another example of a singleton:
|
||||||
|
|
||||||
Now with this knowledge you can define constants, enums or anything that needs to use multiple in project written here. or something like configurations.
|
```
|
||||||
|
var Person;
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
let instance;
|
||||||
|
|
||||||
Hope, This will help you write better codes. Happy Coding :)
|
Person = function(fName, lName, job) {
|
||||||
|
// constructor
|
||||||
|
this.fName = fName || 'John';
|
||||||
|
this.lName = lName || 'Doe';
|
||||||
|
this.job = job || 'Software Engineer';
|
||||||
|
|
||||||
|
if (!instance) {
|
||||||
|
instance = this;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.getFullName = function () {
|
||||||
|
return this.fName + ' ' + this.lName;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.getJob = function () {
|
||||||
|
return this.job;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.print = function () {
|
||||||
|
console.log(this.getFullName() + ' ' + this.getJob());
|
||||||
|
}
|
||||||
|
|
||||||
|
return instance;
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
//initialize these "guys" but they point to the same object
|
||||||
|
var guy1 = new Person();
|
||||||
|
var guy2 = new Person();
|
||||||
|
|
||||||
|
// proof that they're the same instance
|
||||||
|
guy1.print(); // "John Doe Software Engineer"
|
||||||
|
guy2.print(); // "John Doe Software Engineer"
|
||||||
|
console.log(guy1 == guy2); //true
|
||||||
|
|
||||||
|
// modify guy2 and see that guy1 has changed as well
|
||||||
|
guy2.fName = 'Jane';
|
||||||
|
guy2.lName = 'Doo';
|
||||||
|
guy2.job = 'Project Manager';
|
||||||
|
guy1.print(); // "Jane Doo Project Manager"
|
||||||
|
guy2.print(); // "Jane Doo Project Manager"
|
||||||
|
```
|
||||||
|
|
Loading…
Reference in New Issue