Javascript 风格向导(续)

来源:互联网 发布:php整站源码 编辑:程序博客网 时间:2024/06/07 03:02
  我好长时间没有在推荐栏里出现了,看来上一篇反响不错,故再续上篇。
Properties
• 当访问属性的时候,我们使用点(.)操作符。
复制代码
var luke = {  jedi: true,  age: 28};// badvar isJedi = luke['jedi'];// goodvar isJedi = luke.jedi;
复制代码

• 当以变量的方式访问属性的时候,用下标符号([])。——除非特殊需求,否则尽量避免使用obj[variable]的方式进行属性访问。

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

Variables
• 总是使用var定义变量,否则会导致产生隐含全局变量。我们要尽量避免污染全局变量命名空间。
// badsuperPower = new SuperPower();// goodvar superPower = new SuperPower();

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

• 使用一个var定义多个变量,每个变量在一个新行上。
复制代码
// badvar items = getItems();var goSportsTeam = true;var dragonball = 'z';// goodvar items = getItems(),    goSportsTeam = true,    dragonball = 'z';
复制代码

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

复制代码
// badvar i, len, dragonball,    items = getItems(),    goSportsTeam = true;// badvar i, items = getItems(),    dragonball,    goSportsTeam = true,    len;// goodvar items = getItems(),    goSportsTeam = true,    dragonball,    length,    i;
复制代码

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

复制代码
// badfunction() {  test();  console.log('doing stuff..');  //..other stuff..  var name = getName();  if (name === 'test') {    return false;  }  return name;}// goodfunction() {  var name = getName();  test();  console.log('doing stuff..');  //..other stuff..  if (name === 'test') {    return false;  }  return name;}// badfunction() {  var name = getName();  if (!arguments.length) {    return false;  }  return true;}// goodfunction() {  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');  }}
复制代码

 

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}

•  使用快捷方式。

复制代码
// badif (name !== '') {  // ...stuff...}// goodif (name) {  // ...stuff...}// badif (collection.length > 0) {  // ...stuff...}// goodif (collection.length) {  // ...stuff...}
复制代码

总结
  欢迎大家讨论,希望能反映出更多的问题来。
原创粉丝点击