javascript - 实现可设置模块作用域变量的最常见模式

Question

我正在编写一个客户端来与 JavaScript 中的服务器 API 进行对话。我有 OOP 背景，但正在尝试接受现代 EcmaScript。

所以我从这个开始:

customerApi.js:

const baseUrl = "http://myapi";
export const getCustomers = () => { /* get customer code */ }
export const addCustomer = cust => {}
export const deleteCustomer = id => {}

所有函数都使用baseUrl。

现在我想重构，以便使用 customerApi.js 的代码在 baseUrl 中设置/传递，而我想出的唯一方法是 -

将其设置为一个类:

export default class customerApi {
  constructor(baseUrl) {
   this._baseUrl  baseUrl;
  }
}

将其传递到每个方法中:

export const getCustomers = (baseUrl) => { /* get customer code */ }
export const addCustomer = (baseUrl,cust) => {}
export const deleteCustomer = (baseUrl,id) => {}

封装在函数中:

const moduleFn = baseUrl => (
  return {
    getCustomers: () => { /* get customer code */ }
    addCustomer: (cust) => {}
    deleteCustomer: (id) => {}
  }
)
export default moduleFn;

这些只是示例。在模块上实现“可设置”变量的最常见模式是什么？

Answer 1

我会采用函数方法

export default function(baseUrl){

  return Object.freeze({
    getCustomers: () => { /* get customer code */ }
    addCustomer: (cust) => {}
    deleteCustomer: (id) => {}
  })

}

这是因为所有函数都在 baseUrl 上闭包，不需要额外的工作。

客户端代码可以简单地

import yourmodule from 'yourmodule';
var derp = yourmodule('www.derp.com')