Как реализовать шаблон проектирования фабрики в JavaScript? Нужна помощь в чистом кодировании в JavaScript

#javascript #design-patterns

#javascript #шаблоны проектирования

Вопрос:

Я создаю приложение на Javascript. Приложение будет использовать любую из услуг, предоставляемых различными компаниями. Возможно, нам потребуется изменить сервисы. Поскольку я изучаю шаблон проектирования, кажется, что если я использую шаблон проектирования фабрики, это может помочь мне в долгосрочной перспективе. Возможно, я ошибаюсь. Я буду признателен за ваше предложение, если у вас есть альтернативная идея.

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

Каждый из классов службы scraper имеет два метода — doSearch() и getData(). Как я должен разрабатывать их, чтобы сделать код лучше, а не включать их в каждый класс?

appleService.js

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

organgeService.js

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

manualScraper.js

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

Ответ №1:

Мне интересна эта тема, поэтому я пытаюсь что-то сказать здесь, посмотреть, может ли это помочь.

В коде у вас есть три службы с одинаковыми функциями, я чувствую, что внутри них может быть отдельный контент, скажем, doSearch(keyword){} поиск с указанным url for AppleScraperService и so, как и другие.

Я мог бы спроектировать, чтобы иметь url собственность вне пределов doSearch(keyword){} , так как getData(resultId){} . Возвращаемые данные могут отличаться от URL-адресов, что обеспечивает обратный вызов для их обработки.

Затем у нас есть базовый скребковый сервис.

 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);
    };
}
 

Здесь я выбираю создать другой скребок с функциями внутри Scrap-сервиса.

 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;
    };
}
 

И ScraperServiceFactory(){...} становится

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

Есть еще много разных подходов к изучению шаблона фабрики, я надеюсь, что это может дать вам некоторое вдохновение.