首页 > 代码库 > 学习笔记：调用js文件冲突问题解决方案
学习笔记：调用js文件冲突问题解决方案
之前自己动手做了一个小网站，在实现过程中遇到了一个关于js文件调用冲突的问题。
具体问题描述如下：在index.html文件中引用了两个js文件，单独添加banner.js或者focus_pic.js都可以运行并且实现相应的功能，但是两个同时添加两个文件后，后banner.js失效了。经过一番研究翻阅了一些资料，并在网上求助于各路大神，终于将问题的原因搞明白了。
banner.js代码如下所示：
1 var t = n = 0, count; 2 $(document).ready(function(){ 3 count=$("#banner_list a").length; 4 $("#banner_list a:not(:first-child)").hide(); 5 $("#banner_info").html($("#banner_list a:first-child").find("img").attr(‘alt‘)); 6 $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr(‘href‘), "_blank")}); 7 $("#banner li").click(function() { 8 var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4 9 n = i; 10 if (i >= count) return; 11 $("#banner_info").html($("#banner_list a").eq(i).find("img").attr(‘alt‘)); 12 $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr(‘href‘), "_blank")}) 13 $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000); 14 $(this).css({"background":"#be2424",‘color‘:‘#000‘}).siblings().css({"background":"#6f4f67",‘color‘:‘#fff‘}); 15 }); 16 t = setInterval("showAuto()", 4000); 17 $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);}); 18 }) 19 20 function showAuto() 21 { 22 n = n >=(count - 1) ? 0 : ++n; 23 $("#banner li").eq(n).trigger(‘click‘); 24 }
focus_pic.js代码如下所示:
1 var foucsbox = function (time) { 2 var time = time || 3500 3 , bigimgs = big.getElementsByTagName(‘li‘) 4 , samllimgs = samll.getElementsByTagName(‘li‘) 5 , imglink = tip.getElementsByTagName(‘a‘)[0] 6 , slide = function (z) { 7 samllimgs[lastIndex].className = ‘‘; 8 samllimgs[z].className = ‘current‘; 9 bigimgs[lastIndex].style.display = ‘none‘; 10 bigimgs[z].style.display = ‘block‘; 11 try { 12 imglink.innerHTML = samllimgs[z].getElementsByTagName(‘img‘)[0].alt; 13 } 14 catch (e) { 15 imglink.innerText = samllimgs[z].firstChild.firstChild.alt; 16 } 17 lastIndex = i = z; 18 } 19 , helper = function (z) { 20 return function (e) { 21 var na; 22 if (!e) { 23 e = window.event; 24 na = e.srcElement.nodeName; 25 } 26 else { 27 na = e.target.nodeName; 28 } 29 if (na === ‘IMG‘) { 30 slide(z); 31 } 32 } 33 } 34 , lastIndex = i = 0, x, y = bigimgs.length 35 , getPrevI = function (q) { return i - q < 0 ? y - q : i - 1; } 36 , getNextI = function (q) { return i + q >= y ? i + q - y : i + 1; } 37 try { 38 imglink.innerText = samllimgs[0].getElementsByTagName(‘img‘)[0].alt; 39 } 40 catch (e) { 41 imglink.innerText = samllimgs[0].firstChild.firstChild.alt; 42 } 43 for (x = 1; x < y; x += 1) { 44 bigimgs[x].style.display = ‘none‘; 45 } 46 for (x = 0; x < y; x += 1) { 47 samllimgs[x].onmouseover = helper(x); 48 } 49 topCon.children[2].onclick = function (e) { 50 i = lastIndex; 51 var t; 52 if (!e) { 53 e = window.event; 54 t = e.srcElement; 55 } else { 56 t = e.target; 57 } 58 switch (t.className) { 59 case ‘icon_prev‘: 60 slide(getPrevI(1)); 61 break; 62 case ‘icon_next‘: 63 slide(getNextI(1)); 64 break; 65 } 66 }; 67 topCon.onmouseover = function () { 68 clearInterval(s); 69 }; 70 topCon.onmouseout = function () { 71 s = setInterval(function () { 72 slide(i); 73 i = getNextI(1); 74 }, time); 75 }; 76 }; 77 78 var $ = function (id) { return document.getElementById(id); } 79 , topCon = $(‘flower1‘) 80 , big = $(‘focus_pic1‘) 81 , samll = $(‘focus_list1‘) 82 , tip = $(‘focus_title1‘) 83 foucsbox(2500); 84 85 var topCon = $(‘flower2‘) 86 , big = $(‘focus_pic2‘) 87 , samll = $(‘focus_list2‘) 88 , tip = $(‘focus_title2‘) 89 foucsbox(2500); 90 91 var topCon = $(‘flower3‘) 92 , big = $(‘focus_pic3‘) 93 , samll = $(‘focus_list3‘) 94 , tip = $(‘focus_title3‘) 95 foucsbox(2500); 96 97 var topCon = $(‘flower4‘) 98 , big = $(‘focus_pic4‘) 99 , samll = $(‘focus_list4‘)100 , tip = $(‘focus_title4‘)101 foucsbox(2500);
问题的原因在于var $ = function (id) { return document.getElementById(id); }
就是这段覆盖了jquery的工厂函数，解决办法有2个，
解决方法1：把这个块换个名字
1 var foucsbox = function (time) { 2 var time = time || 3500 3 , bigimgs = big.getElementsByTagName(‘li‘) 4 , samllimgs = samll.getElementsByTagName(‘li‘) 5 , imglink = tip.getElementsByTagName(‘a‘)[0] 6 , slide = function (z) { 7 samllimgs[lastIndex].className = ‘‘; 8 samllimgs[z].className = ‘current‘; 9 bigimgs[lastIndex].style.display = ‘none‘; 10 bigimgs[z].style.display = ‘block‘; 11 try { 12 imglink.innerHTML = samllimgs[z].getElementsByTagName(‘img‘)[0].alt; 13 } 14 catch (e) { 15 imglink.innerText = samllimgs[z].firstChild.firstChild.alt; 16 } 17 lastIndex = i = z; 18 } 19 , helper = function (z) { 20 return function (e) { 21 var na; 22 if (!e) { 23 e = window.event; 24 na = e.srcElement.nodeName; 25 } 26 else { 27 na = e.target.nodeName; 28 } 29 if (na === ‘IMG‘) { 30 slide(z); 31 } 32 } 33 } 34 , lastIndex = i = 0, x, y = bigimgs.length 35 , getPrevI = function (q) { return i - q < 0 ? y - q : i - 1; } 36 , getNextI = function (q) { return i + q >= y ? i + q - y : i + 1; } 37 try { 38 imglink.innerText = samllimgs[0].getElementsByTagName(‘img‘)[0].alt; 39 } 40 catch (e) { 41 imglink.innerText = samllimgs[0].firstChild.firstChild.alt; 42 } 43 for (x = 1; x < y; x += 1) { 44 bigimgs[x].style.display = ‘none‘; 45 } 46 for (x = 0; x < y; x += 1) { 47 samllimgs[x].onmouseover = helper(x); 48 } 49 topCon.children[2].onclick = function (e) { 50 i = lastIndex; 51 var t; 52 if (!e) { 53 e = window.event; 54 t = e.srcElement; 55 } else { 56 t = e.target; 57 } 58 switch (t.className) { 59 case ‘icon_prev‘: 60 slide(getPrevI(1)); 61 break; 62 case ‘icon_next‘: 63 slide(getNextI(1)); 64 break; 65 } 66 }; 67 topCon.onmouseover = function () { 68 clearInterval(s); 69 }; 70 topCon.onmouseout = function () { 71 s = setInterval(function () { 72 slide(i); 73 i = getNextI(1); 74 }, time); 75 }; 76 }; 77 78 var byId = function (id) { return document.getElementById(id); } 79 , topCon = byId(‘flower1‘) 80 , big = byId(‘focus_pic1‘) 81 , samll = byId(‘focus_list1‘) 82 , tip = byId(‘focus_title1‘) 83 foucsbox(2500); 84 85 var topCon = byId(‘flower2‘) 86 , big = byId(‘focus_pic2‘) 87 , samll = byId(‘focus_list2‘) 88 , tip = byId(‘focus_title2‘) 89 foucsbox(2500); 90 91 var topCon = byId(‘flower3‘) 92 , big = byId(‘focus_pic3‘) 93 , samll = byId(‘focus_list3‘) 94 , tip = byId(‘focus_title3‘) 95 foucsbox(2500); 96 97 var topCon = byId(‘flower4‘) 98 , big = byId(‘focus_pic4‘) 99 , samll = byId(‘focus_list4‘)100 , tip = byId(‘focus_title4‘)101 foucsbox(2500);
解决方法2：由于js的变量作用域或作用范围是按函数来划分界限的，所以放在一个函数里边，把他执行一下。一般通俗的叫：立即执行函数。这样，这个内部$不会穿透，或影响到外边去。这是一种偷懒或省力的解决办法。但是这个方法的缺点是：要求的技术储备比较高，里边也有少量的坑。比如，即不让$穿透，还需要把里边的方法暴露给外边。这时候需要借助window，把方法绑定在window上面去。比如：window.method = method.
1 (function(window){ 2 var $ = function(id) { 3 return document.getElementById(id); 4 }, 5 topCon = $(‘flower1‘), 6 big = $(‘focus_pic1‘), 7 samll = $(‘focus_list1‘), 8 tip = $(‘focus_title1‘); 9 foucsbox(2500);10 11 var topCon = $(‘flower2‘),12 big = $(‘focus_pic2‘),13 samll = $(‘focus_list2‘),14 tip = $(‘focus_title2‘);15 foucsbox(2500);16 17 var topCon = $(‘flower3‘),18 big = $(‘focus_pic3‘),19 samll = $(‘focus_list3‘),20 tip = $(‘focus_title3‘);21 foucsbox(2500);22 23 var topCon = $(‘flower4‘),24 big = $(‘focus_pic4‘),25 samll = $(‘focus_list4‘),26 tip = $(‘focus_title4‘);27 foucsbox(2500);28 }(window))
以上方法就可以成功解决问题啦！感谢大神的指点，受益匪浅！前端的路，才刚刚开始，希望以后可以更多的发现问题，解决问题，分享经验！
学习笔记：调用js文件冲突问题解决方案
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。