$(function(){})與!function(){}()在頁面中的載入順序比較

大家都知道

$(function(){});

是 $(document).ready(function(){}) 的簡寫，它是在頁面DOM載入完畢之後自動執行。

!function(){}();

是一個匿名函式，而且類似這樣函式的寫法還有好多種，比如說

(function(){}());
(!function(){})();
~function(){}();

其實無論是括號，還是感嘆號，讓整個語句合法做的事情只有一件，就是讓一個函式宣告語句變成了一個表示式，本人就比較喜歡用 !function(){}(); 這個格式。

既然都是函式，那麼問題來了，到底!function(){}();

是在頁面的什麼時候執行呢？它跟$(function(){}); 誰又會更早執行呢？

帶著這兩個問題我就新建了一個專案，寫了一個頁面測試了一下

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://" 
+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="<%=path%>/chat/js/jquery-3.0.0.min.js" 
></script>
<script type="text/javascript">
$(function() {
    console.log("自動載入了嗎？ ");
    alert("$fuction已呼叫");

});

 !function(){console.log("呼叫了more");alert("!fuction已呼叫");}();
/* (function(){console.log("呼叫了more");alert("(fuction(){}())已呼叫");}()); */
/*  (function(){console.log("呼叫了more");alert("(fuction(){})()已呼叫");})(); */
function see() {
    alert("!function實在頁面載入前被呼叫，$function是在頁面載入完成後被呼叫");
}

</script>
<title>test</title>
</head>
<body>
<h2>$(function(){})與!function(){}()載入順序的測試</h2>

<div><span><input type="button"  value="檢視測試結果" onclick="see()" /></span></div>

</body>
</html>

最後的執行結果是

所以由上面的測試，我得出來的結果是，!function(){}(); 是在頁面載入前就被呼叫，而$(function(){}); 是在DOM載入完之後被呼叫，幾乎是和頁面同時出來的。

由此可見，在頁面中，!function(){}(); 是要比 $(function(){}); 提前被載入。

這雖然不是什麼大試驗，但是記錄下來，方便供他人蔘考，也方便自己以後查閱

$(function(){})與!function(){}()在頁面中的載入順序比較

相關推薦