本地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優先

回答

相關問題