(function(){})();和jQuery的$(document).ready(function(){});的区别是什么

小小的PHP能干啥
  • 181

本来以为这俩都是同一个效果,所以把jQuery的全都换成原生的了,大部分代码都没问题,只是有一个功能报错了,所以来问问这2段代码的区别在哪里?

(function(){
    代码。。。
})();
$(document).ready(function(){
    代码。。。
});

这2个的区别在哪里?为什么有的代码运行正常,有的就不行了?
如果想用原生的,应该怎么写?

回复
阅读 1.1k
4 个回答

1是匿名函数立即执行
2是domcontentloaded之后触发的

  1. 第一段代码是匿名封装,一般用来封装插件或者写自己的业务代码,好处是里边的变量都会被封在最外层的函数作用域里出不来,不会污染环境
  2. 老版jQ的ready标准写法是$(document).ready(function(){})这样(还有几种其实大同小异),简写(jQ包装)是$(function(){});到3.0+以后,标准写法就是$(function(){})(当然原来的写法也兼容),除此以外还加了一种写法,即:

    $.when( $.ready).then(function(){})

    或者

    $.when( $.ready).done(function(){})
  3. 原生的就是DOMContentLoaded事件了,但你如果把script标签放到</body>之前的话,其实加不加也无所谓。。
(function(){
    代码。。。
})();

是立即执行函数,可以保证里面的变量不会被外界污染

$(document).ready(function(){
    代码。。。
});

等同于

$(function(){
    代码。。。
})

是等待文档加载完成之后执行

一般是script写在页面开头才需要用这些方式

如果用原生来替换的话,一般是用

window.onload = function(){
    代码。。。
}

jq封装的比这个更为复杂,但是基本上是这个意思,表示页面加载完成后执行里面的js代码

还可以通过把js放在body后面,因为html是从上至下执行的,也可以达到相同的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div></div>
</body>
<script>
    (function(){
        //这里可以获取到上面的div
        //如果script标签是放在页面开头部分就获取不到,要通过window.onload才行
        //代码。。。
    })();
</scipt>
</html>
忍V殇
  • 3
新手上路,请多包涵

1.(function(){

代码。。。

})();

是立即执行函数,不需要调用就能自执行,可以看作是普通的代码块。然而,普通的函数都是需要用函数名来调用才执行的,正常是不会自己执行的。

2.$(document).ready(function(){

代码。。。

});

是jq的函数,意思是文档加载完毕后在进行执行,通常用jq的话,可以把逻辑代码写到这个函数里边去。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏