问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
小小的PHP能干啥
    194358105

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

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

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

    javascript
    阅读 3.4k
    4 个回答
    得票最新
    头像
    zzgzzg00
      3.7k21420

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

      头像
      某熊猫桑
        16.1k61547
        1. 第一段代码是匿名封装，一般用来封装插件或者写自己的业务代码，好处是里边的变量都会被封在最外层的函数作用域里出不来，不会污染环境

        2. 老版jQ的ready标准写法是$(document).ready(function(){})这样（还有几种其实大同小异），简写（jQ包装）是$(function(){})；到3.0+以后，标准写法就是$(function(){})（当然原来的写法也兼容），除此以外还加了一种写法，即：

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

          或者

          $.when( $.ready).done(function(){})
        3. 原生的就是DOMContentLoaded事件了，但你如果把script标签放到</body>之前的话，其实加不加也无所谓。。
        头像
        XboxYan
          18.2k93790
          (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殇
            32
            新手上路，请多包涵

            1.(function(){

            代码。。。

            })();

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

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

            代码。。。

            });

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

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