How to implement Factory Design Pattern in JavaScript ? Need help in clean codign in JavaScript

Question

I am creating an app in Javascript. The app will use either of the services provided by various companies. We may need to change the services. As I am learning design pattern it seems If I use factory design pattern, it might help me in the long run. I might be wrong. I will appreciate your suggestion if you have an alternative idea.

ScraperServiceFactory (){
  createScraper(type) {
      switch (type) {
       case "organe" : 
          return new OrangeScraper()
       case "apple" : 
          return new AppleScraper()
       default: 
          return new MannualScraper() 
     }
  }
}

Each of the scraper Service classes has two methods - doSearch() and getData(). How should I design them to make the code better rather than include them in each of the class?

appleService.js

 class AppleSraperService {
   doSearch(keyword) {}
   getData(resultId){}
 }

organgeService.js

 class OrangeSraper{
   doSearch(keyword) {}
   getData(resultId){}
 }

manualScraper.js

 class ManualSraper{
   doSearch(keyword) {}
   getData(resultId){}
 }

Answer 1

I am interested in this topic, so I try to say something here, see if can help.

In the code you have three Services with the same functions, I feel they might have individual content inside, Say, doSearch(keyword){} search with a specified url for AppleScraperService and so as others.

I might design to have the url property out side of the doSearch(keyword){} , so as getData(resultId){} . The returning data may vary from the urls, providing a callback to deal with it.

Then we have the basic ScraperService.

class ScraperService {
    ScraperService() {
        this.doSearch_url="";
        this.getData_url = "";
        
        this.doSearch_callback = null;
        this.getData_callback = null;
    }
    
    doSearch(keyword) {
        // pseudo code here
        //var result = POST(doSearch_url, keyword);
        //return doSearch_callback(result);
    };
    getData(resultId) {
        // pseudo code here
        //var result = POST(getData_url, resultId);
        //return getData_callback(result);
    };
}

Here I choose to create different scraper with functions within the ScraperService.

class ScraperService {
    ScraperService() {
        this.doSearch_url="";
        this.getData_url = "";
        
        this.doSearch_callback = null;
        this.getData_callback = null;
    }
    
    doSearch(keyword) {
        // pseudo code here
        //var result = POST(doSearch_url, keyword);
        //return doSearch_callback(result);
    };
    getData(resultId) {
        // pseudo code here
        //var result = POST(getData_url, resultId);
        //return getData_callback(result);
    };
    
    AppleScraper = function() {
        this.doSearch_url = "https://Apple.Scraper.Service/doSearch";
        this.getData_url  = "https://Apple.Scraper.Service/getData";
        
        this.doSearch_callback = function(data){ return data.apple; };
        this.getData_callback  = function(data){ return data.apple; };
        return this;
    };
    OrangeScraper = function() {
        this.doSearch_url = "https://Orange.Scraper/doSearch";
        this.getData_url  = "https://Orange.Scraper/getData";
        
        this.doSearch_callback = function(data){ return data.orange; };
        this.getData_callback  = function(data){ return data.orange; };
        return this;
    };
    ManualScraper = function() {
        this.doSearch_url = "https://Manual.Scraper/doSearch";
        this.getData_url  = "https://Manual.Scraper/getData";
        
        this.doSearch_callback = function(data){ return data.manual; };
        this.getData_callback  = function(data){ return data.manual; };
        return this;
    };
}

And the ScraperServiceFactory(){...} becomes

ScraperServiceFactory (){
  createScraper(type) {
      switch (type) {
       case "organe" : 
          return new ScraperService().OrangeScraper();
       case "apple" : 
          return new ScraperService().AppleScraper();
       default: 
          return new ScraperService().ManualScraper();
     }
  }
}

There are still many different approach for factory pattern to explore, I hope this can give you some inspiration.