绑定＆＃34;这个＆＃34;在ES6中正确的方式

Question

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

有很多API，每种都有很多方法。

＆＃34; 目标是构建一个可以轻松访问每个API的中间件＆＃34;

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

middlewear.js

export default config => {
    const middleware = { config };
    return Object.assign(middleware , getFileApi(middleware), getDocumentApi(middleware) /*, ... */);
}

此文件将每个API组合在一起。

这个想法是这样称呼的：middleware.fileAPi.getFile(123)。

文件api.js

// getFileApi
export default middleware => ({
    getFile: getFile.bind(middleware),
    getFiles: getFiles.bind(middleware),
});

此文件返回对象，其中包含文件api 中的所有方法。

为了在这些功能中使用关键字 this ，我将每个关键字绑定到中间件。

  

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

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 -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( /* ... */ );

我使用封闭范围来传递配置。

好吧，我不是Javascript的专家，所以也许我错过了一个更干净的解决方案......

Answer 1

看起来封闭范围对你的情况会更好。

<强> getFile.js

dict = (from x in sites
        let pp1 = x.Split(',')
         where pp1.Length > 2
         let rnc = pp1[1].Replace("work=", "")
         let ems = pp1[2].Replace("Context=", "")
         let pp2 = GetName(ems, "CC", "U").Split('_')
         where pp2.Length > 1 && !ems.Contains("_L_")
         select new
         {
             name_ms = ems,
             Key = ems + "," + rnc,
             Value = Getidname(GetName(ems, "CC", "U"),
             GetCode(pp2[1])) + "," + ems.Split('_')[1]
         })
        .ToDictionary(x => x.Key, x => x.Value);

文件-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