关于 javascript 的编程风格

2015-04-16 09:45:19 +08:00
 whatisnew
// 没空格
if(){
// 遇到花括号空1格
if() {
// if 直接空1格
if (){
// 都空1格
if () {
// 条件空1格,花括号换行
if ()
{

// 以上同样的问题也空在于 function 和 obj 上面
// 方法
function(){
function (){
function() {
function()
{

// 对象
var obj{
var obj {
var obj
{
2217 次点击
所在节点    JavaScript
5 条回复
binjoo
2015-04-16 09:47:41 +08:00
萝卜白菜,各有所爱。
你看着舒服,说不定别人看到就觉得你很奇葩。。
shyangs
2015-04-16 09:50:53 +08:00
要引发大战了。顺便不写分号,前置逗号也拉进来讲。
whatisnew
2015-04-16 09:51:30 +08:00
1. 缩进空格问题,像 tbs 这种流行框架什么的推荐是 2 格,但是看到多数人用 4 格。
那么现在问题来了,到底是空2格还是4格。。。

2. 括号和花括号
```javascript
// 没空格
if(){
// 遇到花括号空1格
if() {
// if 直接空1格
if (){
// 都空1格
if () {
// 条件空1格,花括号换行
if ()
{

// 以上同样的问题也空在于 function 和 obj 上面
// 方法
function(){
function (){
function() {
function()
{

// 对象
var obj{
var obj {
var obj
{
```

换行问题有大神说过Javascript会自动添加句末的分号,导致一些难以察觉的错误,
但是我觉得就算花括号不换行,但是在实际在文件中换行的地方多了去了,所以这个自动添加句末的分号的问题不应该成为一个编程风格的理由。

按常见风格
```javascript
define(["../jquery",], function( jQuery ) {

var rclass = /[\t\r\n\f]/g;

jQuery.fn.extend({

addSomeClass: function( value ) {

if ( proceed ) {
classes = ( value || "" ).match( rnotwhite ) || [];

for ( ; i < len; i++ ) {
elem = this[ i ];
cur = elem.nodeType === 1 && ( elem.className ?
( " " + elem.className + " " ).replace( rclass, " " ) :
" "
);

if ( cur ) {
j = 0;
while ( (clazz = classes[j++]) ) {
if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
cur += clazz + " ";
}
}

finalValue = jQuery.trim( cur );
if ( elem.className !== finalValue ) {
elem.className = finalValue;
}
}
}
}

return this;
}
});

});
```
上面这种风格,难道没有人觉得代码块block很难理解吗?

那么这样呢:
```javascript
define(["../jquery",], function( jQuery )
{
var rclass = /[\t\r\n\f]/g;

jQuery.fn.extend(
{
addSomeClass: function( value )
{
if ( proceed )
{
classes = ( value || "" ).match( rnotwhite ) || [];

for ( ; i < len; i++ )
{
elem = this[ i ];
cur = elem.nodeType === 1 && ( elem.className ?
( " " + elem.className + " " ).replace( rclass, " " ) :
" "
);

if ( cur )
{
j = 0;
while ( (clazz = classes[j++]) )
{
// 当条件只有一行的时候省略 {} 花括号
if ( cur.indexOf( " " + clazz + " " ) < 0 ) cur += clazz + " ";
}

finalValue = jQuery.trim( cur );
if ( elem.className !== finalValue )
{
elem.className = finalValue;
}
}
}
}

return this;
}
});

});
```
花括号换行之后,是不是直观了很多呢?更容易看清楚了呢?
如果换成2个空格,那个花括号换行在js里就更好看了:
```javascript
define(["../jquery",], function( jQuery )
{
var rclass = /[\t\r\n\f]/g;

jQuery.fn.extend(
{
addSomeClass: function( value )
{
if ( proceed )
{
classes = ( value || "" ).match( rnotwhite ) || [];

for ( ; i < len; i++ )
{
if ( cur )
{
j = 0;
while ( (clazz = classes[j++]) )
{
// 当条件只有一行的时候省略 {} 花括号
if ( cur.indexOf( " " + clazz + " " ) < 0 ) cur += clazz + " ";
}

finalValue = jQuery.trim( cur );
if ( elem.className !== finalValue )
{
elem.className = finalValue;
}
}
}
}

return this;
}
});

});
```
是不是更加直观,容易看清楚了呢?

所以,我不理解了,为什么大家常见都说2个空格,又写成4个空格,不换行,特别是2个空格的花括号不换行,难道看着成篇成篇的代码不难受吗?

此文仅用于个人偏好讨论用。没有任何别的什么意思。
whatisnew
2015-04-16 09:57:28 +08:00
天啊,不让我修改了,v2ex 的 markdown 语法分析器真是。。。服了
whatisnew
2015-04-16 09:59:49 +08:00
好吧,顺着 v2ex 的 markdown 语法分析器,重新写了一个: https://www.v2ex.com/t/184051

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/184047

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX