Javascript 正确使用方法 二

好的,废话不多说,接着上篇来.

变量(variables)

始终使用 var 关键字来定义变量,如果不这样将会导致 变量全局化,造成污染.

//bad

superPower = new SuperPower();

//good

var superPower = new SuperPower();

使用 一个 var关键字来定义多个变量...并且每个变量一行..

// bad

var items = getItems();

var goSportsTeam = true;

var dragonball = ‘z‘;

// good

var items = getItems(),

goSportsTeam = true,

dragonball = ‘z‘;

//我个人更喜欢下面这种定义方法.

var items = getItems()

,   goSportsTeam = true

,   dragonball = ‘z‘;

将未赋值的变量放在后面...

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

将变量的定义和赋值放在 作用域的顶部,这样能避免 变量提升相关的问题..

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

}

//上面这个例子我感觉这么奇葩呢...这个name根本没有起到任何作用啊...

Hoisting (国内书籍翻译为 提升)

变量的定义会得到提升,也就是移动到作用域的顶部 ,但是 赋值并没有得到提升..

举个简单的例子..对于简单的 var a = 10;

其实经历的是两个过程,

① var a;

② a = 10;

恩,,变量提升只是提升的第一部分,而第二部分并没有得到提升...

function example() {

console.log(declaredButNotAssigned); // => undefined

var declaredButNotAssigned = true;

}

function example() {

var declaredButNotAssigned;

console.log(declaredButNotAssigned); // => undefined

declaredButNotAssigned = true;

}

匿名函数表达式提升的只是变量的名称,而不是函数的定义..

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() {

superPower(); // => Flying

function superPower() {

console.log(‘Flying‘);

}

}

//这也就是为什么我们在我们代码的底部通过这种方式能够访问,但是按照之前的方式定义函数无法访问的原因了..

//现在大家明白了吧..

Contional Expressions & Equality  条件表达式和 等式..

条件表达式会通过 类型转换 来对括号内的内容进行评估来返回 Boolean值..

转换会遵循以下规则:

1,对象返回 true

2,underfined 返回false

3, Null 返回false

4, Booleans类型就返回自己.

5, +0,0,-0,NaN 返回false ,其他返回true

6, 空字符返回false..//注意注意,如果你的字符串里面有 空格,则同样会返回true

if([0]) {

//true

//这个array 是我们之前提过的,是通过字面量来进行数组的创建.... 当然返回true,不要被 0 迷惑了..

}

// bad

if (name !== ‘‘) {

// ...stuff...

}

// good

if (name) {

// ...stuff...

}

// bad

if (collection.length > 0) {

// ...stuff...

}

// good

if (collection.length) {

// ...stuff...

}

代码块..

// bad

if (test)

return false;

// good

if (test) return false;

// good

if (test) {

return false;

}

// bad

function() { return false; }

// good

function() {

return false;

}

// bad

var x=y+5;

// good

var x = y + 5;

Javascript 正确使用方法 二,布布扣,bubuko.com

时间: 2024-10-05 13:39:06

Javascript 正确使用方法 二的相关文章

Javascript 正确使用方法

今天在github 上面找到了一个关于如何正确使用javascript 来进行我们的程序开发.我就恬不知耻的来了个原创啊..坑爹啊.拿来和大家分享一下吧. A mostly reasonable approach to Javascript. Types //类型 Objects //对象 Arrays //数组 Strings //字符串 Functions //函数 Properties //属性 Variables //变量 Hoisting //变量提升 Conditional Expr

全栈JavaScript之路( 二十一)HTML5 scrollIntoView方法

HTML5中,scrollIntoView()可以在所有HTML 元素上调用 通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视口中. 如果给这个方法传入true 作为参数,或者不传入任何参数,那么窗口滚动之后会让调用元素的顶部与视窗顶部尽可能平齐. 如果传入false 作为参数,调用元素会尽可能全部出现在视口中,(可能的话,调用元素的底部会与视窗顶部平齐.)不过顶部不一定平齐. 当页面发生变化时,一般会用这个方法来吸引用户的注意力. 实际上,为某个元素设置焦点也会导致浏览器滚动并显示出获

javascript常用的方法(二)

//判断页面加载完毕 document.onreadystatechange = function () { if (document.readyState == "complete") { //code... } } //判断是否全为手机 String.prototype.isMobile = function () { var pattern = /^0{0,1}(13[0-9]|14[6|7]|15[0-3]|15[5-9]|18[0-3]|18[5-9])[0-9]{8}$/;

JS_七种JAVASCRIPT加密/解密方法

本文一共介绍了七种JAVASCRIPT加密方法. 一:最简单的加密解密 二:转义字符的妙用 三:使用Microsoft出品的脚本编码器Script Encoder来进行编码 (自创简单解码) 四:任意添加NUL空字符(十六进制00H) (自创) 五:无用内容混乱以及换行空格TAB大法 六:自写解密函数法 七:错误的利用 在做网页时(其实是网页木马呵呵),最让人烦恼的是自己辛辛苦苦写出来的客户端IE运行的JAVASCRIPT代码常常被别人轻易的拷贝,实在让自己的心里有点不是滋味,要知道自己写点东西

JavaScript常见调试方法

编辑导语:javascript调试方法,常见使用alert和console来定位出错和输出的结果是否是想要的,在chrome中,还可以使用断点来看运行的情况等,本文介绍了比较全面的调试方法,你知道console.table,console.log('%c前端开发博客','font-size:40px');一起看看. 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故 障概率.帮助分析逻辑错误等等.而在互联网前

javascript系列之DOM(二)

原生DOM扩展 我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点.我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一些优秀 的DOM操作API.可见原生的一些方法和属性,还不能很灵活快捷的来完成我们所希望的操作.下面将总结出总结出几种很实用的扩展方法.包括 after()和before(), A:after()和before() 1 function after(elem){ 2 if(this.parentNode){ 3 this.parentNode.

全栈JavaScript之路( 二十四 )DOM2、DOM3, 不涉及XML命名空间的扩展

(一)DocumentType 类型的变化新增三个属性: publicId,systemId,internalSubset(内部子集) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" [<!ELEMENT name (#PCDATA)>] > 通过, document.doc

Javascript面向对象编程(二):构造函数的继承

这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function Cat(name,color){ this.name = name; this.color = col

全栈JavaScript之路( 二十三 )DOM2、DOM3, 涉及XML命名空间的扩展(一)

<!DOCTYPE html> <xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"> <head> <title>Example XHTML page</title> </head> <body> <s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1&