你的位置:首页 > Java教程

[Java教程]JavaScript一些基础技巧和注意事项,你了解这些吗?


总结了一些JavaScript在开发编码中的使用技巧,如有不对,欢迎指正。

一、JavaScript在HTML和XHTML的使用

  使用<script>元素有两种方式:直接在页面中嵌入JavaScript代码和引入外部JavaScript文件。

  1. 先说一下在HTML页面使用内嵌的JavaScript方式

<script type="text/javascript">    function compare(a,b){      if(a < b){        console.log("a 小于 b");      }else if(a > b){        console.log("a 大于 b");      }else{        console.log("a 等于 b");      }    }</script>

上面的这段代码在HTML中是有效的,但是在XHML则是无效的。因为XHTML是将HTML作为

解决方法如下:

<script type="text/javascript">    //<![CDATA[    function compare(a,b){      if(a < b){        console.log("a 小于 b");      }else if(a > b){        console.log("a 大于 b");      }else{        console.log("a 等于 b");      }    }    //]]</script>

在XHTML(

2. 关于引用外部JavaScript文件的使用

<script type="text/javascript" src="myjs.js"></script>

<script type="text/javascript" src="myjs.js" />

上面两种方式,第一种方式在HTML和XHTML中都可以正确解析,但是第二种在HTML中就不能保证可以正确解析了,因为第二种语法不符合HTML的规范。(本人之前在做HTML5开发时,确实碰到过这个问题,找了好久又对比了一下别的页面,发现就是引用JavaScript的规范不符合导致页面不可用)所以,规范编写代码还是很重要了,虽然某些代码支持多种写法,比如逻辑判断 IF 语句的执行语句只有一行,可以不用花括号{}将执行逻辑包含起来也可以达到我们要的效果,但是为了我们能够更好的理解它的作用范围和更符合编码规范,最好还是不要省略花括号。

二、JavaScript基础注意事项和使用技巧

  1.关于分号" ; "的使用说明

var sum=a + bvar diff = a-b;

上面的两条语句都是可以被正确解析执行的,但是不推荐第一种写法,我们推荐每条语句的结尾都不要省略分号。

好处有一下三点:

  (1). 加上分号可以避免很多错误(比如不完整的输入)

  (2). 方便压缩代码(代码行结尾处没有分号会导致压缩错误)

  (3). 提升代码性能,因为这样解析器就不必要花时间推测应该在哪里插入分号了

 

2.最好不要测试某个特定的浮点数值

var a=0.1;var b=0.2;console.log(a+b);  //0.30000000000000004

如上图,并不是我们期望的0.3。关于浮点值计算产生误差,是使用基于IEEE754数值的浮点计算的通病(本人没有看IEEE754是什么,感兴趣的朋友自己查阅一下)。我们只要记住,在判定浮点数值计算上,千万不要轻易相信它。

  3. 关于逻辑运算符或者 ||

或逻辑运算符,两者有一个是真就会执行代码块。我们都知道程序执行时是有顺序的。下面的代码 if 语句中如果 a 是真就不会再次判断 b 了,如果 a 不是真则在接着判断 b。所以关于使用逻辑运算符或 || ,某些情况下,将我们有把握的条件放在第一个位置,能够提升代码的执行效率。

if(a || b){  ....... }

另外它还有一种我们常用的赋值模式

var myObj=currentObj || backupObj;

上面代码的意思是如果currentObj不为null或undefined,则将currentObj赋值给myObj,否则将backupObj赋值给myObj。

 

  4.相等操作符

  相等操作符可以分为两种,一种是相等(== 和 != ),一种是全等(=== 和 !== )。

  两者的区别在于相等(==)操作符会先转换操作数(也就是类型转换),然后再比较它们的相等性。而全等(===)操作符则不会进行类型转换,直接比较。参照下面代码可以看出等于和全等的区别,在实际开发中,为了保证数据类型的完整性,推荐使用全等操作符。

var result1=("55"==55);  //true,因为转换后相等var resutl2=("55" === 55); //false,因为不同的数据类型

   5.利用函数的 arguments 参数实现函数重载

由于ECMAScript并没有函数签名的特性,所以函数不能重载,不过我们可以利用arguments参数实现函数伪重载

function doAdd(){  if(arguments.length==1){    console.log(arguments[0]+10);  }  if(arguments.length==2){    console.log(arguments[0]+arguments[1]);  }}doAdd(10);  //20doAdd(10,20); //30

上面的代码是我们利用arguments参数个数实现了对同一函数不同参数列表的重载。当然,我们也可以通过检查传入参数的类型来实现不同的操作(这个可以大家自己练习一下)。

 

好了,上面就是在开发过程中我们经常遇到的一些问题和技巧,相信大家也是一样,或者已经从其它的地方有所了解。只要我们保持书写规范,了解部分逻辑的运行机制就可以利用它来优化我们的代码。

如果你也积累了一些开发注意事项和技巧或是从别的地方了解过,欢迎你分享。

最后,感谢阅读。