一个空格引来的bug

字符串中慎用空格

在程序中，我们通常会使用空格将代码呈现的更加易读。比如我们通常在使用空格将数字和操作符隔开 var a = 1 + 1;

但是空格不能乱用。比如，我一不小心多打了个空格。就造成了一个bug。

    var postId = ' <%= id %> ';
    var vm = new Vue({
        el: '#app',
        data: {
            title: '',
            content: ''
        },
        created() {
            axios.get('/api/v1/posts/' + postId)
                .then(function (response) {
                    if (response.status !== 200) {
                        throw new Error('error!');
                    }
                    return response.data;
                })
                .then(function (data) {
                    vm.title = data.post.title;
                    vm.content = data.post.content;
                })
                .catch(function (err) {
                    alert(err.message);
                })
        },
        methods: {
            submit() {
                axios.patch('/api/v1/posts/' + postId,
                    {
                        title: vm.title,
                        content: vm.content
                    })
                    .then(function (response) {
                        if (response.status !== 200) {
                            throw new Error('error!');
                        }

                        return response.data;
                    })
                    .then(function (data) {
                        window.location = '/posts/show?id=' + postId;
                    })
                    .catch(function (err) {
                        alert(err);
                    })
            }
        }
    });

错误就是第一行取id值时，在两个尖括号的外面各加了一个空格。

打印时一个空白根本看不出什么来，但是在发送请求时，这个空白就被转义，在服务器接收时，无法正常解析这个参数。

所以，注意一点 在字符串中慎用空格。

根据ejs的规则在<>内有空格没事，在执行时，<>内的计算结果会取代这个 <> 所以姑且把它理解成一对尖括号表达式吧。

既然提到了空格，就顺便补充下在js中，空格的使用规范。来源:Airbnb JavaScript Style Guide

空白使用规范

使用两个空格作为缩进
在大括号前放空格
在控制语句的小括号前放空格
使用运算符隔开空格
在文件末尾插入空格
链式调用时，使用前面的点 . 强调这是方法调用而不是新语句
在块末和新语句前插入空行。

1.使用 2 个空格作为缩进。

// bad
function () {
∙∙∙∙var name;
}

// bad
function () {
∙var name;
}

// good
function () {
∙∙var name;
}

2.在大括号前放一个空格。

// bad
function test(){
  console.log('test');
}

// good
function test() {
  console.log('test');
}

// bad
dog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog'
});

// good
dog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog'
});

3.在控制语句（if、while 等）的小括号前放一个空格。在函数调用及声明中，不在函数的参数列表前加空格。

// bad
if(isJedi) {
  fight ();
}

// good
if (isJedi) {
  fight();
}

// bad
function fight () {
  console.log ('Swooosh!');
}

// good
function fight() {
  console.log('Swooosh!');
}

4.使用空格把运算符隔开。

// bad
var x=y+5;

// good
var x = y + 5;

5.在文件末尾插入一个空行。

// bad
(function (global) {
  // ...stuff...
})(this);
// bad
(function (global) {
  // ...stuff...
})(this);↵
↵
// good
(function (global) {
  // ...stuff...
})(this);↵

6.在使用长方法链时进行缩进。使用前面的点 . 强调这是方法调用而不是新语句。

// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();

// bad
$('#items').
  find('.selected').
    highlight().
    end().
  find('.open').
    updateCount();

// good
$('#items')
  .find('.selected')
    .highlight()
    .end()
  .find('.open')
    .updateCount();

// bad
var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
    .attr('width', (radius + margin) * 2).append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

// good
var leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .classed('led', true)
    .attr('width', (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

7.在块末和新语句前插入空行。

// bad
if (foo) {
  return bar;
}
return baz;

// good
if (foo) {
  return bar;
}

return baz;

// bad
var obj = {
  foo: function () {
  },
  bar: function () {
  }
};
return obj;

// good
var obj = {
  foo: function () {
  },

  bar: function () {
  }
};

return obj;

最后编辑于：2017.11.24 01:28:29