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作为XML的应用而重新定义的一个标准。编写XHTML代码的规则规范要比编写HTML严格多，从而也会直接影响到嵌入式的JavaScript的使用。所以上面的代码中的比较语句 a < b 中的 < 号在XHTML中会被当做一个新的标签来解析。

解决方法如下:

<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(XML)中，CDATA块是文档中的一个特殊区域，它包含了不需要解析的任意格式的文本内容，将javascript包裹在CDATA中可以解决在XHTML中无法使用问题，但是若是碰到了不兼容的XHTML的浏览器，不支持CDATA片段怎么办？再使用JavaScript注释将CDATA标记注释即可。这种格式在现代的浏览器中都可以正常使用了。

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 + b
var 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);    //20
doAdd(10,20);  //30

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

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

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

最后，感谢阅读。