Module pattern
1) Module pattern is nothing but just to encapsulate a group of methods...
2) A module pattern is mostly like a service...DB calls or service for the http calls
3) Basically just like Object literal,just collections of keys and functions...Or in ES6 it has to be separate class which will fetch data from database...
var module ={ method1: function(){ }, method2:function(){} }
4) Now this code has to be converted to module pattern
2) A module pattern is mostly like a service...DB calls or service for the http calls
3) Basically just like Object literal,just collections of keys and functions...Or in ES6 it has to be separate class which will fetch data from database...
var module ={ method1: function(){ }, method2:function(){} }
4) Now this code has to be converted to module pattern
let Study = function (course, level) {
this.course = course;
this.level = level;
};
Study.prototype.courseLevel = function () {
console.log(this.course + " is for " + this.level);
};
Study.prototype.enquiry = function () {
console.log("I just want to have enquiry. I am yet to think of enrolling...");
};
let study1 = new Study("Javascript", "Beginners");
let study2 = new Study("Advanced Javascript", "Professionals");
let study3 = new Study("ES new concepts", "Proficients");
let study4 = new Study("Typescript", "Beginners");
study1.courseLevel();
study2.courseLevel();
study3.courseLevel();
study4.enquiry();
//Output
// Javascript is for Beginners
// Advanced Javascript is for Professionals
// ES new concepts is for Proficient
Module pattern implementation
1)Separate Service class is created that will do our DB stuff to fetch data or save data. Service class is exported so that it can be imported in other module..
2)Existing Study class is modified
3)we import service. Constructor is changed to take json data(course and level)
4) we call our dbService to getCourses and Save data ..
5) I changed Enquiry method to save method for better understanding..
6) We are no more passing hardcoded data while creating new Study, rather it fetches from service...
7) Just hardcoded data in service. And just doing getCourses()[0] , getCourses()[1] for quick code. I haven't used DB to fetch data ..Idea is just to implement the module pattern..
2)Existing Study class is modified
3)we import service. Constructor is changed to take json data(course and level)
4) we call our dbService to getCourses and Save data ..
5) I changed Enquiry method to save method for better understanding..
6) We are no more passing hardcoded data while creating new Study, rather it fetches from service...
7) Just hardcoded data in service. And just doing getCourses()[0] , getCourses()[1] for quick code. I haven't used DB to fetch data ..Idea is just to implement the module pattern..
class service {
getCourses = (id) => {
return [
{
course: "Javascript",
level: "Beginners",
},
{
course: "Typescript",
level: "Advanced",
},
{
course: "React",
level: "Advanced",
},
];
};
save = (data) => {
console.log(data + "--saving to DB");
};
}
export default service;
//*..Module Pattern.. */
import service from "./service.js";
var dbService = new service();
class Study {
constructor(data) {
this.course = data.course;
this.level = data.level;
}
courseLevel = function () {
console.log(this.course + " is for " + this.level);
};
save = function () {
dbService.save(this.course + " is for " + this.level);
};
}
let study1 = new Study(dbService.getCourses()[0]);
console.log(study1);
study1.courseLevel();
study1.save();
let study2 = new Study(dbService.getCourses()[1]);
console.log(study2);
study2.courseLevel();
study2.save();
//Output
// Javascript is for Beginners
// Javascript is for Beginners--saving to DB
// Typescript is for Advanced
// Typescript is for Advanced--saving to DB