在ES6中正确绑定"this“
在ES6中正确绑定"this“
提问于 2018-05-29 04:54:35
我的团队正在构建一个React应用程序，我们需要一个javascript中间件/模块来管理对我们(C#) API的调用。
有很多API，每个API都有很多方法。
“我们的目标是构建一个能够轻松访问每个API的中间件”
为了避免编写包含所有不同API和方法的大型javascript文件，我决定将代码拆分到不同的文件中。
middlewear.js
export default config => {
const middleware = { config };
return Object.assign(middleware , getFileApi(middleware), getDocumentApi(middleware) /*, ... */);
}此文件将每个API组合在一起。
我们的想法是这样命名它：middleware.fileAPi.getFile(123)。
file-api.js
// getFileApi
export default middleware => ({
getFile: getFile.bind(middleware),
getFiles: getFiles.bind(middleware),
});该文件返回一个对象，其中包含来自File api的所有方法。
为了在这些函数中使用关键字，我将它们分别绑定到中间件。
我需要使用中间件根目录下的配置。
getFile.js
export default async function(model) {
// I need to use the `config` from "api.js" in here.
let someCode = this.config.baseUrl + someOtherCode;
}此指的是中间件。这样，我就可以访问传递给中间件的所有属性。
问题
- 我想以一种更聪明的方式重写上面的代码。
- 我不想像那样把每个函数绑定到中间件代码，如果可能的话，我希望它更透明。
- 我有相当多更小的api<>E233>-s。它看起来像这样:
export default config => {
const api = { config };
return
Object.assign(
api,
getFileApi(api));
getDocumentApi(api));
getAudioApi(api));
getSomeApi(api));
getSomeOtherApi(api));
getYetAnotherApi(api));
getWoohooApi(api));
}谢谢!
编辑
我找到了一种方法来解决一些问题，但我不知道它是否是最优的。
// Middleware
// ================================================
export default {
getFileApi: appConfig => getFileApi(buildConnect(appConfig))
};
// getFileApi
// ================================================
export default (connect) => ({
getFile: connect(getFile)
getFiles: connect(getFiles)
});
// getFile
// ================================================
export default (config) => async (data) => {
const url = config.url;
// return await ...;
}
// buildConnect
// ================================================
export default (appConfig) => {
const initalConfig = { /* ... */ };
const config = Object.assign({}, initalConfig, appConfig);
return function(func) {
return params => func(config)(params)
}
}
// Usage (in react app)
// ================================================
import middleware from "...";
import appConfig from "...";
// usage
middleware
.getFileApi(appConfig)
.getFile(123)
.then( /* ... */ )
.catch( /* ... */ );我使用closure-scope传递配置。
嗯，我不是Javascript的专家，所以也许我错过了一个更干净的解决方案……
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-29 05:18:43
看起来闭包作用域更适合你的情况。
getFile.js
export default function(api) {
return async (model) => {
const someCode = api.config.baseUrl + someOtherCode;
}
}文件-api.js
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
};
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50573313
复制相关文章
相似问题