第二课:判断js变量的类型以及domReady的原理
1.类型的判断:
js五种简单数据类型有:null,undefined,boolean,number,string。
还有复杂的数据类型:Object,Function,RegExp,Date,自定义的对象,比如:Person等。
typeof一般用来判断boolean,number,string,instanceof一般用来判断对象类型。但它们都有缺陷。比如:firame里面的数组实例就不是父窗口的Array的实例,调用instanceof会返回false。(这题360校招时问过)。typeof new Boolean(true) // "object" ,包装对象。boolean,number,string三种包装对象,js高级程序编程里面有讲。
有很多人使用typeof document.all来判断是否为IE,其实这是很危险的,因为此属性谷歌和火狐也喜欢,所以在谷歌浏览器下出现了这个情况:typeof document.all //undefined 但是,document.all //HTMLAllCollection,用typeof判断是undefined,但是可以读取此属性值。
但是现在可以使用Object.prototype.toString.call方法判断类型。此方法可以直接输出对象内部的[[Class]].但IE8及以下的window对象不能使用此方法。可以使用 window == document // true document == window // false IE6,7,8下。
nodeType ( 1:元素 Element 2:属性 attribute 3:文本 Text 9:document)
jquery中判断类型使用的方法:
class2type ={}
jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(i,name){
class2type [ "[object " + name + "]" ] = name.toLowerCase();
//class2type = {"[object Boolean]":boolean,"[object Number ]":number ,"[object String ]":string ,"[object Function ]":function ,"[object Array ]":array ......}
});
jQuery.type = function(obj){ //如果obj是null,undefined等,就返回字符串"null","undefined"。如果不是,就调用toString方法,如果可以调用就判断,出错就返回object(IE低版本下的window,Dom等ActiveXobject对象)
return obj == null ? String(obj) : class2type [ toString.call(obj) ] || "object";
}
2.domReady
js操作dom节点时,页面必须构建好dom树才行。因此,通常使用window.onload方法。但是onload方法是等所有资源加载结束后才会执行。而为了让页面能更快的响应用户的操作,我们只需要dom树构建完毕,就应该使用js操作。而不需要等待所有资源都加载结束(图片,flash)。
因此出现了DOMContentLoaded事件,Dom树构建完成后触发。但是旧版本IE不支持,因此就有了hack。
if(document.readyState === "complete"){ //以防Dom文档加载完成后才加载js文件。这时通过此判断来执行fn方法(你要执行的方法)。因为文档加载完成后,document.readyState的值为complete
setTimeout(fn); //异步执行,可以让它后面的代码先执行。这里是jQuery里面的用法,可以不用理解。
}
else if(document.addEventListener){//支持DOMContentLoaded事件
document.addEventListener("DOMContentLoaded",fn,false); //冒泡
window.addEventListener("load",fn,false); //以防DOM树构建好之后才加载js文件。这时不会触发DOMContentLoaded事件(已经触发结束了),只会触发load事件
}
else{
document.attachEvent("onreadystatechange",function(){//针对IE下的iframe安全,有时会优先onload执行,有时不会。
if(document.readyState ==="complete"){
fn();
}
});
window.attachEvent("onload",fn); //总会起到作用,以防其他监听事件没获取到,这样至少可以通过onload事件触发fn方法。
var top = false;//看是否在iframe中
try{//window.frameElement即为包含本页面的iframe或frame对象。没有则为null。
top = window.frameElement == null && document.documentElement;
}catch(e){}
if(top && top.doScroll){ //如果没有iframe,并且是IE
(function doScrollCheck(){
try{
top.doScroll("left");//IE下,如果Dom树构建好,就可以调用html的doScroll方法
}catch(e){
return setTimeout(doScrollCheck,50); //如果还没构建好,则继续监听
}
fn();
})()
}
}
fn方法中必须包含移除所有的绑定事件。
当然IE还可以使用script defer hack,原理就是:指定了defer的script会在DOM树构建完后才执行。但是这需要添加额外的js文件,很少在单独的库里面用到。
使用原理:在文档中添加script标签,并用script.src = "xxx.js",监听script的onreadystatechange事件,当this.readyState == "complete"时,就执行fn方法。
也就是说,DOM构建好之后,xxx.js才会执行,它的this.readyState才会变成complete。
加油!
第二课:判断js变量的类型以及domReady的原理的更多相关文章
- javascript数据变量类型判断(JS变量是否是数组,是否是函数的判断)
function isArray(o) { return Object.prototype.toString.apply(o) === “[object Array]”;}function isFun ...
- 潭州课堂25班:Ph201805201 第二课:数据类型和序列类型 (课堂笔记)
workon py3env pip install ipython 安装虚拟环境, 安装完成之后,键入:ipython 进入环境, 数字类型:(整型) int --------> ...
- Ng第二课:单变量线性回归(Linear Regression with One Variable)
二.单变量线性回归(Linear Regression with One Variable) 2.1 模型表示 2.2 代价函数 2.3 代价函数的直观理解 2.4 梯度下降 2.5 梯度下 ...
- 斯坦福第二课:单变量线性回归(Linear Regression with One Variable)
二.单变量线性回归(Linear Regression with One Variable) 2.1 模型表示 2.2 代价函数 2.3 代价函数的直观理解 I 2.4 代价函数的直观理解 I ...
- 判断一个变量的类型Object.prototype.toString.call
var num = 1;alert(Object.prototype.toString.call(num)); // [object Number]var str = 'hudidit.com';al ...
- js变量及其作用域(附例子及讲解)
Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量 工具/原料 Ch ...
- js变量及其作用域
Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量 一.js变量的类型及 ...
- 如何判断js中的数据类型
如何判断js中的数据类型:typeof.instanceof. constructor. prototype方法比较 如何判断js中的类型呢,先举几个例子: var a = "iamstri ...
- [转]如何判断js中的数据类型
原文地址:http://blog.sina.com.cn/s/blog_51048da70101grz6.html 如何判断js中的数据类型:typeof.instanceof. constructo ...
随机推荐
- EXCEL IF 函数 模糊查询
A列都是产品名,比如衬衫,长袖衬衫,短袖衬衫,短裙,长裙 搜索A列的产品名,凡是含有“衬衫”的一律在B列对应行输出“衬衫”,凡是含有“裙”字的一律输出“裙子”在B列对应行,请教一下怎么写函数,本来用I ...
- [转]Ionic Datepicker
本文转自:https://market.ionic.io/plugins/ionicdatepicker ##Introduction: This is an ionic-datepicker bow ...
- Legendre polynomials
In mathematics, Legendre functions are solutions to Legendre's differential equation: In particular, ...
- 匈牙利算法 codevs 2776 寻找代表元
codevs 2776 寻找代表元 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题目描述 Description 广州二中苏元实验学校一共有n个社团,分别用 ...
- hdu 5800 To My Girlfriend + dp
传送门:hdu 5800 To My Girlfriend 题意:给定n个物品,其中i,j必选,l,m必不选,问组成体积为s的方法一共有多少种 思路:定义dp[i][j][s1][s2],表示前i种物 ...
- ZOJ 3820 Building Fire Stations 求中点+树的直径+BFS
题意:给一棵树,要求找出两个点,使得所有点到这两个点中距离与自己较近的一个点的距离的最大值(所有点的结果取最大的值,即最远距离)最小. 意思应该都能明白. 解法:考虑将这棵树摆直如下: 那么我们可以把 ...
- POJ 3321 Apple Tree
树状数组. 代码: #include <iostream> #include <cstdio> #include <cstring> #include <cm ...
- Java开发和运行环境的搭建
Java开发需要准备的东西? JDK+Eclipse 其中JDK的意思是Java开发工具包,Eclipse是进行用于做Java程序开发的工具(当然你也可以用记事本什么的去做). 其他开发工具:JCre ...
- -bash: wget: command not found的两种解决方法
今天给服务器安装新环境时,wget 时提示 -bash:wget command not found,很明显没有安装wget软件包.一般linux最小化安装时,wget不会默认被安装,这里是CentO ...
- Android安全机制(2) Android Permission权限控制机制
http://blog.csdn.net/vshuang/article/details/44001661 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 1.概述 Andro ...