Javascript “有约束力”；这"；ES6中的正确方法

我的团队正在构建React应用程序，我们需要一个javascript中间件/模块来管理对（C#）API的调用

有很多API，每个API都有很多方法

“目标是构建一个中间件，使每个API都可以轻松访问”

为了避免编写包含所有不同API和方法的大型javascript文件，我决定将代码拆分为不同的文件

---

middlewear.js

导出默认配置=>{
常量中间件={config}；
返回Object.assign（中间件，getFileApi（中间件），getDocumentApi（中间件）/*，…*/）；
}

该文件将每个API分组在一起

我们的想法是这样称呼它：

middleware.fileAPi.getFile（123）

---

file-api.js

//getFileApi
导出默认中间件=>({
getFile:getFile.bind（中间件），
getFiles:getFiles.bind（中间件），
});

此文件返回一个对象，该对象包含文件api中的所有方法

为了在这些函数中使用关键字this，我将它们分别绑定到中间件

我需要使用中间件根目录下的配置

---

getFile.js

导出默认异步函数（模型）{
//我需要在这里使用“api.js”中的'config'。
让someCode=this.config.baseUrl+someOtherCode；
}

此指的是中间件。这样，我就可以访问传递给中间件的所有属性

---

问题

• 我想用一种更聪明的方式重写上面的代码
• 我不希望像那样将每个函数绑定到中间件，如果可能的话，我希望它更加透明
• 我有很多更小的api。看起来是这样的：

导出默认配置=>{
常量api={config}；
返回
Object.assign(
应用程序编程接口，
getFileApi（api））；
(api),；
getAudioApi（api））；
getSomeApi（api））；
getSomeOtherApi（api））；
getYetAnotherApi（api））；
(api),；
}

谢谢

---

编辑 我找到了解决一些问题的方法，但我不知道它是否是最佳的

//中间件
// ================================================
导出默认值{
getFileApi:appConfig=>getFileApi（buildConnect（appConfig））
};
//getFileApi
// ================================================
导出默认值（连接）=>({
getFile:connect（getFile）
getFiles:connect（getFiles）
});
//获取文件
// ================================================
导出默认值（配置）=>async（数据）=>{
const url=config.url；
//返回等待。。。；
}
//buildConnect
// ================================================
导出默认值（appConfig）=>{
常量initalConfig={/*…*/}；
const config=Object.assign（{}，initalConfig，appConfig）；
返回函数（func）{
返回参数=>func（配置）（参数）
}
}
//用法（在react应用程序中）
// ================================================
从“…”导入中间件；
从“…”导入appConfig；
//用法
中间件
.getFileApi（appConfig）
.getFile（123）
.然后（/*…*/）
.捕获（/*…*/）；

我使用关闭范围来通过配置

---

嗯，我不是Javascript专家，所以可能我缺少了一个更干净的解决方案…

看来闭包范围更适合您的情况

getFile.js

export default function(api) {
    return async (model) => {
        const someCode = api.config.baseUrl + someOtherCode;
    }
}

export default api => ({
    getFile: getFile(api),
    getFiles: getFiles(api),
});

文件api.js

export default function(api) {
    return async (model) => {
        const someCode = api.config.baseUrl + someOtherCode;
    }
}

export default api => ({
    getFile: getFile(api),
    getFiles: getFiles(api),
});

请注意，

getFile

返回新函数，该函数访问

api

变量，而不是使用

bind

操作上下文

编辑：

我对您的最新示例进行了修改，看看是否有帮助

// Middleware 
// ================================================
const connectionConfig = buildConnectConfig(appConfig);
export const Middleware = {
  fileApi: appConfig => getFileApi(connectionConfig)
};

// getFileApi 
// ================================================
export const getFileApi = (config) => ({
    getFile: getFile(config)
    getFiles: getFiles(config)
});

// getFile 
// ================================================
export const getFile = (config) => async (data) => {
    const url = config.url;
    // return await ...;
}

// buildConnect
// ================================================
export const buildConnectConfig = (appConfig) => {
    const initalConfig = { /* ... */ };

    return { // or Object.assign({}, ...)
        ...initalConfig, 
        ...appConfig
    };
}

---

现在还不清楚为什么会有这么多API，它们是什么，问题并不能解释这一点，所以这可能是XY的问题。可以通过类继承合理地解决。为了避免在其中编写5k行代码，我决定将代码拆分为一些较小的文件——这不是破坏类的充分理由。如果设计良好，大型类没有什么错，但是如果需要，代码可以拆分为帮助函数，这就不需要那些仍然依赖于

这个
上下文的分离方法。我发现整个构造有点混乱，但是如果函数作为方法调用，则根本不需要调用
bind
。另外，我可能已经找到了一种使用helper函数的方法。我会很快把它寄出去@埃斯特斯，我想在课堂上使用作文。我发现这对我来说是一个很好的练习。我认为作文在这里不值得，因为这是一个课堂设计的案例。函数合成依赖于
这个
不是一个很好的方法。你仍然在做课程的工作，但不太一致。正如上面提到的，从上面的代码中不清楚为什么需要绑定
middleware.fileAPi.getFile（123）
-getFile在这样调用时自然会得到适当的
this
。不需要装订。我想案件已经结案了。嗨，皮奥特·勒万多夫斯基！团队习惯于编写繁重的面向对象代码，而this关键字让他们放心了，哈哈。但你是对的，在我的情况下，关闭范围是最好的。我已经更新了我的问题，并添加了我昨天写的东西。@Bird，在JavaScript类中使用
这个
很好，但在其他任何地方都很混乱。闭包范围是以更可预测的方式设计的。根据新的示例，您可以添加
中间件的最终用法吗？