本地Javascript和CDN优先

我正在学习新波士顿视频教程的jquery，并且有2个问题在下面提出。目的是在用户点击时隐藏段落。但首先，这是我在点击时隐藏段落的做法。本地Javascript和CDN优先

hide.js看起来像这样

$('#paragraph').click(
function() { 
    $('#paragraph').hide(); 
} 
);

CDN，然后在身体局部JS - 工作
本地JS其次是CDN的身体 - 不工作
本地JS后跟CDN头 - 不起作用
CDN，随后在当地主管JS - 不起作用

Q1。看到这些情况，我们可以自信地说，在HEAD部分声明的脚本将无法工作？ Q2302。有人可以解释这些不同的行为吗？

来源

2014-02-26 blue piranha

所以你通过CDN加载“hide.js”？什么是“本地js”呢？ –

@ChrisHardie本地js是上面定义的。我将使用CDN作为其他功能。 –

本地JS = hide.js对此感到抱歉 –

要搞清楚这个问题，你必须理解JavaScript如何得到包括来自外部资源的页面，浏览器如何构建DOM上。

当包括两个脚本标记：

<script src="jquery.js"></script> 
<script src="foo.js"></script>

首先是下载并执行，那么第二个被下载并执行。如果在第一个脚本中定义了一个属性，例如window.hello，则可以在第二个脚本中访问它，因为第二个脚本会在第一个脚本完成之后下载并执行。如果脚本以其他顺序运行，则该属性将不可用。

只要将代码包含在头部vs正文中，就必须考虑代码执行时相对于浏览器解析html并创建DOM。浏览器从头到尾读取html，因此，当它到达头部的脚本标记时，主体节点还不存在。这就是为什么你的代码不能工作的原因。为了使它工作在头上，你必须以某种方式告诉你的代码等到元素存在。要解决这种情况最常见的方法是使用DOMContentLoaded的事件，你可以绑定到同：

$(document).ready(function(){ 
    // my code here 
});

您也可以使用窗口加载事件。

$(window).on("load",function(){ 
    // my code here 
})

这是更好地使用DOMContentLoaded除非你的代码需要获得元素的宽度或高度，因为它会发生更早。

第三个选择是使用事件委托，但它确实不适合您的用例。

$(document).on('click','#paragraph',function() { 
    $('#paragraph').hide(); 
});

这通常是一个更好的主意，有结束标记之前你的JavaScript，但它往往不是很容易与许多MVC和CMS系统来这样做的。

来源

2014-02-26 19:02:13

如果hide.js使用jQuery，那么是的，你需要首先加载jquery.min.js。这解释了（2）和（3）。

（4）的问题是您需要将代码包装在document.ready块中。由于<body>位于<head>之后，#paragraph在hide.js运行时不存在。

http://api.jquery.com/ready/

来源

2014-02-26 19:00:07 Blazemonger

所以两件事情正在发生。您的代码必须在加载jQuery代码后加载，因为它利用jQuery来隐藏段落。

其次，您的代码将不得不在加载DOM后加载，以便它可以访问您的段落元素。

这就是为什么数字1的作品，其他人都没有。你已经把它加载到你想要影响的标签之后，并且在你的脚本之前加载了jQuery。

您还可以在$(document).ready(function() {})中包装脚本以确保在脚本运行之前加载DOM。这会让你把脚本放在首位，但你仍然必须首先加载jQuery。

所以：

$(document).ready(function() { 
    /// your script here 
})

来源

2014-02-26 19:01:52 earl3s

首先，使用$（文件）。就绪（）：

$(document).ready(function() { 
    $('#paragraph').click(function() { 
    $('#paragraph').hide(); 
    }); 
});

把jQuery的本地或之前您的自定义脚本CDN 。

<script src="myjQueryCDNorLocal.js"></scritpt> <script src="myCustomScripts.js"></scritpt>

来源

2014-02-26 19:03:57

您有两个潜在的问题。

hide.js中的代码使用jQuery函数。这些函数必须在代码尝试使用它们时定义。如果在jQuery之前包含hide.js，那么在浏览器尝试执行hide.js的时间点，它不会（尚未）加载jQuery，因此jQuery函数将不会被定义。因此：您必须在包含hide.js的之前包含jQuery 。

hide.js中的代码引用网页中的内容。浏览器必须已经加载了页面（并对其进行了分析）才能找到该内容。如果您在<head>标记中包含hide.js，则确保在执行hide.js时该内容不可用。（所以对Q1的回答是“是”，但是，简单地将脚本移动到页面底部也不能保证能够正常工作。请注意，浏览器必须先加载并解析页面，然后才能找到内容。通过将脚本移动到底部，您将确保页面已加载，但您不能保证页面已被解析。在上面的简单示例中，即使最慢的浏览器也可能会解析页面。这就是为什么它看起来有效。但是，为了确保安全，在确定页面已被浏览器解析之前，您不应该执行hide.js。您可以使用jQuery来告诉你什么时候已经发生：

$（函数（）{ $（ '＃段'）点击（函数（）{ $（ '＃对图'）隐藏（。）; } ）; }）;

来源

2014-02-26 19:05:25

本地Javascript和CDN优先

回答

相关问题