《javascript代码规范整理》 下

简介: 《javascript代码规范整理》

对象属性

###(1)访问对象属性

var luke = {
  jedi: true,
  age: 28
};
var isJedi = luke.jedi;//使用 . 访问对象的属性

当属性名放在一个变量中时,使用下标 [] 的形式访问属性

var luke = {
  jedi: true,
  age: 28
};
function getProp(prop) {
  return luke[prop];
}
var isJedi = getProp('jedi');

比较操作符

(1) 优先使用 === 和 !== 替换 == 和 !=

if条件判断语句,会遵循下面简单的规则,将表达式转换为布尔型的值:

  • Objects 等价于 true
  • Undefined 等价于 false
  • Null 等价于 false
  • Booleans 等价于 对应的布尔值
  • Numbers 如果是 0 或者 NaN 等价于 false,其他的等价于 true
  • Strings 除了空字符串 ‘’ 等价于 false,其他的等价于 true
if ([0]) {
  // true
  // Objects 等价于 true,数组也是对象
}

(2)短判断

// bad
if (name !== '') {
  // ...stuff...
}
// good
if (name) {
  // ...stuff...
}
// bad
if (collection.length > 0) {
  // ...stuff...
}
// good
if (collection.length) {
  // ...stuff...
}

代码块

(1)单行代码块

if (test) return false;

(2)if-else

如果使用多行的if、else语句,else 应该跟在前一个 if 代码块的 } 后面。

if (test) {
  thing1();
  thing2();
} else {
  thing3();
}

(3)for循环

var i,
    length = 100;
for ( i = 0; i < length; i++ ) {
  // 语句
}
var prop;
for ( prop in object ) {
  // 语句
}

(4)代码块之间

在每个代码块后面保留一个空行,然后再写后面的语句。

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

注释

(1)多行注释

/** … */注释内容包括描述,所有参数、返回值的具体类型和值.

sublime 下载 DocBlockr插件,帮助你创造你的代码注释

/**
 * make() returns a new element
 * based on the passed in tag name
 *
 * @param {String} tag
 * @return {Element} element
 */
 function make(tag) {
  // ...stuff...
  return element;
}

(2)单行注释

使用 javascript// 进行单行注释。注释时,在需要注释的语句上面新起一行,并在注释的上面保留一行空行。

// good
// is current tab
var active = true;
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  var type = this._type || 'no type';
  return type;
}

(3)FIXME和TODO前缀

使用前缀 FIXME 和 TODO 标注注释,方便开发人员快速理解需要解决的问题,或着提出解决的建议。

// 使用 FIXME 标注一个问题
function Calculator() {
  // FIXME: shouldn't use a global here
  total = 0;
  return this;
}
// 使用 TODO 标注问题的解决方案
function Calculator() {
  // TODO: total should be configurable by an options param
  this.total = 0;
  return this;
}

空格与Tab

(1)永远都不要混用空格和Tab;

(2)编辑中设置两个空格代替Tab;

(3)在 { 前放着一个空格;

(4)在 if 、while等语句的 ( 前放置一个空格。

(5)用空格将操作符隔开

var x = y + 5;

分号

需要在每个语句结束的时候都添加分号。

(function() {
  var name = 'Skywalker';
  return name;
})();

类型转换

(1)parseInt

使用parseInt转换成数字是需要标注出进制;

var inputValue = '4';
var val = Number(inputValue);
//or
var val = parseInt(inputValue, 10);

(2)布尔

var age = 0;
var hasAge = Boolean(age);
//or
var hasAge = !!age;

命名规范

(1) 避免使用单个字母进行命名。尽量描述清楚你的命名;

(2)使用全字母大写,下划线分隔的方式命名不变量。不要使用 const 关键词命名常量,ie不支持。

var MD5_key = 'ya23adfuodf4sd';

(3)使用驼峰命名法(camelCase),命名你的对象、方法和实例

var thisIsMyObject = {};
function thisIsMyFunction() {}

(4) 正则表达式变量使用 r 作为前缀

rNumber = /(\d)+/;

(5)使用帕斯卡命名法(PascalCase),命名你的构造函数或类

function User(options) {
  this.name = options.name;
}
var good = new User({
  name: 'yup'
});

(6)用下划线打头命名私有属性

this._firstName = 'Panda';

(7)用 _this 保存 this 的引用

function() {
  var _this = this;
  return function() {
    console.log(_this);
  };
}

jquery

(1)命名jQuery对象的变量时,用 $ 作为前缀

var $sidebar = $('.sidebar');

闭包

闭包会在它封闭的作用域中保存变量引用。其结果是,附带着会创建DOM对象的循环引用,从而产生内存泄露。 例如下面的代码:

// bad
function foo(element, a, b) {
  element.onclick = function() { /* uses a and b */ };
}

在这个匿名方法中,闭包保存了element、a和b的引用,即使它不会用到element。我们构建了一个闭环,导致不会被垃圾清理回收。 在这种情况下,可以做如下重构:

// good
function foo(element, a, b) {
  element.onclick = bar(a, b);
}
function bar(a, b) {
  return function() { /* uses a and b */ };
}

delete

尽量避免使用delete删除键

// bad
Foo.prototype.dispose = function() {
  delete this.property_;
};
// good
Foo.prototype.dispose = function() {
  this.property_ = null;
};

使用JSON.parse替代eval

{
  "name": "Alice",
  "id": 31502,
  "email": "looking_glass@example.com"
}
var userInfo = JSON.parse(feed);
var email = userInfo['email'];

不要使用with(){}

使用with语句速度要比不使用with语句的等价代码的速度慢得多,90%(或者更高比例)的with应用场景都可以用其他更好的方式代替。

参考

相关文章
|
2月前
|
SQL 移动开发 前端开发
JavaScript 代码规范
JavaScript 代码规范
20 2
|
5月前
|
前端开发 JavaScript Serverless
前端新手建议收藏的JavaScript 代码技巧
前端新手建议收藏的JavaScript 代码技巧
34 1
|
5月前
|
缓存 JavaScript 前端开发
如何编写高质量 JavaScript 代码 经验无保留分享
编写高质量JavaScript代码涉及易读性、性能和健壮性。保持代码格式统一,避免魔术数字,采用单一功能原则,减少嵌套。优化算法,利用内置方法,减少作用域链查找,避免重复代码。使用新语法增强健壮性,确保代码可扩展,避免副作用,整合逻辑关注点。注释、异常处理、测试等也是关键。
35 3
|
5月前
|
JavaScript 前端开发 程序员
怎么编写高质量的JavaScript代码 初级程序员必备
怎么编写高质量的JavaScript代码 初级程序员必备
25 2
|
6月前
|
前端开发 JavaScript Java
适合初学者的 10 个JavaScript 代码整洁技巧
适合初学者的 10 个JavaScript 代码整洁技巧
|
JavaScript 前端开发
JavaScript代码优化之道
代码主要是为了写给人看的,而不是写给机器看的,只是顺便也能用机器执行而已。
1598 4
JavaScript代码优化之道
|
JavaScript 前端开发
【进阶篇】JavaScript代码规范
【进阶篇】JavaScript代码规范
198 0
【进阶篇】JavaScript代码规范
|
JavaScript 前端开发
《javascript代码规范整理》上
《javascript代码规范整理》
|
JavaScript 前端开发
《你不知道的JavaScript》整理(二)——this
最近在读一本进阶的JavaScript的书《你不知道的JavaScript(上卷)》,这次研究了一下“this”。 当一个函数被调用时,会创建一个活动记录(执行上下文)。
|
JavaScript 前端开发 程序员
下一篇
无影云桌面