编写一致的符合习惯的javascript

2022-11-03 11:22:58

本文转自我司的编码规范~

====

引言

将要叙述的这些原则旨对javascript开发的风格做指导，并非指定性的规则需绝对服从。如果需要找出一条必须遵循的原则，应该是保持代码的一致性和风格统一。

除去对代码的可读性、可维护性有益外，同时可以减少很多代码提交解决冲突合并时产生的不必要的麻烦。

代码风格

空格

不要混用tab 和空格.
在开始项目编码之前制定缩进规则，使用空格缩进还是tab缩进，并且严格贯彻下去。
- 建议统一使用空格缩进（2spaces），使用编辑器的设置tab键为空格空进以强制执行。
如果你的编辑器支持设置“显示隐藏字符”的话，建议打开它。好处在于：
- 强制代码格式统一
- 去除行尾空字符
- 去除空行空字符Eliminating blank line whitespace
- 代码提交比较差异时更方便阅读

Syntax美化

Syntax美化包括空格的规则、换行的规则，以及其他语法层面上的书写格式，以方便阅读为准。可以使用编辑器的格式化插件来达到格式美化的目的，项目开发人员需要统一插件格式的规则，以避免提交代码时格式不统一而产生的不必要的麻烦。

[插件https://github.com/akalongman/sublimetext-codeformatter|SublimeText Code Formatter](https://github.com/akalongman/sublimetext-codeformatter|SublimeText Code Formatter)

语言规则

变量

声明变量时应该使用var。不这样做会得到全局变量，从而污染了全局命名空间。
使用一个 var 以及新行声明多个变量，缩进4个空格
最后再声明未赋值的变量，当以后你想给一个依赖之前已赋值变量的变量时很有用。
不一定严格按照只是用一个var声明变量的规则，可以按照变量的相关性分组声明。

     var items = getItems(),

         goSportsTeam = true,

         dragonball,

         length,

         i;

在作用域顶部声明变量，避免变量声明和赋值引起的相关问题。

     // bad

function() {

  test();

  console.log('doing stuff..');

  //..other stuff..

  var name = getName();

  if (name === 'test') {

    return false;

  }

  return name;

}

// good

function() {

  var name = getName();

  test();

  console.log('doing stuff..');

  //..other stuff..

  if (name === 'test') {

    return false;

  }

  return name;

}

// bad

function() {

  var name = getName();

  if (!arguments.length) {

    return false;

  }

  return true;

}

// good

function() {

  if (!arguments.length) {

    return false;

  }

  var name = getName();

  return true;

}

函数

不要在块内定义functions。

//Do not do this:

if (x) {

  function foo() {}

}

//Do this

var foo;

if(x) {

  foo = function(){};

}

函数表达式:

// 匿名函数表达式

var anonymous = function() {

  return true;

};

// 有名函数表达式

var named = function named() {

  return true;

};

// 立即调用函数表达式

(function() {

  console.log('Welcome to the Internet. Please follow me.');

})();

绝对不要把参数命名为 arguments, 这将会逾越函数作用域内传过来的 arguments 对象.

// bad

function nope(name, options, arguments) {

  // ...stuff...

}

// good

function yup(name, options, args) {

  // ...stuff...

}

字符串

对字符串使用单引号 '

// bad

var name = "Bob Parr";

// good

var name = 'Bob Parr';

// bad

var fullName = "Bob " + this.lastName;

// good

var fullName = 'Bob ' + this.lastName;

超过80个字符的字符串应该使用字符串连接换行
果过度使用，长字符串连接可能会对性能有影响.

// bad

var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

// bad

var errorMessage = 'This is a super long error that \

was thrown because of Batman. \

When you stop to think about \

how Batman had anything to do \

with this, you would get nowhere \

fast.';

// good

var errorMessage = 'This is a super long error that ' +

  'was thrown because of Batman.' +

  'When you stop to think about ' +

  'how Batman had anything to do ' +

  'with this, you would get nowhere ' +

  'fast.';

逗号

不要将逗号放前面

// bad

var once

  , upon

  , aTime;

// good

var once,

    upon,

    aTime;

// bad

var hero = {

    firstName: 'Bob'

  , lastName: 'Parr'

  , heroName: 'Mr. Incredible'

  , superPower: 'strength'

};

// good

var hero = {

  firstName: 'Bob',

  lastName: 'Parr',

  heroName: 'Mr. Incredible',

  superPower: 'strength'

};

不要加多余的逗号

// bad

var hero = {

  firstName: 'Kevin',

  lastName: 'Flynn',

};

var heroes = [

  'Batman',

  'Superman',

];

// good

var hero = {

  firstName: 'Kevin',

  lastName: 'Flynn'

};

var heroes = [

  'Batman',

  'Superman'

];

分号

语句结束一定要加分号

// bad

(function() {

  var name = 'Skywalker'

  return name

})()

// good

(function() {

  var name = 'Skywalker';

  return name;

})();

// good

;(function() {

  var name = 'Skywalker';

  return name;

})();

类型转换

在语句的开始执行类型转换.
字符串:

//  => this.reviewScore = 9;

// bad

var totalScore = this.reviewScore + '';

// good

var totalScore = '' + this.reviewScore;

对数字使用 parseInt 并且总是带上类型转换的基数.

var inputValue = '4';

// bad

var val = new Number(inputValue);

// bad

var val = +inputValue;

// bad

var val = inputValue >> 0;

// bad

var val = parseInt(inputValue);

// good

var val = Number(inputValue);

// good

var val = parseInt(inputValue, 10);

// with caution

/**

 * parseInt was the reason my code was slow.

 * Bitshifting the String to coerce it to a

 * Number made it a lot faster. But it reduces the readability.

 */

var val = inputValue >> 0;

相等性

优先选择严格的 “ === ” 做相等性判断，但是当检查是否是undefined 或者 null时，可以使用“ == ”。

命名规则

避免单个字符名，让你的变量名有描述意义。变量一般用名词，函数一般使用动词，若函数返回boolean则可以用is或者has开头。常量使用全大写以下划线链接。

//good

var PI = 3.1415926;

// bad

function q() {

  // ...stuff...

}

// good

function query() {

  // ..stuff..

}

当命名对象、函数和实例时使用驼峰命名规则

// bad

var OBJEcttsssss = {};

var this_is_my_object = {};

var this-is-my-object = {};

function c() {};

var u = new user({

  name: 'Bob Parr'

});

// good

var thisIsMyObject = {};

function thisIsMyFunction() {};

var user = new User({

  name: 'Bob Parr'

});

当命名构造函数或类时使用驼峰式大写

// bad

function user(options) {

  this.name = options.name;

}

var bad = new user({

  name: 'nope'

});

// good

function User(options) {

  this.name = options.name;

}

var good = new User({

  name: 'yup'

});

命名私有属性时前面加个下划线

// bad

this.__firstName__ = 'Panda';

this.firstName_ = 'Panda';

// good

this._firstName = 'Panda';

当保存对 this 的引用时使用 _this

// bad

function() {

  var self = this;

  return function() {

    console.log(self);

  };

}

// bad

function() {

  var that = this;

  return function() {

    console.log(that);

  };

}

// good

function() {

  var _this = this;

  return function() {

    console.log(_this);

  };

}

其他

Prefer this.foo = null than delete this.foo
小心使用switch语句
不要轻易扩展修改builtin类型的行为
谨慎使用保留字作为object属性名(已经吃过亏了)
避免使用with

码农公寓

编写一致的符合习惯的javascript

引言

代码风格

空格

Syntax美化

语言规则

变量

函数

字符串

逗号

分号

类型转换

相等性

命名规则

其他

参考资料

码农公寓

引言

代码风格

空格

Syntax美化

语言规则

变量

函数

字符串

逗号

分号

类型转换

相等性

命名规则

其他

参考资料

相关文章