Question

TL / DR：使用强调命名约定服务器端（RoR）和基于camelCased命名约定clientide（JS）

的好方法

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

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

有没有人想出一个优雅的方式来解决这个问题？以下是一些选项，没有一个特别好：

从服务器获取时将数据转换为camelCase。
从服务器发送时使用camelCase
在您的Javascript中使用强调的命名约定（尽管那时您与任何第三方库（如jQuery）都不一致）
在您的后端使用基于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 interceptors

的一个很好的用例

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

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的较长示例的gist。

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

2 个答案: