zoukankan      html  css  js  c++  java
  • vue.js引用出错-script代码块放在head和body中的区别

    这篇随笔是为了记录vue.js引用出错的原因,看到最后原来是vue.js代码放在head中不能正常使用,要最后发现要将其放在body中才行。。。
    原来是js代码放在head和body中的区别问题,占个坑,来埋点个人理解。
     
    现在个人将script块分为js执行代码和js函数两大块。
    例如:
    js执行代码在页面中可能长成这个鬼样:
    <script>
        var hello = "helloworld";
    </script>
    而js函数则是这副嘴脸:
    <script>
    function sayhello(){
        var hello = "helloworld";
    }
    </script>
     
    为了方便理解,现在将js和html比喻如下:
    实际行为=js执行代码
    指导手册=js函数
    组装赛车=html页面
     
    以下对js代码放在head和body中的区别进行具体解释:
    1.放在head中,则script在页面加载之前就有了,分情况,
      如果script块中是js执行代码,则相当于实际行为顺序执行(不可逆),但组装赛车只有零零散散的零件陆陆续续的到货,并没有完全到货,导致某些实际行为需要操作的零件找不到,即组装赛车的某些关键步骤被省略了。
      如果script块中是js函数,则相当于指导手册先于组装赛车先到货,因为只是书面的指导手册,没有实际执行什么行为,所以最终不会有实际行为的缺失。
     
    2.放在body中,则script在页面加载之后才有,同样分情况,
      如果script块中是js执行代码,因为此时组装赛车的所有零件都已经到货了,所以按实际行为来操作,所有行为都可以成功的执行。
      如果script块中是js函数,则相当于组装赛车先到货,指导手册后到货,之后按照指导手册进行零件拼装即可成功组装成赛车,同样不会有实际行为的缺失。
     
    所以,如果页面引入的是js函数,那么不管置于head还是body中,都没有区别。
    但是如果是js执行代码,那就要考虑dom节点是否存在的情况了。
  • 相关阅读:
    dsp1
    数字信号处理中的常用方法
    近一星期的学习计划4-8 到 4-15
    近一个月的学习计划!4-8
    离散时间与系统-1
    python _列表
    2016-1-19
    fushioncharts 使用教程要点---使用JSON数据方式
    使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题
    MVC之路随记3--Html辅助方法
  • 原文地址:https://www.cnblogs.com/akiradunn/p/8685724.html
Copyright © 2011-2022 走看看