18

TL / DR：使用带下划线的命名约定服务器端（RoR）和camelCased命名约定客户端（JS）的好方法是什么

像 Ruby on Rails 这样的服务器端编程环境使用下划线变量。按照惯例，JavaScript 使用 camelCased 变量。当从客户端向服务器发送数据时，这是有问题的。

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

有没有人想出一个优雅的方式来处理这个问题？这里有一些选项，没有一个特别好：

  1. 从服务器获取数据时将数据转换为 camelCase。
  2. 从服务器发送时使用 camelCase
  3. 在您的 Javascript 中使用带下划线的命名约定（尽管您与任何第三方库（如 jQuery）不一致）
  4. 在后端使用 camelCased 命名约定（尽管您与后端的约定不一致）

我倾向于#3，并在我的 JavaScript 中使用下划线。不过，当我使用 camelCased 第三方库时，它看起来会很奇怪。

4

2 回答 2

7

我相信 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" }

我应该补充一点，它没有经过大量测试，但欢迎贡献！

于 2012-09-03T21:48:25.993 回答
6

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

这是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 的更长示例的要点。

于 2017-11-07T23:53:39.560 回答