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的最后面,

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

  • 相关阅读:
    CSS之旅——第二站 如何更深入的理解各种选择器
    CSS之旅——第一站 为什么要用CSS
    记录一些在用wcf的过程中走过的泥巴路 【第一篇】
    asp.net mvc 之旅—— 第二站 窥探Controller下的各种Result
    asp.net mvc 之旅—— 第一站 从简单的razor入手
    Sql Server之旅——终点站 nolock引发的三级事件的一些思考
    Sql Server之旅——第十四站 深入的探讨锁机制
    Sql Server之旅——第十三站 对锁的初步认识
    Sql Server之旅——第十二站 sqltext的参数化处理
    Sql Server之旅——第十一站 简单说说sqlserver的执行计划
  • 原文地址:https://www.cnblogs.com/kongbaifeiye/p/13663920.html
Copyright © 2011-2022 走看看