$(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>