学习笔记：调用js文件冲突问题解决方案

时间：2014-08-22 15:44:49 阅读：299 评论：0 收藏：0 [点我收藏+]

之前自己动手做了一个小网站，在实现过程中遇到了一个关于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文件冲突问题解决方案

标签：style blog color io 文件 for ar 问题 div

原文地址：http://www.cnblogs.com/wqhwe/p/3929416.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行