Javascript 风格向导(续)

 

  我好长时间没有在推荐栏里出现了,看来上一篇反响不错,故再续上篇。

 

Properties

 

 • 当访问属性的时候,我们使用点(.)操作符。

var luke = {
jedi:
true,
age:
28
};

// bad
var isJedi = luke['jedi'];

// good
var isJedi = luke.jedi;

 • 当以变量的方式访问属性的时候,用下标符号([])。

var luke = {
jedi:
true,
age:
28
};

function getProp(prop) {
return luke[prop];
}

var isJedi = getProp('jedi');

 

Variables

 

 • 总是使用var定义变量,否则会导致产生隐含全局变量。我们要尽量避免污染全局变量命名空间。

// bad
superPower = new SuperPower();

// good
var superPower = new SuperPower();

汤姆大叔—javascript系列文章中提到“JavaScript有隐含的全局概念,意味着你不声明的任何变量都会成为一个全局对象属性。在技术上,隐式全局变量并不是真正的全局变量,但它们是全局对象的属性。属性是可以通过delete操作符删除的,而变量是不能的。

 • 使用一个var定义多个变量,每个变量在一个新行上。

// bad
var items = getItems();
var goSportsTeam = true;
var dragonball = 'z';

// good
var items = getItems(),
goSportsTeam
= true,
dragonball
= 'z';

 • 用var定义多个变量的时候,把不进行赋值的变量放置到最后——这是相当有益的。尤其是当你的变量需要前面变量值的时候。

// bad
var i, len, dragonball,
items
= getItems(),
goSportsTeam
= true;

// bad
var i, items = getItems(),
dragonball,
goSportsTeam
= true,
len;

// good
var items = getItems(),
goSportsTeam
= true,
dragonball,
length,
i;

 • 把你的赋值变量放置在当前作用域的顶端。这将避免变量声明和hoisting(悬置/置顶解析/预解析)的问题。

// 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;
}

 

Hoisting

 

汤姆大叔:

  1、JavaScript中,你可以在函数的任何位置声明多个var语句,并且它们就好像是在函数顶部声明一样发挥作用,这种行为称为 hoisting(悬置/置顶解析/预解析)。

  2、对于JavaScript,只 要你的变量是在同一个作用域中(同一函数),它都被当做是声明的,即使是它在var声明前使用的时候。

 •  变量声明提升到当前作用域的顶端,而它们的赋值操作不一定要这么做。

function example() {
console.log(notDefined);
// => throws a ReferenceError
}


function example() {
console.log(declaredButNotAssigned);
// => undefined
var declaredButNotAssigned = true;
}


function example() {
var declaredButNotAssigned;
console.log(declaredButNotAssigned);
// => undefined
declaredButNotAssigned = true;
}

 •  匿名表达式会自动提升它们的变量名称(也就是说在var anonymous上面,example函数就已经知道有这个变量了),但是它们的函数体不会。

function example() {
console.log(anonymous);
// => undefined

anonymous();
// => TypeError anonymous is not a function

var anonymous = function() {
console.log(
'anonymous function expression');
};
}

 •  命名函数表达式也会提升它们的变量名称,而它们的函数名称和函数体不会这样做。

function example() {
console.log(named);
// => undefined

named();
// => TypeError named is not a function

superPower();
// => ReferenceError superPower is not defined

var named = function superPower() {
console.log(
'Flying');
};


function example() {
console.log(named);
// => undefined

named();
// => TypeError named is not a function

var named = function named() {
console.log(
'named');
};
}
}

 •  注意:声明函数会提升它们的变量名称还有它们的函数体

function example() {
superPower();
// => Flying

function superPower() {
console.log(
'Flying');
}
}

 

 •  更多信息我们可以看 Ben Cherry写的 JavaScript Scoping & Hoisting 。

 

Conditional Expressions & Equality

 

 •  使用 === 和 !== 代替==和!=。

 •  强制使用对象的特性(ToBoolean)得到条件表达式的值,大致遵循以下简单规则。

  ◊ Objects 得到的值是true。

  ◊ Undefined得到的值是false。

  ◊ Null得到的值是false。

  ◊ Booleans得到的值是Boolean值(呵呵,当然)。

  ◊ Numbers 得到的值是:如果是+0,-0,或者NaN就是false,否则就是true。

  ◊ Strings 得到的值是:如果是”,就是false,否则就是true。

if ([0]) {
// true
// An array is an object, objects evaluate to true
}

 •  使用快捷方式。

// bad
if (name !== '') {
// ...stuff...
}

// good
if (name) {
// ...stuff...
}

// bad
if (collection.length > 0) {
// ...stuff...
}

// good
if (collection.length) {
// ...stuff...
}

 •  更多信息可以查看Angus Croll写的 Truth Equality and JavaScript

 

 

 

总结

 

  欢迎大家讨论,希望能反映出更多的问题来。

 

推荐

 

 

本文链接



You must enable javascript to see captcha here!

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress

无觅相关文章插件,快速提升流量