国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

javascript 模擬JQuery的Ready方法實現(xiàn)并出現(xiàn)的問題

2019-11-21 00:56:08
字體:
供稿:網(wǎng)友
dom加載完后執(zhí)行,一直不了解,基于對網(wǎng)上的一些方法邏輯不了解,所以去看了《jquery源代碼研究(ready函數(shù)) 》這篇文章后自己寫入如下代碼(已有詳細說明)
復(fù)制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>document.ready</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
var Darren;
(function(){
var isReady=false; //是否已經(jīng)加載完畢
var readBound=false; //判斷是否已經(jīng)調(diào)用過循環(huán)事件
var readylist=[]; //把需要執(zhí)行的方法先暫存在這個數(shù)組里
//判斷瀏覽器,該方法來自Cloudgamer JavaScript Library v0.1
var Browser = (function(ua){
var b = {
msie: /msie/.test(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
};
var vMark = "";
for (var i in b) {
if (b[i]) {
vMark = i;
}
}
if (b.safari) {
vMark = "version";
}
b.version = RegExp("(?:" + vMark + ")[///: ]([//d.]+)").test(ua) ? RegExp.$1 : "0";
b.ie = b.msie;
b.ie6 = b.msie && parseInt(b.version) == 6;
b.ie7 = b.msie && parseInt(b.version) == 7;
b.ie8 = b.msie && parseInt(b.version) == 8;
return b;
})(window.navigator.userAgent.toLowerCase());
function bindReady()
{
if(readBound){ //保證bindReady方法只執(zhí)行一遍
return;
}
readBound=true;
//For IE并且不是嵌套在frame中
if (Browser.msie && window==top)
{
(function(){
if (isReady) {
return;
}
try {
document.documentElement.doScroll("left"); //如果沒加載dom完畢這個會報錯
}
catch (error) {
setTimeout(arguments.callee, 0); //循環(huán)調(diào)用父函數(shù),也就是ready方法
return;
}
Test.Done();
})();
}else if(Browser.firefox)//For FF
{
document.addEventListener( "DOMContentLoaded", Test.Done, false );
}
}
var Test={
ready:function(fn){
bindReady();//判斷是否加載完畢
if(isReady)
{
fn.call(document); //加載完畢,直接調(diào)用
}else{
readylist.push(fn);//如果還沒加載完成則將該方法暫存到readylist數(shù)組中,以便以后調(diào)用
}
return this;
}
};
//靜態(tài)方法:加載完畢執(zhí)行
Test.Done=function(){
if (!isReady) {
isReady=true;
}
readylist[0].call(document);
}
Darren=Test;
})();
//測試
Darren.ready(function(){
alert("my");
document.getElementById("test").innerHTML="haha" //成功讀取dom
});
$(function(){alert("jq")});
window.onload=function(){alert("default")}
</script>
</head>
<body>
<div id="test">test</div>
</body>
</html>

由于要和jq做對比,所以測試時候需要導(dǎo)入jq庫。函數(shù)本身是沒有調(diào)用jq的,請放心引用。

代碼我通過封裝完成,直接Darren.ready(fn)就可執(zhí)行。

后來通過測試還是出現(xiàn)一個奇怪的問題:在FF下的執(zhí)行順序是jq -> my -> load 。也就是說我這個函數(shù)能夠在onload事件執(zhí)行前觸發(fā),但會晚于jq的ready。對這個還是比較滿意。

但是在IE下測試居然是:jq -> load -> my。也就是 我的這個函數(shù)雖然能夠把代碼提前,但是還是在onload事件執(zhí)行后觸發(fā)的,百思不得其解。

完同志們解答下如何實現(xiàn)onload之前執(zhí)行,jq又是怎么實現(xiàn)的,我完全模擬jq的結(jié)構(gòu),但是還是不能達到目的,難道中間有漏?

另大家可以參考下面的代碼
復(fù)制代碼 代碼如下:

var ready=function(readyCall) {
if(document.addEventListener)
document.addEventListener("DOMContentLoaded",function() {
document.removeEventListener("DOMContentLoaded",arguments.callee,false);
readyCall();
},false);
else if(document.attachEvent) {//for IE
if(document.documentElement.doScroll && window.self==window.top) {
(function() {
try {
document.documentElement.doScroll("left");
}catch(ex) {
setTimeout(arguments.callee,5);
return;
}
readyCall();
})();
}else {//maybe late but also for iframes
document.attachEvent("onreadystatechange",function() {
if(document.readyState==="complete") {
document.detachEvent("onreadystatechange", arguments.callee);
readyCall();
}
});
}
}
}
發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 临高县| 邵武市| 白银市| 新乡市| 五常市| 吉首市| 全椒县| 武汉市| 鄯善县| 泾阳县| 镇原县| 天水市| 临漳县| 泗阳县| 东乡县| 班玛县| 会泽县| 桃江县| 四子王旗| 深州市| 微山县| 中阳县| 绍兴市| 彰武县| 田阳县| 松原市| 马公市| 兰州市| 彭泽县| 邯郸县| 烟台市| 从江县| 隆尧县| 东至县| 桦川县| 安庆市| 东丰县| 上思县| 巨野县| 辽中县| 贵溪市|