与下划线后端同步时,转换为CamelCase以便在JavaScript中使用？

Question

TL/DR:使用强调命名约定服务器端(RoR)和基于camelCased命名约定clientide(JS)的好方法

像Ruby on Rails这样的服务器端编程环境使用了下划线变量.通常,JavaScript使用camelCased变量.将数据从客户端发送到服务器时,这会出现问题.

例如,考虑将用户信息发送到客户端.数据库中可能有一个名为num_times_ordered的属性,但在JavaScript中,您传统上希望将其称为numTimesOrdered.

有没有人想出一个优雅的方式处理这个？这里有一些选项,没有一个特别好:

1. 从服务器获取时将数据转换为camelCase.
2. 从服务器发送时使用camelCase
3. 在您的Javascript中使用强制命名约定(尽管那时您与任何第三方库(如jQuery)不一致)
4. 在你的后端使用基于camelCased的命名约定(尽管那时你的后端的约定不一致)

我倾向于#3,并在我的JavaScript中使用下划线.但是,当我使用基于camelCased的第三方库时,它看起来很奇怪.

Answer 1

我相信ember.js(通过Ember Data)采用方法#1:在提取时将强调的JSON转换为客户端的camelCase; 并在发回服务器之前执行相反的操作.

我一直在开发一个执行这些转换的小型库:https://github.com/domchristie/humps,允许您执行以下操作:

// GET
$.ajax({
  url: '/posts',
  dataType: 'json',
  success: function(data, status, xhr) {
    data = humps.camelizeKeys(data);
  }
});

// POST
$.ajax({
  type: 'POST',
  url: '/posts'
  dataType: 'json',
  data: humps.decamelizeKeys({
    title: "Foo",
    publishedAt: "2012-09-03T21:35:46.068Z"
  })
});
// Sends: { title: "Foo", published_at: "2012-09-03T21:35:46.068Z" }

我应该补充一点,它没有经过严格测试,但欢迎贡献!

Answer 2

将其恢复为更现代的方法。

这是axios 拦截器的一个很好的用例

基本上，定义一个客户端类并附加一个转换请求/响应数据的前/后拦截器。

export default class Client {
    get(url, data, successCB, catchCB) {
        return this._perform('get', url, data, successCB, catchCB);
    }

    post(url, data, successCB, catchCB) {
        return this._perform('post', url, data, successCB, catchCB);
    }

    _perform(method, url, data, successCB, catchCB) {
        // https://github.com/axios/axios#interceptors
        // Add a response interceptor
        axios.interceptors.response.use((response) => {
            response.data = toCamelCase(response.data);
            return response;
        }, (error) => {
            error.data = toCamelCase(error.data);
            return Promise.reject(error);
        });

        // Add a request interceptor
        axios.interceptors.request.use((config) => {
            config.data = toSnakeCase(config.data);
            return config;
        }, (error) => {
            return Promise.reject(error);
        });

        return axios({
            method: method,
            url: API_URL + url,
            data: data,
            headers: {
                'Content-Type': 'application/json',
            },
        }).then(successCB).catch(catchCB)
    }
}

这是一个使用 React/axios 的更长示例的要点。