Front‑End API Management Strategies Using Mapping Tables and Export Patterns

In this article the author, a front‑end beginner, shares a practical solution for managing numerous CRUD APIs in a backend‑heavy project. By leveraging functional programming ideas, the author builds a more maintainable and readable API layer.

Current project API management scheme

// encapsulated interfaces
export function obj1Func1() {}
export function obj1Func2() {}
export function obj2Func3() {}
export function obj2Func4() {}

// import style
import { obj1Func1, obj1Func2, obj2Func3, obj2Func4 } from 'xxx'

// usage
const params = {...}
await obj1Func1(params)

When the number of interfaces grows, searching for a specific API becomes tedious because developers have to scroll through many functions and comments.

Unified export style

// encapsulated interfaces
function obj1Func1() {}
function obj1Func2() {}
function obj2Func3() {}
function obj2Func4() {}

// export object
export { 
    obj1Func1, // comment
    obj1Func2, // comment
    obj2Func3, // comment
    obj2Func4, // comment
    ...
}

// import style
import { obj1Func1, obj1Func2, obj2Func3, obj2Func4 } from 'xxx'

// usage
const params = {...}
await obj1Func1(params)

This method allows developers to locate functions by searching for the export keyword, but they still need to scroll to the bottom of the file.

Object‑oriented approach

// module/objApi.js
function objFunc1() {}
function objFunc2() {}
function objFunc3() {}
function objFunc4() {}

export default {
    get: objFunc1, // comment
    upd: objFunc2, // comment
    del: objFunc3, // comment
    add: objFunc4, // comment
    ...
}

// import style
import objApi from 'module/objApi.js'

// usage
const params = {...}
await objApi.get(params)
await objApi.upd(params)

Advantages: object‑oriented calls avoid importing each function individually and shorten operation names (e.g., upd for update ). Drawbacks include the proliferation of files when many objects exist and the need to import each module separately.

Module‑object mapping table

// api mapping table
const apiMap = {
    // common APIs
    common: { commonFun1, commonFun2 },
    // object 1
    dog: {
        // CRUD
        add: obj1Func1,
        get: obj1Func2,
    },
    // object 2
    cat: {
        upd: obj2Func3,
        del: obj2Func4,
    },
    ...
}

The apiMap acts as a directory, making the file’s top section a clear overview of all available endpoints.

Export method 1 – direct object export

export default {
    commonApi: apiMap['common'],
    dogApi:    apiMap['dog'],
    catApi:    apiMap['cat'],
}

import { commonApi, ... } from "xxx"

This treats each object as a separate API namespace while keeping everything in a single file.

Export method 2 – accessor function

// expose a function that returns the desired API
export default function api(obj, action) {
    if (action) {
        // return a specific operation, e.g., dog.update
        return apiMap[obj][action]
    }
    // return the whole object (all operations) or common APIs
    return apiMap[obj]
}

// usage example 1
import API from 'xxx'
const params = {...}
await API('dog', 'get')(params)
await API('dog', 'upd')(params)
await API('dog', 'del')(params)

// usage example 2
const dogAPI = API('dog')
await dogAPI.get(params)
await dogAPI.upd(params)

The accessor function centralizes API handling, reduces repetitive imports, and makes it easy to add cross‑cutting concerns such as throttling for get operations.

Maintainability and readability

Placing the apiMap at the top of the file provides an instant overview of all objects and their actions, eliminating the need to scroll through unrelated code. The author reports that, in a module with ten objects and a hundred functions, the worst‑case search drops from 100 lines to roughly 20 lines.

Development experience

After integrating the approach into a real project, the author notes a smoother development workflow: developers copy the relevant entry from the mapping table, adjust the action name, and call the API without hunting through the file. The method improves both efficiency and mental load, especially for newcomers.

Conclusion

The author thanks readers for their attention and encourages feedback, emphasizing that the presented pattern, while simple, significantly enhances API maintainability and readability in front‑end projects.