将内联 js 移动到外部 js 文件中导致错误答案

【问题标题】：Moving inline js into external js file causing errors将内联 js 移动到外部 js 文件中导致错误
【发布时间】：2014-04-08 12:53:52
【问题描述】：

当我注意到控制台中有一些错误时，我正试图整理我正在修改的模板的内联 js 脚本并将它们组合到一个外部 js 文件中。他们没有对网站的功能造成任何损害，但我想知道我做错了什么以及如何解决它。

我的外部js文件是：

<script type="text/javascript" src="web/js/init.js"></script>

Link 1 抛出以下错误：

Uncaught TypeError: Object [object Object] has no method 'owlCarousel'

（我不在那个页面上使用那个轮播......）

Link 2 我使用 carousal 的地方会抛出此错误：

Uncaught TypeError: Object [object Object] has no method 'nivoSlider'

（我不使用该页面上的滑块）

Link 3 我保留了内联脚本（没有外部 js 文件），并且没有与外部/内部 js 相关的 js 错误。

谢谢！

【问题讨论】：

合并时，您的函数仍在尝试使用各自页面中不存在的内容。最后一个没有抛出任何错误的原因是因为页面上没有“owlCarousel”，并且它从未被调用过，但是加载了一个 nivoSlider 并具有与之关联的元素。加载时的外部 javascript 文件会提前运行所有内容，因为没有函数封装。如果您要将所有内容放在外部 javascript 文件中，则必须将“加载程序”放在它们自己的函数中，当这些元素存在时，该函数会被调用。
我还建议只调用你的 $(function(){});一次。无需为您正确的每段代码单独调用它。此外，我会将您的脚本放在页脚而不是页眉中。
@blakev 所以把所有的函数都包装在： $(window).load(function() ? Thesublimeobject，你的意思是把所有的 js/css 从头部取出来放在

标签： javascript jquery html css

【解决方案1】：

您正在调用 nivoslider() 而没有使用它的 js file，这就是为什么您会收到 nivoslider 错误的原因，请从您的 init.js 中删除以下行从您的 puppies page 中

$(window).load(function() {
   $('#slider').nivoSlider();
});

你owlcarousel 也有同样的问题，从init.js 中为你的index page 删除以下代码

$("#owl-example").owlCarousel({
    autoPlay: 3000, //Set AutoPlay to 3 seconds
    items : 3,
    itemsDesktop : [1199,3],
    itemsDesktopSmall : [979,3]
});

如果您的 id slider 和 owl-example 仅用于 nivoslider 和 owlCarousel，那么您可以通过检查元素的长度来做到这一点，例如，

$(function() {
   if($('#slider') && $('#slider').length){// must be on puppies page only
       $('#slider').nivoSlider();
   }
   if($('#owl-example') && $('#owl-example').length){// must be on index page only
      $("#owl-example").owlCarousel({
         autoPlay: 3000, //Set AutoPlay to 3 seconds
         items : 3,
         itemsDesktop : [1199,3],
         itemsDesktopSmall : [979,3]
      });
   }
});

【讨论】：

【解决方案2】：

1) 您正在定位页面上不存在的元素。没有 ID 为 owl-example 的元素，因此 jquery 什么也不返回，并且正在对这个空值调用一个方法。（见here on SO如何先测试null）

2) 同上，但元素 ID 为slider。它在此页面上不存在，因此在 null 上调用了一个方法。

你的代码看起来像

$(function(){
  //Code..
})

这些函数都在 DOM 加载时被调用。见this SO question。

3) 您在此页面上没有收到错误，因为您使用的 jquery 选择器正在返回页面中匹配的元素。这与 inline/external 没有任何关系。

【讨论】：