Question

我正在制作一个使用Google地图库的应用程序。现在，我将来可能希望使用Leaflet库代替Google地图，因此我试图将大多数方法抽象为服务。服务必须保持某种状态非常重要，因为它需要保留例如google.maps.places.AutocompleteService的实例，如下所示。

为此，我正在尝试提供一些我的React组件可以使用的服务，同时尽可能松散地耦合。

我正在寻找一种最佳实践方法来在React中做到这一点。

interface MapService {
    predictPlaces: (query: string) => Observable<AutocompletePrediction[]>
}

let predictService: google.maps.places.AutocompleteService;

const predictPlaces = (query: string): Observable<AutocompletePrediction[]> => {
    if(!window.google) {
        return of([]);
    }
    if (!predictService) {
        predictService = new google.maps.places.AutocompleteService();
    }
    ...further implementation of this method...
}

export const mapService: MapService = {
    predictPlaces,
}

然后简单地在我的代码中导入并使用导出的mapService

import { mapService } from '../services/MapService';
mapService.predictPlaces(inputValue).subscribe(...)

这行得通，但是我想知道是否有更好的方法来实现Google层，将来可以轻松地换用Leaflet层？

我已经阅读了很多有关HOC的文章，并认为这也可以解决此问题，但是我不确定该模式将以何种方式改善上述简单服务。

感谢您的见解！

对服务进行React HOC vs ES6箭头功能

0 个答案: