AJAX开发点滴：$(function)({})背后的含义

朱雀 2021-09-18 11:00 267阅读 0赞

## AJAX开发点滴：$(function)(\{\})背后的含义 ##

有一个奇特的 $(function()\{\}); 这代表的是什么意思呢？其实这短短的几个字符中的含义并不那么简单，并且还相当的复杂。不但这样，它还是诸多新手中非常容易出错的地方。甚至 jquery 对它的支持都有些 bug 要注意的地方。这个表达式如此的重要，所以我们一定要来好好的研究一番。

首先要说的是 $(function()\{\}); 其实是一个简写，它等同于 jquery 的 $(document).ready(function()\{\})。所以大家可以知道其实 function 那个函数修饰符号去掉的话，它的表达式就更简单就直接是 $()。这是非常容易的 jquery 的变量定义搞混淆的！我个人对这种写法是非常的不以为然，但 js 开发和现状嘛 ... 大家知道的，怎么方便怎么来呗。比如写成 $("\#box") 它就表示一个 id 为 box 的 dom 节点，这 ... 实在是很无语。但是现实已经是这样了，大家就背下来好了，当然这对从 C/C++ 转过来的人来说一定是非常的痛苦，估计这也是为什么会有个专门的职业叫前端程序员的原因 ...

发了，不扯那么多。那么这个函数的意义是什么呢？考虑没有 jquery 的情况下我们怎样执行一段 js 代码呢？其实传统来说，只要写在 <script></script> 标签内就可以了。但这样有个问题，就是对于某些浏览器来说，如果其中的代码涉及到某个 dom 节点的位置在这段代码之后的话就可能会失败。原因是代码在 html 文档的前面，浏览器读到它的时候就执行了，而 dom 节点在它后面浏览器还没读取到呢，所以不知道怎样去操作这个节点，于是报错了。你会说为什么不等到所有节点都读取完了再回头执行 js 代码呢？关键是有些代码就是想在页面出来一部分时就执行了啊。所以对于那些在页面读取完才执行的代码通常会页面的 onload 中去。但 onload 又有自己的问题，比如 onload 的 window 的还有 body 的，执行的时机很是不好确定。于是 jquery 推出了 $(document).ready(function()\{\}) 它的设计目标有以下几个(可看作 jquery 的 ready 函数与 js 的 onload 的区别)：

1.执行时间

window.onload 必须等到页面内包括图片的所有元素加载完毕后才能执行；

$(document).ready() 是 dom 结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行。

特别是第二点，大大的方便了代码初始化的分离操作，确实是 jquery 对开发人员的巨大贡献。否则各个代码块中都要自己想办法在初始化函数中加入自己的那一部分，会相当的混乱。当然在各浏览器为实现这个目的是有自己的扩展的 -- 可惜的是互相间不怎么兼容，写起来也是很不方便。

另外传统是 onload 是这样写的：

而我们提到的 $(document).ready() 是 dom 解析完成后，不用等待图片等资源加载即可开始执行了，那么要等待的话怎么办呢？难道要写上面那种传统的代码吗？当然不是，jquery 中是使用 $(window).load(function()。例如：

$(window).load(function() \{alert("hello,我是jQuery!");\});

而且这个函数同样可以写多个，它们之间同样不会覆盖。会依次顺序执行！

参考文章：[http://baijiahao.baidu.com/s?id=1596610298683807738&wfr=spider&for=pc][http_baijiahao.baidu.com_s_id_1596610298683807738_wfr_spider_for_pc]