$(function(){})与!function(){}()在页面中的加载顺序比较

来源：互联网发布：好用的加湿器知乎编辑：程序博客网时间：2024/05/22 17:31

大家都知道

$(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(){}); 提前被加载。

这虽然不是什么大试验，但是记录下来，方便供他人参考，也方便自己以后查阅

1 0