字符串中慎用空格
在程序中，我们通常会使用空格将代码呈现的更加易读。比如我们通常在 使用空格将 数字和操作符 隔开 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;
