JS基础知识集锦一(原创)

Published: 2014-05-05 Category: javascript Tags: javascript基础知识

##javascript基础知识集锦##

###一、async与defer的区别###

对于defer,我们可以认为是将外链的js放在了页面底部。js的加载不会阻塞页面的渲染和资源的加载。不过defer会按照原本的js的顺序执行,所以如果前后有依赖关系的js可以放心使用。

但是每一个async属性的脚本都在它下载结束之后立刻执行,同时会在window的load事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况;每一个defer属性的脚本都是在页面解析完毕之后,按照原本的顺序执行,同时会在document的DOMContentLoaded之前执行。

两者的区别在于执行时的不同:async 脚本在script文件下载完成后会立即执行,并且其执行时间一定在window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执行。与此相对,浏览器确保多个 defer 脚本按其在HTML页面中的出现顺序依次执行,且执行时机为DOM解析完成后,document的DOMContentLoaded 事件触发之前。

###二、window.onload、$(document).ready这两个方法进行简单的比较###

  • 执行时机
    window.onload:必须等待网页中所有的内容加载完毕后(包括图片)才能执行。 $(document).ready:网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完

  • 执行次数
    window.onload只能执行一次,但$(document).ready()则可以执行多次。
    如下代码:

window.onload = function() {  
 alert("demo1")  
};  
window.onload = function() {  
 alert("demo2")  
};  
//结果demo2,其实就是方法覆盖。

但是在$(document).ready()中:

$(document).ready(function() {  
   alert("demo1!");  
});  
$(document).ready(fcuntion() {  
   alert("demo2!");  
});
//结果是先输出demo1,再输出demo2。两次都会输出。

另外,需要注意一点,由于在$(document).ready()方法内注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕,并且已经解析为DOM树了,但很有可能图片还未加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题,可以使用jQuery中另一个关于页面加载的方法——load方法。load()方法会在元素的onload事件中绑定一个处理方法。如果处理方法绑定给window对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理方法绑定在元素上,则会在元素的内容加载完毕后触发。

$(window).load(function () {
    //干点事
})
window.onload = function () {
    //干点事
}
//以上两方法等价

注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。

调用load方法的完整格式是:load( url, [data], [callback] )
其中:

  • url:是指要导入文件的地址。

  • data:可选参数;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里。

  • callback:可选参数;是指调用load方法并得到服务器响应后的回调函数。

注意:使用load,这些参数是以POST的方式传递的,因此在后端语言中不能用GET来获取参数。

###三、use strict,undefined与null,typeof操作符

use strict:即所谓的严格模式,严格模式下,ECMAScript 3中的一些不确定行为将得到处理,而且对某些不安全操作也会抛出错误。这是为不破坏ECMAScript 3语法而特意选定的语法。严格模式下,js的执行结果会有很大不同

undefined与null:undefined实际上是派生自null的,所以undefined==null是返回true的,引入undefined字面量的主要目的就是用于比较,ES3引入undefined就是为了正式区分未初始化变量与空对象(null)。最佳实践:显式地初始化变量是明智的选择,如果我们检测到某变量为undefined,则代表该变量不是未初始化而是未声明。无论在什么情况下也不要显示地声明变量值为undefined,而对于将要保存对象而暂时还没保存对象的变量,应明确地初始化其变量值为null。

typeof:该操作符对函数会返回function。其实从技术角度讲,函数在ES(ECMAScript的缩写)中是对象的,而不是一种数据类型。然而函数也确实有一些特殊属性,所以一般用typeof来区分函数与其他对象。

###四、有关JS中的Number数据类型

  • NaN的两个特点,首先是任何涉及到和NaN的操作都会返回NaN;其次是NaN和任何值都不相等,包括它本身!注意,0除以0会返回NaN,负数除以0返回-Infinity,正数除以0返回Infinity。如下测试:
console.log(2.342/0);
>>Infinity 
console.log(-0.02342/0);
>>-Infinity
console.log(0/0);
>>NaN
  • 几个常用方法isFinite() 、isNaN() 、 Number()、parseInt() 、parseFloat()。前面两个方法根据方法名就能猜到它们的作用,对后面三种方法举例说明吧:
//1.Number()
Number(123); //123
Number(1.23); //1.23
Number('0123'); //123
Number('true'); //NaN
Number(true); //1
Number('121aasd'); //NaN
Number('undefind'); //NaN
Number(obj); //调用对象的valueOf()方法,若返回NaN,则调用对象的toString()方法.

//2.parseInt()
parseInt('1234blue'); //1234
parseInt('-123'); //-123
parseInt('-12.3'); //-12
parseInt(''); //NaN
parseInt('true'); //NaN
parseInt(0xf); //15
//parseInt()会忽略字符串前面的空格,直至找到第一个非空格字符,若第一个字符不是数字字符或负号则返回NaN,所以用parseInt()转换空字符串会返回NaN.在ES3中,parseInt("070")会被解析为是56(八进制),而ES5中则是70。最佳实践:在用使用parseInt()时,无论如何都带上进制参数,如:parseInt('070,10');

//3.parseFloat()
parseFloat('12.32.21');  //12.32
parseFloat('12.32afa'); //12.32
parseFloat('0xf'); //0
parseFloat("3.125e7"); //31250000
parseFloat('0902.32'); //902.32
//parseFloat()也是从第一个字符开始解析,直至解析到字符串末尾,或遇到一个无效的浮点数字字符为止。另外,parseFloat()只会解析十进制,对所有16进制格式的字符串都会解析为0.它有没有第二个参数,最后若字符串可以解析为一个整数,那它则返回整数。
Fork me on GitHub