AJAX开发点滴2：$(function(){})背后的含义及常见的bug纠正
浏览(310 + ) 作者: clq 发表于 2018-04-02 18:48:48
编辑
关键字:
AJAX开发点滴2：$(function(){})背后的含义及常见的bug纠正
--------------------------------------------------
原文地址是 http://baijiahao.baidu.com/s?id=1596610298683807738
不过目前百家号偏娱乐性，对代码的一些特殊符号还不能正确转码。
--------------------------------------------------
按，原标题中的 $(function(){}) 给百家号自动改成 $(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 是这样写的：
<body onload="fn1(),fn2()"></body>
而我们提到的 $(document).ready() 是 dom 解析完成后，不用等待图片等资源加载即可开始执行了，那么要等待的话怎么办呢？难道要写上面那种传统的代码吗？当然不是，jquery 中是使用 $(window).load(function()。例如：
$(window).load(function() {alert("hello,我是jQuery!");});
而且这个函数同样可以写多个，它们之间同样不会覆盖。会依次顺序执行！
但是！但是！大家一定要仔细看这一节内容。这只是 jquery 的设计目标，这是什么意思呢？就是说在实际运行时有的浏览器可能会有问题。是的，就算是 jquery 如此著名的控件有时也是有很明显的 bug 的。我手头上的 32 位 firefox 52.x 版本就是不能在 jquery2.0.0 中完好的执行多个 $(document).ready(function(){}) 的。解决的方法其实也很简单：那就是换一个版本的 jquery ... 这其实也挺痛苦的，因为 jquery 一共有 jquery 1.x、 jquery 2.x、 jquery 3.x 三个大的版本，小版本就更加多了。如果你以为要用最新的 3 版本，那你就错了。其实上现在比较好的方法是，手机上尽量用最新的，而 pc 上最好是使用最新的版本 1.x 。什么叫最新的 1.x ？是这样的 jquery 2 以后就不支持 ie6/7/8 了，而这种需求又很大，所以 jquery 的 1.x 仍然在修改维护，只是不加新功能了而已。我的上面那个问题就是通过更新到 jquery-1.11.3 后解决的，这其实不是最新的 1.x 不过听说太新的有可能有别的问题，而这个版本兼容性好罢了。总之大家在 pc 上如果某个常用功能不行的话，可以考虑升级到 1.x 的最高版本。当然如果是非常追求新功能的不考虑 ie 兼容性的那么直接用最新的 jquery 版本就好了。不过要提醒的是，jquery 并不仅仅是在 ie 上才有不兼容的现象，如我上面的那个问题，其实的浏览器同样会的，所以尽可能测试各种浏览器才是真正的版本选择标准。
最后提供一个下载各个版本 jquery 的好地方，如图：
微软的jquery下载点
本来最好是应该是 google 的 cdn 分流的，但是国内访问 google 嘛 ... 你懂的。所以用这个吧，这个也非常的棒！因为它来自强大的微软 ... 另外对那些依赖网上的 jquery 或者别的 js/css 模块的 cdn 的人，我想说的是最好还是放个在自己的站点上，这些 cdn 没你想象的那么可靠，我都被坑个好几次了。
好了，以上内容希望对有前端开发任务的非专业前端开发程序员有用 :) 专业前端请路过吧
[2018-04-02 18:50:06 最后更新]
[图片]
NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.
