Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Basic Factory Pattern in Javascript
<!-- Config service -->
<script>
function ConfigService() {
this.Settings = [];
this.Settings["PrimaryColour"] = '#BFFCC6';
this.Settings["SecondaryColour"] = '#6EB5FF';
}
</script>
<!-- Factory Service -->
<script>
function FactoryService() {
this.repoList = [
{name: 'ConfigService', source: ConfigService}
];
}
FactoryService.prototype.GetInstance = function(instanceName)
{
selectedRepo = this.repoList.find((element) => { return element.name == instanceName; });
return new selectedRepo.source();
}
Window["FactoryService"] = new FactoryService();
</script>
<!-- Full application -->
<html>
<script>
function ConfigService() {
this.Settings = [];
this.Settings["PrimaryColour"] = '#BFFCC6';
this.Settings["SecondaryColour"] = '#6EB5FF';
}
</script>
<script>
function FactoryService() {
this.repoList = [
{name: 'ConfigService', source: ConfigService}
];
}
FactoryService.prototype.GetInstance = function(instanceName)
{
selectedRepo = this.repoList.find((element) => { return element.name == instanceName; });
return new selectedRepo.source();
}
Window["FactoryService"] = new FactoryService();
</script>
<script>
function RenderApplication() {
// Create our new config service from our factory service
const config = Window["FactoryService"].GetInstance("ConfigService");
const title = document.createElement("H1");
const titleText = document.createTextNode("Basic Factory Pattern for Javascript");
// Set title colour using the config service
title.style.color = config.Settings["PrimaryColour"]
title.className = "centre";
title.appendChild(titleText);
document.body.appendChild(
title
);
// Set background colour using the config service
document.body.style.backgroundColor = config.Settings["SecondaryColour"];
}
window.onload = function() {
RenderApplication();
}
</script>
<style>
.centre {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
</body>
</html>
<!-- Application code -->
<html>
<script>
function RenderApplication() {
const title = document.createElement("H1");
const titleText = document.createTextNode("Basic Factory Pattern for Javascript");
title.className = "centre";
title.appendChild(titleText);
document.body.appendChild(
title
);
}
window.onload = function() {
RenderApplication();
}
</script>
<style>
.centre {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
</body>
</html>
<!-- Random config service -->
<script>
function RandomConfigService() {
this.Settings = [];
this.Settings["PrimaryColour"] = `#${Math.floor(Math.random()*16777215).toString(16)}`;
this.Settings["SecondaryColour"] = `#${Math.floor(Math.random()*16777215).toString(16)}`;
}
</script>
// Update our factory service to return a new RandomConfigService
<script>
function FactoryService() {
this.repoList = [
{name: 'ConfigService', source: RandomConfigService}
];
}
...
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment