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

之前自己动手做了一个小网站，在实现过程中遇到了一个关于js文件调用冲突的问题。

具体问题描述如下：在index.html文件中引用了两个js文件，单独添加banner.js或者focus_pic.js都可以运行并且实现相应的功能，但是两个同时添加两个文件后，后banner.js失效了。经过一番研究翻阅了一些资料，并在网上求助于各路大神，终于将问题的原因搞明白了。

banner.js代码如下所示：

 var t = n = 0, count;
 $(document).ready(function(){
 count=$("#banner_list a").length;
 $("#banner_list a:not(:first-child)").hide();
 $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
 $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")});
 $("#banner li").click(function() {
 var i = $(this).text() - 1;//获取Li元素内的值，即1，2，3，4
 n = i;
 if (i >= count) return;
 $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
 $("#banner_info").unbind().click(function(){window.open($("#banner_list a").eq(i).attr('href'), "_blank")})
 $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
 $(this).css({"background":"#be2424",'color':'#000'}).siblings().css({"background":"#6f4f67",'color':'#fff'});
 });
 t = setInterval("showAuto()", 4000);
 $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
 }) 

 function showAuto()
 {
 n = n >=(count - 1) ? 0 : ++n;
 $("#banner li").eq(n).trigger('click');
 } 

focus_pic.js代码如下所示:

 var foucsbox = function (time) {
     var time = time || 3500
     , bigimgs = big.getElementsByTagName('li')
     , samllimgs = samll.getElementsByTagName('li')
     , imglink = tip.getElementsByTagName('a')[0]
     , slide = function (z) {
         samllimgs[lastIndex].className = '';
         samllimgs[z].className = 'current';
         bigimgs[lastIndex].style.display = 'none';
         bigimgs[z].style.display = 'block';
         try {
             imglink.innerHTML = samllimgs[z].getElementsByTagName('img')[0].alt;
         }
         catch (e) {
             imglink.innerText = samllimgs[z].firstChild.firstChild.alt;
         }
         lastIndex = i = z;
     }
     , helper = function (z) {
         return function (e) {
             var na;
             if (!e) {
                 e = window.event;
                 na = e.srcElement.nodeName;
             }
             else {
                 na = e.target.nodeName;
             }
             if (na === 'IMG') {
                 slide(z);
             }
         }
     }
     , lastIndex = i = 0, x, y = bigimgs.length
     , getPrevI = function (q) { return i - q < 0 ? y - q : i - 1; }
     , getNextI = function (q) { return i + q >= y ? i + q - y : i + 1; }
     try {
         imglink.innerText = samllimgs[0].getElementsByTagName('img')[0].alt;
     }
     catch (e) {
         imglink.innerText = samllimgs[0].firstChild.firstChild.alt;
     }
     for (x = 1; x < y; x += 1) {
         bigimgs[x].style.display = 'none';
     }
     for (x = 0; x < y; x += 1) {
         samllimgs[x].onmouseover = helper(x);
     }
     topCon.children[2].onclick = function (e) {
         i = lastIndex;
         var t;
         if (!e) {
             e = window.event;
             t = e.srcElement;
         } else {
             t = e.target;
         }
         switch (t.className) {
             case 'icon_prev':
                 slide(getPrevI(1));
                 break;
             case 'icon_next':
                 slide(getNextI(1));
                 break;
         }
     };
     topCon.onmouseover = function () {
         clearInterval(s);
     };
     topCon.onmouseout = function () {
         s = setInterval(function () {
             slide(i);
             i = getNextI(1);
         }, time);
     };
 };

      var $ = function (id) { return document.getElementById(id); }
     , topCon = $('flower1')
     , big = $('focus_pic1')
     , samll = $('focus_list1')
     , tip = $('focus_title1')
         foucsbox(2500);

      var topCon = $('flower2')
     , big = $('focus_pic2')
     , samll = $('focus_list2')
     , tip = $('focus_title2')
         foucsbox(2500);

      var topCon = $('flower3')
     , big = $('focus_pic3')
     , samll = $('focus_list3')
     , tip = $('focus_title3')
         foucsbox(2500);

      var topCon = $('flower4')
     , big = $('focus_pic4')
     , samll = $('focus_list4')
     , tip = $('focus_title4')
         foucsbox(2500);

问题的原因在于var $ = function (id) { return document.getElementById(id); }
就是这段覆盖了jquery的工厂函数，解决办法有2个，
解决方法1：把这个块换个名字

 var foucsbox = function (time) {
     var time = time || 3500
             , bigimgs = big.getElementsByTagName('li')
             , samllimgs = samll.getElementsByTagName('li')
             , imglink = tip.getElementsByTagName('a')[0]
             , slide = function (z) {
                 samllimgs[lastIndex].className = '';
                 samllimgs[z].className = 'current';
                 bigimgs[lastIndex].style.display = 'none';
                 bigimgs[z].style.display = 'block';
                 try {
                     imglink.innerHTML = samllimgs[z].getElementsByTagName('img')[0].alt;
                 }
                 catch (e) {
                     imglink.innerText = samllimgs[z].firstChild.firstChild.alt;
                 }
                 lastIndex = i = z;
             }
             , helper = function (z) {
                 return function (e) {
                     var na;
                     if (!e) {
                         e = window.event;
                         na = e.srcElement.nodeName;
                     }
                     else {
                         na = e.target.nodeName;
                     }
                     if (na === 'IMG') {
                         slide(z);
                     }
                 }
             }
             , lastIndex = i = 0, x, y = bigimgs.length
             , getPrevI = function (q) { return i - q < 0 ? y - q : i - 1; }
             , getNextI = function (q) { return i + q >= y ? i + q - y : i + 1; }
     try {
         imglink.innerText = samllimgs[0].getElementsByTagName('img')[0].alt;
     }
     catch (e) {
         imglink.innerText = samllimgs[0].firstChild.firstChild.alt;
     }
     for (x = 1; x < y; x += 1) {
         bigimgs[x].style.display = 'none';
     }
     for (x = 0; x < y; x += 1) {
         samllimgs[x].onmouseover = helper(x);
     }
     topCon.children[2].onclick = function (e) {
         i = lastIndex;
         var t;
         if (!e) {
             e = window.event;
             t = e.srcElement;
         } else {
             t = e.target;
         }
         switch (t.className) {
             case 'icon_prev':
                 slide(getPrevI(1));
                 break;
             case 'icon_next':
                 slide(getNextI(1));
                 break;
         }
     };
     topCon.onmouseover = function () {
         clearInterval(s);
     };
     topCon.onmouseout = function () {
         s = setInterval(function () {
             slide(i);
             i = getNextI(1);
         }, time);
     };
 };

 var byId = function (id) { return document.getElementById(id); }
         , topCon = byId('flower1')
         , big = byId('focus_pic1')
         , samll = byId('focus_list1')
         , tip = byId('focus_title1')
 foucsbox(2500);

 var topCon = byId('flower2')
         , big = byId('focus_pic2')
         , samll = byId('focus_list2')
         , tip = byId('focus_title2')
 foucsbox(2500);

 var topCon = byId('flower3')
         , big = byId('focus_pic3')
         , samll = byId('focus_list3')
         , tip = byId('focus_title3')
 foucsbox(2500);

 var topCon = byId('flower4')
         , big = byId('focus_pic4')
         , samll = byId('focus_list4')
         , tip = byId('focus_title4')
 foucsbox(2500);

解决方法2：由于js的变量作用域或作用范围是按函数来划分界限的，所以放在一个函数里边，把他执行一下。一般通俗的叫：立即执行函数。这样，这个内部$不会穿透，或影响到外边去。这是一种偷懒或省力的解决办法。但是这个方法的缺点是：要求的技术储备比较高，里边也有少量的坑。比如，即不让$穿透，还需要把里边的方法暴露给外边。这时候需要借助window，把方法绑定在window上面去。比如：window.method = method.

 (function(window){
     var $ = function(id) {
             return document.getElementById(id);
         },
         topCon = $('flower1'),
         big = $('focus_pic1'),
         samll = $('focus_list1'),
         tip = $('focus_title1');
     foucsbox(2500);

     var topCon = $('flower2'),
         big = $('focus_pic2'),
         samll = $('focus_list2'),
         tip = $('focus_title2');
     foucsbox(2500);

     var topCon = $('flower3'),
         big = $('focus_pic3'),
         samll = $('focus_list3'),
         tip = $('focus_title3');
     foucsbox(2500);

     var topCon = $('flower4'),
         big = $('focus_pic4'),
         samll = $('focus_list4'),
         tip = $('focus_title4');
     foucsbox(2500);
 }(window))

以上方法就可以成功解决问题啦！感谢大神的指点，受益匪浅！前端的路，才刚刚开始，希望以后可以更多的发现问题，解决问题，分享经验！