zoukankan      html  css  js  c++  java
  • JS基础----JS的编写位置

    js的集中编写位置

    1.嵌套在HTML标签中

    <button onclick="alert('hello world')">点我一下</button>
    
    <a href="javascript:alert('hello world');">点我这个链接</a>
    <a href="javascript:;">点我这个链接</a>

    以上写法在实际项目中基本不会使用,因为这样子不利于项目维护,

    想一想若是都挤在HTML标签里面,页面标签那么多,光看着就头晕,要是想修改js代码还要去找简直难上加难

    但对于a标签来说,当你采用上述方式的时候

    会发现链接是不会进行页面跳转的,因此若在开发过程中要a标签不进行跳转可使用此方式。

    一般我们会选择吧js抽离出来,专业点叫把页面的展示和行为分离出来,方便维护

    因此就有以下大概两种方式

    2.写在script标签内

    <script type="text/javascript">
    alert('hello world');
    </script>
    

     这种没啥好说的,在开发中也比较少见。

    3.单独写在js文件中并引用

    这个就把js单独写在一个 .js的文件里面,然后我们去HTML里面引用那个文件,可以进行模块化的抽离,

    简单说一个功能就一个js文件,这样子如果我们需要修改哪个功能就直接去对应的js文件去找,而且不会影响到其他js功能

    ///js文件
    alert(‘hello world’);
    
    
    
    <!--js引用-->
    <script src="js路径"></script>
    

     注意一旦script标签用来引用js文件后,里面就不能写js代码了

    <script src="a.js">
    alert('不要在这里写js,没用的');
    </script>
    

     这种写法是错误的

    最后提下js的script标签的编写位置,

    一般就两种,写在head标签里面

    写在body标签里面并且是在body里面所有HTML标签的末尾

    <html>
        <head>
            <title>js的位置</title>
            <script src="a.js"></script>
            <script>
               console.log('我head里面');     
            </script>
        </head>
        <body>
            <button>我是按钮</button>
            <script>
                alert('我在body的最后');
            </script>
      </body>
    </html>                            
    

     这个写法我们可以注意一下,一般页面在加载的时候,是从上到下加载的,

    对于一个项目来说,js代码肯定特别多,如果我们都把所有的js写在head里面

    那么会先加载js然后加载HTML标签,

    很可能造成页面在加载中会是一片空白,HTML显示出现慢,不利于用户体验,

    因此我们大多时候都除了把一些关键的js代码(js框架的加载)放在head标签里面,

    把功能实现的js代码(点击事件之类的),写在body的最后面,

    这样子在加载中就能够先显示页面,提高用户体验。

  • 相关阅读:
    前端模块化
    PHP如何实现第三方分享
    python3运算符
    Python3基本数据类型
    Python3基本语法
    php 文件缓存
    php 链接转二维码图片
    php 根据文件内容来判断文件类型
    mysql中查询常用的关键字
    php天龙八部
  • 原文地址:https://www.cnblogs.com/kongbaifeiye/p/13663920.html
Copyright © 2011-2022 走看看