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

  1. php中并发读写文件冲突的解决方案(文件锁应用示例)

    PHP(外文名: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言.语法吸收了C语言.Java和Perl的特点,入门门槛较低,易于学习,使用广泛,主要适 ...

  2. java之jvm学习笔记三(Class文件检验器)

    java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...

  3. thinkphp学习笔记2—入口文件

    原文:thinkphp学习笔记2-入口文件 在thinkphp中有两个入口文件,一个是项目的入口文件,是index.php在主目录里面,还有一个是thinkphp框架的的入口文件,放在框架目录下面如: ...

  4. matlab学习笔记5--低级文件输入输出函数

    一起来学matlab-matlab学习笔记5 低级文件输入输出函数 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab 程序设计与综合应用>张德丰等著 感谢张 ...

  5. 在winform中调用js文件并输出结果

    在winform中调用js文件并输出结果默认分类 2007-10-19 16:35:06 阅读25 评论0 字号:大中小 由于项目需要在winform中调一个强大的js,所以把这个tip记录在此: 1 ...

  6. Windows phone 8 学习笔记(2) 数据文件操作

    原文:Windows phone 8 学习笔记(2) 数据文件操作 Windows phone 8 应用用于数据文件存储访问的位置仅仅限于安装文件夹.本地文件夹(独立存储空间).媒体库和SD卡四个地方 ...

  7. [转]html页面调用js文件里的函数报错onclick is not defined处理方法

    原文地址:http://blog.csdn.net/ywl570717586/article/details/53130863 今天处理html标签里的onclick功能的时候总是报错:Uncaugh ...

  8. iOS 开发中，关于xxx.xcodeproj 文件冲突的解决方案 (以后谁不会了，直接将连接给他)

    iOS 开发中,关于xxx.xcodeproj 文件冲突的解决方案 (一有冲突要手把手教一遍,太麻烦了,现在总结下,以后谁不会了,连接直接发他). 关于xxx.xcodeproj 文件冲突的话,是比较 ...

  9. Python 调用JS文件中的函数

    Python 调用JS文件中的函数 1.安装PyExecJS第三方库 2.导入库:import execjs 3.调用JS文件中的方法 Passwd = execjs.compile(open(r&q ...

随机推荐

  1. java中"与"和"或"

    在java中"与"和"或"都具有短路功能. 关于"或"运算如 if(mc == null || mc.getReceive()==0){ / ...

  2. elasticsearch api

    count curl -XGET http://21.3.5.121:9200/ipv4geo/service/_count -d '{"query":{"match&q ...

  3. 批处理学习：for语句详解【经典】

    大纲 一 前言 二 for语句的基本用法 三 for /f (delims.tokens.skip.eol.userbackq.变量延迟) 四 for /r (递归遍历) 五 for /d (遍历目录 ...

  4. springmvc 表单字段list提交问题

    比如用户表user 选课表course 用户表有选课字段list<course> courses=new ArrayList<course>(); <input type ...

  5. C++ wMA 算法

    CMakeLists.txt project(aaa) add_library(aaa SHARED aaa.cpp) add_executable(bbb bbb.cpp) target_link_ ...

  6. js日期计算及快速获取周、月、季度起止日,获取指定日期周数以及星期几的小例子

    JS获取日期时遇到如下需求,根据某年某周获取一周的日期.如开始日期规定为星期四到下一周的星期五为一周. 格式化日期: function getNowFormatDate(theDate) { var ...

  7. Hive部署

    前置环境:CentOS 6.5 + JDK 1.7 + Hadoop 2.6 注:此处采用伪分布安装Hadoop,平时测试使用,Hive的元数据信息使用MySQL存储 一.安装MySQL 1.检查是否 ...

  8. Nginx + FastCGI 程序（C/C++） 搭建高性能web service的Demo及部署发布

       FastCGI编程包括四部分:初始化编码.接收请求循环.响应内容.响应结束循环. FCGX_Request request; FCGX_Init(); ); FCGX_InitRequest(& ...

  9. Kafka——分布式消息系统

    Kafka——分布式消息系统 架构 Apache Kafka是2010年12月份开源的项目,采用scala语言编写,使用了多种效率优化机制,整体架构比较新颖(push/pull),更适合异构集群. 设 ...

  10. jsp总结

    JSP 定义:    1)Java Server Page, Java EE 组件,本质上是 Servlet.    2)运行在 Web Container.接收 Http Request,生成 Ht ...